/* ============================================================
   CAPA 2 · COMPONENTES  (ui.css)
   ------------------------------------------------------------
   Orden de carga OBLIGATORIO en todas las páginas:
       colors_and_type.css   → capa 1 · tokens de marca (colores, tipos, spacing)
       ui.css                → capa 2 · componentes (ESTE archivo)
       app.css               → capa 3 · pantallas concretas

   Regla: una pantalla nueva NO inventa su propia geometría.
   Usa los componentes de acá y, si necesita medidas propias,
   las define en app.css con las variables de abajo — nunca con
   números sueltos ni con style="..." en el HTML.

   Ver DESIGN.md en la raíz del proyecto para las reglas completas.
   ============================================================ */

:root{
  /* ---- Geometría de controles ----------------------------------
     TODO control interactivo (input, select, botón, color picker)
     mide lo mismo de alto. Esta es la razón #1 por la que las filas
     quedan desalineadas: cada uno traía su propio padding. */
  --ctl-h:    38px;   /* alto único de todo control en una fila     */
  --ctl-px:   12px;   /* padding horizontal interno                 */
  --ctl-r:    var(--r-sm);
  --ctl-bd:   1px solid var(--pame-line);

  /* ---- Ritmo de formularios ---- */
  --gap-ctl:  10px;   /* entre controles de una misma fila          */
  --gap-row:  10px;   /* entre filas de una lista                   */
  --gap-fld:  6px;    /* entre una etiqueta y su control            */
  --gap-blk:  var(--sp-4); /* entre bloques de un formulario        */

  /* ---- Editor de texto con formato (.rt) y su documento (.rt-doc) ---- */
  --rt-alto:      260px;  /* alto mínimo de la superficie de edición */
  --rt-alto-alta: 420px;  /* variante alta (.rt-edit--alta)          */
  --rt-emo:       28px;   /* botón del selector de emojis            */
  --rt-cel:       18px;   /* celda del selector de tamaño de tabla   */
  --rt-sang:      28px;   /* escalón de sangría del documento        */
  --rt-ico:       19px;   /* icono adentro de un botón de la barra   */
  --rt-menu-min: 160px;   /* ancho mínimo de un menú desplegable     */
  --rt-emo-max:  200px;   /* alto de la grilla de emojis (scrollea)  */
  --rt-celda-min: 80px;   /* ancho mínimo de una celda de tabla      */
}

/* ============================================================
   1 · FILAS REPETIDAS ALINEADAS   .ui-rows
   ------------------------------------------------------------
   El error clásico: cada fila se maqueta como su propio grid, así
   que las columnas `1fr` se resuelven distinto en cada una y nada
   queda alineado en vertical. Acá el grid es UNO SOLO (el
   contenedor) y las filas son `display:contents`, con lo cual
   todas comparten las mismas columnas. Siempre.

   Uso:
     <div class="ui-rows mis-filas">
       <div class="ui-head"><span></span><span>Nombre</span>…</div>
       <div class="ui-row">…celdas…</div>
       <div class="ui-row">…celdas…</div>
     </div>
   y en app.css:
     .mis-filas{ --ui-cols: auto 1.4fr 1.2fr auto; }

   Las etiquetas de columna van UNA VEZ en .ui-head, no repetidas
   en cada fila.
   ============================================================ */

.ui-rows{
  display:grid;
  grid-template-columns:var(--ui-cols, 1fr auto);
  gap:var(--gap-row) var(--gap-ctl);
  align-items:center;
}
.ui-rows > .ui-row,
.ui-rows > .ui-head{ display:contents; }

/* Encabezado de columnas: mismo estilo que las etiquetas de .adm-field */
.ui-rows > .ui-head > *{
  font-size:var(--fs-12);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--fg-3);
  align-self:end;
  line-height:1.2;
  padding-bottom:2px;
}

/* Todo control dentro de una fila apoya en la misma línea base */
.ui-rows input:not([type=color]):not([type=checkbox]):not([type=radio]),
.ui-rows select{
  height:var(--ctl-h);
  min-height:var(--ctl-h);
  padding-top:0;
  padding-bottom:0;
}
/* Los botones llevan min-height (no height) para que un texto de dos
   líneas crezca en vez de recortarse. */
.ui-rows button{ min-height:var(--ctl-h); }
.ui-rows input:not([type=color]):not([type=checkbox]):not([type=radio]),
.ui-rows select{
  width:100%;
  font-family:var(--font-sans);
  font-size:var(--fs-14);
  padding-left:var(--ctl-px);
  padding-right:var(--ctl-px);
  border:var(--ctl-bd);
  border-radius:var(--ctl-r);
  background:#fff;
  color:var(--fg-1);
}
/* El selector de color de una fila lo estila `.ui-color` (§4), que es el mismo
   componente que se usa fuera de una fila. Una sola definición para los dos. */
