/* ============================================================
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 */
}
/* ============================================================
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:
Nombre…
…celdas…
…celdas…
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);
}
.ui-rows input[type=color]{
width:var(--ctl-h);
height:var(--ctl-h);
padding:2px;
border:var(--ctl-bd);
border-radius:var(--ctl-r);
background:#fff;
cursor:pointer;
}
.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 . 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 · ESTADO VACÍO .ui-empty
============================================================ */
.ui-empty{
color:var(--fg-3);
font-size:var(--fs-14);
padding:var(--sp-3);
margin:0;
}
/* ============================================================
5 · 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); }