/* ============================================================================
   «Mis paginas» (tren B2, plan «Inicio: mas widgets y botones», parte B): la lista de paginas, la hoja de «Nueva pagina» y el marco de UNA pagina. Lienzo aprobado: «Mis paginas», tableros 2 a 8.
   Los dibuja public/paginas.js. Solo tokens de cuarto-oscuro.css (--pag, --piedra, --piedra-on, --tinta, --texto, --medio, --linea, --e-*, --t-*, --r, --r-flota, --r-pildora): ningun color, sombra, tamano de
   letra ni duracion escritos a mano (evaluacion/paridad-cuarto-oscuro.mjs). Forma: pildora = se toca; 16 px = flota; 4 px = contenido. Filas sin cajas ni rayas. Nada se anima.
   Una pagina abierta es un `.ini` (la misma rejilla del Inicio: cuarto-oscuro.css la mide contra #view); la lista y los estados son una columna angosta.
   ============================================================================ */
.mp{ box-sizing:border-box; max-width:760px; margin:0 auto; padding:var(--e-2) 0 var(--e-7); display:flex; flex-direction:column; gap:var(--e-5); }
.mp .pz-cab{ margin-bottom:0; }
.mp-sec{ display:flex; flex-direction:column; gap:var(--e-2); }
.mp-sec-t{ margin:0; font-size:var(--t-meta); line-height:16px; font-weight:600; color:var(--medio); letter-spacing:.02em; }
.mp-pie{ margin:0; font-size:var(--t-meta); line-height:1.5; color:var(--medio); max-width:64ch; }
.mp-estado{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-4); padding:var(--e-4) 0; }
.mp-estado p{ margin:0; font-size:var(--t-campo); line-height:1.5; color:var(--medio); max-width:52ch; }
.mp-nota{ margin:0 0 var(--e-3); font-size:var(--t-texto); line-height:1.5; color:var(--medio); }

/* La fila de una pagina: su miniatura, el nombre, cuantos bloques trae y cuando se cambio. El `···` solo aparece al pasar el cursor (o con Tab); en pantalla tactil se ve siempre. */
.mp-fila{ cursor:pointer; }
.mp-fila .pz-fila-ico{ width:52px; height:36px; }
.mp-fila:hover .co-acc-fila, .mp-fila:focus-within .co-acc-fila{ opacity:1; }
.mp-fila:focus-visible{ outline:2px solid var(--tinta); outline-offset:-2px; }

/* La miniatura: seis columnas, y cada bloque ocupa las que su ancho dice (tercio dos, mitad tres, completo seis). Solo la FORMA, nunca el contenido de la pagina. */
.mp-mini{ box-sizing:border-box; width:100%; height:100%; padding:2px; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); grid-auto-rows:5px; gap:2px; align-content:start; overflow:hidden; border-radius:var(--r); background:var(--piedra-on); }
.mp-mini i{ grid-column:span 3; border-radius:1px; background:var(--medio); opacity:.55; }
.mp-mini i[data-ancho="tercio"]{ grid-column:span 2; }
.mp-mini i[data-ancho="completo"]{ grid-column:span 6; }
.mp-mini.vacia{ background:transparent; border:1px solid var(--linea); padding:1px; }

/* Una pagina que solo se puede MIRAR (la del equipo, para quien no la edita): una linea y el camino a «Duplicar y editar». */
.mp-aviso{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-4); padding:var(--e-3) var(--e-4); border-radius:var(--r-flota); background:var(--piedra); color:var(--texto); font-size:var(--t-texto); line-height:1.4; }
.mp-aviso span{ min-width:0; }
.mp-aviso .pz-b-s{ flex:none; }
@media (max-width:560px){ .mp-aviso{ flex-direction:column; align-items:flex-start; } }

/* El campo del nombre (la hoja de «Nueva pagina» y la de renombrar): el contador n/40 vive dentro del campo, a la derecha. */
.mp-lbl{ display:block; margin-bottom:var(--e-1); font-size:var(--t-meta); line-height:16px; font-weight:600; color:var(--medio); }
.mp-campo{ position:relative; }
.mp-campo .inp{ width:100%; box-sizing:border-box; padding-right:var(--e-7); }
.mp-cuenta{ position:absolute; right:var(--e-3); top:50%; transform:translateY(-50%); font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; pointer-events:none; }
.mp-trae{ margin-top:var(--e-4); }
.mp-trae ul{ margin:var(--e-1) 0 0; padding-left:var(--e-4); font-size:var(--t-texto); line-height:1.6; color:var(--texto); }
@media (hover:none){ .mp-fila .co-acc-fila{ opacity:1; } }