.ui-rows input:focus,
.ui-rows select:focus{
  outline:none;
  border-color:var(--pame-teal);
  box-shadow:0 0 0 3px rgba(0,168,193,.20);
}
/* Celdas que no son controles (badges, contadores) se centran solas */
.ui-rows > .ui-row > span{ justify-self:start; }

@media (max-width:720px){
  .ui-rows{ grid-template-columns:var(--ui-cols-mob, 1fr); }
}

/* ============================================================
   2 · NOTAS Y TEXTOS DE AYUDA   .ui-note
   ------------------------------------------------------------
   Reemplaza los <p class="nota" style="margin:...">. El espaciado
   sale del componente, no de un style suelto.
   ============================================================ */

.ui-note{
  font-size:var(--fs-14);
  line-height:var(--lh-normal);
  color:var(--fg-2);
  margin:0 0 var(--gap-blk);
}
.ui-note:last-child{ margin-bottom:0; }
.ui-note--after{ margin:var(--sp-2) 0 0; }   /* nota debajo de un bloque */
.ui-note b{ color:var(--fg-1); }

/* ============================================================
   3 · BARRA DE ACCIONES   .ui-toolbar
   ------------------------------------------------------------
   Botones al pie de un bloque. Sin márgenes inline.
   ============================================================ */

.ui-toolbar{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-wrap:wrap;
  margin-top:var(--gap-blk);
}
.ui-toolbar .grow{ flex:1; }

/* ============================================================
   4 · SELECTOR DE COLOR   .ui-color
   ------------------------------------------------------------
   El <input type=color> del navegador trae alto y padding propios:
   fuera de una fila queda más bajo que el input de al lado. Esta
   clase lo devuelve a --ctl-h como cualquier otro control.

   La misma definición cubre los que van adentro de .ui-rows, para
   que un color se vea igual esté donde esté.
   ============================================================ */

.ui-color,
.ui-rows input[type=color]{
  width:var(--ctl-h);
  height:var(--ctl-h);
  flex:none;
  padding:2px;
  border:var(--ctl-bd);
  border-radius:var(--ctl-r);
  background:#fff;
  cursor:pointer;
}
.ui-color:focus{
  outline:none;
  border-color:var(--pame-teal);
  box-shadow:0 0 0 2px var(--pame-teal-20);
}

/* ============================================================
   5 · ESTADO VACÍO   .ui-empty
   ============================================================ */

.ui-empty{
  color:var(--fg-3);
  font-size:var(--fs-14);
  padding:var(--sp-3);
  margin:0;
}

/* ============================================================
   6 · BANNER DE COOKIES   .ck-banner
   ------------------------------------------------------------
   Lo monta pixel.js en cualquier página donde haya tracking
   activo y la persona todavía no haya elegido. Antes venía
   maquetado con style="..." armado a mano desde el JS (colores
   y medidas escritos a dedo, fuera del sistema). Acá usa los
   tokens como cualquier otro componente.
   ============================================================ */

.ck-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9999;
  display:flex;
  gap:var(--sp-4);
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5);
  background:var(--pame-blue-900);
  color:#fff;
  font-family:var(--font-sans);
  font-size:var(--fs-14);
  box-shadow:var(--shadow-lg);
}
.ck-banner .ck-txt{ max-width:64ch; line-height:var(--lh-normal); }
.ck-acciones{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* Los dos botones miden --ctl-h como todo control del sistema. */
.ck-btn{
  min-height:var(--ctl-h);
  padding:0 var(--sp-4);
  border-radius:var(--ctl-r);
  font:inherit;
  font-weight:700;
  cursor:pointer;
  color:#fff;
}
.ck-btn--no{ background:none; border:1px solid rgba(255,255,255,.5); }
.ck-btn--si{ background:var(--pame-orange); border:0; padding:0 var(--sp-5); }
.ck-btn:hover{ filter:brightness(1.08); }


/* ============================================================
   7 · DOCUMENTO DE TEXTO CON FORMATO   .rt-doc
   ------------------------------------------------------------
   La tipografía del contenido que se escribe en el panel y se
   lee en la clase. Es UNA sola definición para los dos lados:
   la usa la superficie de edición (.rt-edit) y la usa el alumno
   (clase.html, en `.instructivo.rt-doc`). Si estuviera duplicada,
   lo que ves al escribir dejaría de ser lo que se publica.
   ============================================================ */

.rt-doc{
  font-family:var(--font-sans);
  font-size:var(--fs-14);
  line-height:var(--lh-normal);
  color:var(--fg-1);
  overflow-wrap:break-word;
}
.rt-doc > *:first-child{ margin-top:0; }
.rt-doc > *:last-child{ margin-bottom:0; }

.rt-doc h3,
.rt-doc h4{ font-family:var(--font-sans); font-weight:700; letter-spacing:-0.01em; color:var(--fg-1); }
.rt-doc h3{ font-size:var(--fs-20); margin:var(--sp-5) 0 var(--sp-2); }
.rt-doc h4{ font-size:var(--fs-16); margin:var(--sp-4) 0 var(--sp-2); }
.rt-doc p{ margin:0 0 var(--sp-3); }
.rt-doc strong{ font-weight:700; }
.rt-doc em{ font-style:italic; }
.rt-doc s{ text-decoration:line-through; }
.rt-doc a{ color:var(--pame-teal-700); text-decoration:underline; }
.rt-doc a:hover{ color:var(--pame-blue); }

.rt-doc ul,
.rt-doc ol{ margin:0 0 var(--sp-3); padding-left:var(--sp-5); }
.rt-doc ul{ list-style:disc; }
.rt-doc ol{ list-style:decimal; }
.rt-doc li{ margin-bottom:var(--sp-1); }
.rt-doc li > ul,
.rt-doc li > ol{ margin:var(--sp-1) 0 0; }

.rt-doc blockquote{
  margin:0 0 var(--sp-3);
  padding:var(--sp-2) var(--sp-4);
  border-left:3px solid var(--pame-teal);
  background:var(--pame-teal-10);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--fg-2);
}
.rt-doc blockquote p:last-child{ margin-bottom:0; }

.rt-doc hr{ border:0; border-top:var(--ctl-bd); margin:var(--sp-5) 0; }
.rt-doc img{ max-width:100%; height:auto; border-radius:var(--r-sm); }
.rt-doc code{
  font-family:var(--font-mono); font-size:var(--fs-12);
  background:var(--bg-2); padding:2px var(--sp-1); border-radius:var(--r-xs);
}

/* Tablas: ocupan el ancho del texto, como en un documento. En pantalla
   chica pasan a scrollear de costado (ver el @media del final) en vez de
   desarmar el layout. */
.rt-doc table{
  border-collapse:collapse;
  width:100%;
  margin:0 0 var(--sp-4);
  font-size:var(--fs-14);
}
.rt-doc th,
.rt-doc td{
  border:var(--ctl-bd);
  padding:var(--sp-2) var(--sp-3);
  text-align:left;
  vertical-align:top;
  min-width:var(--rt-celda-min);
}
.rt-doc th{ background:var(--bg-2); font-weight:700; color:var(--fg-2); }
/* Tabla con los anchos de columna puestos a mano (arrastrando la pared en el
   editor): los porcentajes viven en el <colgroup> y `fixed` es lo que hace
   que se respeten en vez de recalcularse según el largo del texto. */
.rt-doc table.w-fija{ table-layout:fixed; }
.rt-doc table.w-fija th,
.rt-doc table.w-fija td{ min-width:0; }
.rt-doc tbody tr:nth-child(even) td{ background:var(--pame-bg-soft); }

/* Alineación y sangría: clases, no estilos inline en el contenido. */
.rt-doc .ta-c{ text-align:center; }
.rt-doc .ta-r{ text-align:right; }
.rt-doc .ta-j{ text-align:justify; }
.rt-doc .sang-1{ margin-left:var(--rt-sang); }
.rt-doc .sang-2{ margin-left:calc(var(--rt-sang) * 2); }
.rt-doc .sang-3{ margin-left:calc(var(--rt-sang) * 3); }

/* En el celular una tabla de 4 columnas no entra: scrollea sola de costado.
   Ahí los anchos a mano no aplican — con tan poco lugar manda el texto. */
@media (max-width:720px){
  .rt-doc table{
    display:block;
    overflow-x:auto;
    width:max-content;
    max-width:100%;
  }
  /* El !important es contra el `style="width:NN%"` que el editor le pone a la
     tabla al arrastrar su pared derecha. Es la única forma de ganarle a un
     estilo inline, y acá corresponde: en 375px de ancho ese porcentaje daría
     columnas donde no entra ni una palabra. */
  .rt-doc table.w-fija{ table-layout:auto; width:max-content !important; }
  .rt-doc table.w-fija th,
  .rt-doc table.w-fija td{ min-width:var(--rt-celda-min); }
}


/* ============================================================
   8 · EDITOR DE TEXTO CON FORMATO   .rt
   ------------------------------------------------------------
   Lo monta `editor.js`. Estructura:
     .rt > .rt-bar (barra) + .rt-tbar (barra de tabla) +
           .rt-edit.rt-doc (donde se escribe) + .rt-src + .rt-pie
   Todos los controles miden --ctl-h, como el resto del sistema.
   ============================================================ */

/* Nada de `overflow:hidden` acá: recortaría los menús de emojis y de tabla.
   Las esquinas las redondean la primera y la última pieza de adentro. */
.rt{
  border:var(--ctl-bd);
  border-radius:var(--ctl-r);
  background:var(--pame-bg);
}
/* El atributo `hidden` del navegador es display:none de la hoja del user agent:
   cualquier clase de acá con `display` le gana. Las piezas que se muestran y se
   esconden (barra de tabla, HTML crudo, menús) necesitan esta línea. */
.rt [hidden]{ display:none; }
.rt:focus-within{ border-color:var(--pame-teal); box-shadow:0 0 0 2px var(--pame-teal-20); }

/* ---- Barra ---- */
.rt-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-1);
  padding:var(--sp-2);
  border-bottom:var(--ctl-bd);
  border-radius:var(--ctl-r) var(--ctl-r) 0 0;
  background:var(--bg-2);
}
.rt-grupo{ display:flex; align-items:center; gap:2px; }
.rt-grupo + .rt-grupo{
  padding-left:var(--sp-2);
  margin-left:var(--sp-1);
  border-left:var(--ctl-bd);
}
.rt-grow{ flex:1; }

.rt-btn{
  width:var(--ctl-h);
  height:var(--ctl-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:0;
  margin:0;
  border:1px solid transparent;
  border-radius:var(--ctl-r);
  background:none;
  color:var(--fg-2);
  cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
}
.rt-btn svg{ width:var(--rt-ico); height:var(--rt-ico); }
.rt-btn:hover{ background:var(--pame-bg); border-color:var(--pame-line); color:var(--fg-1); }
.rt-btn.on{ background:var(--pame-teal-10); border-color:var(--pame-teal-30); color:var(--pame-teal-700); }
.rt-btn.abierto{ background:var(--pame-bg); border-color:var(--pame-line); }
.rt-btn[data-menu]{ width:auto; padding:0 var(--sp-1); }
.rt-car{
  width:0; height:0;
  border-left:var(--sp-1) solid transparent;
  border-right:var(--sp-1) solid transparent;
  border-top:var(--sp-1) solid currentColor;
  opacity:.6;
}

.rt-sel{
  height:var(--ctl-h);
  padding:0 var(--ctl-px);
  border:var(--ctl-bd);
  border-radius:var(--ctl-r);
  background:var(--pame-bg);
  font-family:var(--font-sans);
  font-size:var(--fs-12);
  font-weight:700;
  color:var(--fg-2);
  cursor:pointer;
}

/* ---- Menús desplegables (alineación, tabla, emojis) ---- */
.rt-menu-cont{ position:relative; }
.rt-menu{
  position:absolute;
  top:calc(var(--ctl-h) + var(--sp-1));
  left:0;
  z-index:30;
  min-width:var(--rt-menu-min);
  padding:var(--sp-2);
  border:var(--ctl-bd);
  border-radius:var(--r-sm);
  background:var(--pame-bg);
  box-shadow:var(--shadow-md);
}
.rt-item{
  display:block;
  width:100%;
  min-height:var(--ctl-h);
  padding:0 var(--sp-3);
  margin:0;
  border:0;
  border-radius:var(--r-xs);
  background:none;
  text-align:left;
  font-family:var(--font-sans);
  font-size:var(--fs-14);
  color:var(--fg-1);
  cursor:pointer;
}
.rt-item:hover{ background:var(--bg-2); }

/* Selector de tamaño de la tabla */
.rt-menu--tabla{ min-width:0; }
.rt-gridsel{
  display:grid;
  grid-template-columns:repeat(8, var(--rt-cel));
  gap:2px;
}
.rt-gridsel i{
  width:var(--rt-cel);
  height:var(--rt-cel);
  border:var(--ctl-bd);
  border-radius:2px;
  background:var(--pame-bg);
  cursor:pointer;
}
.rt-gridsel i.on{ background:var(--pame-teal-30); border-color:var(--pame-teal); }
.rt-gridlbl{
  display:block;
  margin-top:var(--sp-2);
  font-size:var(--fs-12);
  font-weight:700;
  color:var(--fg-3);
  text-align:center;
}

/* Selector de emojis */
.rt-menu--emoji{ width:320px; }
.rt-emo-tabs{ display:flex; flex-wrap:wrap; gap:2px; margin-bottom:var(--sp-2); }
.rt-emo-tab{
  min-height:auto;
  padding:var(--sp-1) var(--sp-2);
  margin:0;
  border:0;
  border-radius:var(--r-pill);
  background:none;
  font-family:var(--font-sans);
  font-size:var(--fs-12);
  font-weight:700;
  color:var(--fg-3);
  cursor:pointer;
}
.rt-emo-tab:hover{ background:var(--bg-2); }
.rt-emo-tab.on{ background:var(--pame-teal-10); color:var(--pame-teal-700); }
.rt-emo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--rt-emo), 1fr));
  gap:2px;
  max-height:var(--rt-emo-max);
  overflow-y:auto;
}
.rt-emo{
  width:var(--rt-emo);
  height:var(--rt-emo);
  padding:0;
  margin:0;
  border:0;
  border-radius:var(--r-xs);
  background:none;
  font-size:var(--fs-18);
  line-height:1;
  cursor:pointer;
}
.rt-emo:hover{ background:var(--pame-teal-10); }

/* ---- Barra contextual de tabla ---- */
.rt-tbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-1);
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-bottom:var(--ctl-bd);
  background:var(--pame-teal-10);
}
.rt-tbar-lbl{ font-size:var(--fs-12); font-weight:700; color:var(--pame-teal-700); margin-right:var(--sp-1); }
.rt-tb{
  min-height:var(--ctl-h);
  padding:0 var(--sp-3);
  margin:0;
  border:var(--ctl-bd);
  border-radius:var(--ctl-r);
  background:var(--pame-bg);
  font-family:var(--font-sans);
  font-size:var(--fs-12);
  font-weight:700;
  color:var(--fg-2);
  cursor:pointer;
}
.rt-tb:hover{ border-color:var(--pame-teal); color:var(--pame-teal-700); }
/* Interruptor: encendido cuando la tabla ya tiene fila de encabezado */
.rt-tb.on{ background:var(--pame-teal); border-color:var(--pame-teal); color:var(--fg-on-brand); }
.rt-tb--del:hover{ border-color:var(--pame-danger); color:var(--pame-danger); }

/* ---- Superficie de edición ---- */
.rt-edit{
  min-height:var(--rt-alto);
  max-height:70vh;
  overflow-y:auto;
  padding:var(--sp-4) var(--sp-5);
  outline:none;
}
.rt-edit--alta{ min-height:var(--rt-alto-alta); }
.rt-edit.vacio::before{
  content:attr(data-ph);
  color:var(--fg-3);
  pointer-events:none;
  display:block;
}
.rt-edit td:focus,
.rt-edit th:focus{ outline:2px solid var(--pame-teal); outline-offset:-2px; }

/* Arrastrar la pared entre dos columnas: el cursor avisa que se puede agarrar,
   y mientras se arrastra no se selecciona texto sin querer. */
.rt-edit.redim,
.rt-edit.redim *{ cursor:col-resize; }
.rt-edit.arrastrando{ user-select:none; }
.rt-edit.arrastrando table{ border-color:var(--pame-teal); }

/* ---- HTML crudo ---- */
.rt-src{
  display:block;
  width:100%;
  min-height:var(--rt-alto);
  padding:var(--sp-4) var(--sp-5);
  border:0;
  outline:none;
  resize:vertical;
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  line-height:var(--lh-normal);
  color:var(--fg-1);
  background:var(--bg-2);
}
.rt-src--alta{ min-height:var(--rt-alto-alta); }

/* ---- Pie ---- */
.rt-pie{
  display:flex;
  justify-content:flex-end;
  padding:var(--sp-2) var(--sp-4);
  border-top:var(--ctl-bd);
  border-radius:0 0 var(--ctl-r) var(--ctl-r);
  background:var(--bg-2);
}
.rt-cuenta{ font-size:var(--fs-12); color:var(--fg-3); white-space:pre; }

@media (max-width:720px){
  .rt-grupo + .rt-grupo{ padding-left:var(--sp-1); margin-left:0; border-left:0; }
  .rt-menu--emoji{ width:min(320px, 78vw); }
  .rt-edit{ padding:var(--sp-3); }
}