*,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%;text-size-adjust:100%; /* Sin esto los desplegables salen en blanco. Un ``— y `.campo-etiqueta` declara versalitas con `.14em`. Sin apagarlas aquí, lo que se teclea en el campo saldría en mayúsculas y separado. El resto de propiedades ya se apagan solas porque `.campo` las declara; éstas dos no las declaraba nadie. */ .campo{ width:100%;height:32px;padding:0 10px; background:var(--token-fill-soft); border:1px solid var(--token-line);border-radius:var(--token-radius); color:var(--token-ink);font-family:var(--token-font-body);font-size:13px; text-transform:none;letter-spacing:normal; } /* Cuando la etiqueta envuelve al campo, la separación va por dentro. */ .campo-etiqueta > .campo{margin-top:6px} textarea.campo{height:auto;min-height:120px;padding:9px 10px;line-height:1.65;resize:vertical} .campo:disabled{color:var(--token-muted-2);background:var(--token-fill-faint);cursor:not-allowed} .campo-invalido{border-color:var(--token-rt)} .campo-grupo{margin-bottom:16px} .campo-etiqueta{ display:block;margin-bottom:6px; font-family:var(--token-font-mono);font-size:10px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--token-muted-label); } .campo-etiqueta b{color:var(--token-accent);font-weight:600;margin-left:3px} .campo-ayuda{margin-top:5px;font-size:12px;color:var(--token-muted-2);max-width:64ch} .campo-error{margin-top:5px;font-size:12px;color:var(--token-rt)} .campo-fila{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} /* La casilla y su texto, en una línea que se puede pulsar entera. */ .campo-casilla{ display:flex;align-items:center;gap:9px; font-size:13px;color:var(--token-ink-3);cursor:pointer; } .campo-casilla input{accent-color:var(--token-accent);flex:0 0 auto} /* ── 4 · Botones ───────────────────────────────────────────────────────────── */ /* Ciento diez botones escritos a mano contra ochenta que pasaban por el componente: el 58% del panel se dibujaba su propio botón. Tres de esas constantes eran byte a byte idénticas y se llamaban de tres maneras distintas en tres ficheros. Dentro del panel el acento significa **acción principal**, así que sólo hay un botón lleno por pantalla; lo demás va de contorno. Un panel donde todo es cian es un panel donde nada destaca. */ .boton{ display:inline-flex;align-items:center;justify-content:center;gap:7px; height:32px;padding:0 14px; border:1px solid transparent;border-radius:var(--token-radius); font-family:var(--token-font-body);font-size:13px;font-weight:600;letter-spacing:.03em; cursor:pointer;text-decoration:none;white-space:nowrap; background:transparent;color:var(--token-ink-2); } .boton-primario{background:var(--token-accent);border-color:var(--token-accent);color:var(--token-bg)} .boton-contorno{border-color:var(--token-line-strong);color:var(--token-ink)} .boton-discreto{color:var(--token-muted)} /* El destructivo. Va de contorno y nunca lleno: un botón rojo sólido tira del ojo hacia lo único de la pantalla que no hay que pulsar sin pensarlo. */ .boton-peligro{ border-color:color-mix(in srgb,var(--token-rt) 42%,transparent); color:var(--token-rt); } .boton-mini{height:26px;padding:0 10px;font-size:12px;gap:5px} .boton:disabled{opacity:.45;cursor:not-allowed} /* La respuesta al ratón es lo único que se mueve en el panel, y se mueve poco: cambia el color, no la posición. Nada de levantar, de brillar ni de escalar — eso es del sitio público. */ @media (hover:hover){ .boton-primario:not(:disabled):hover{background:var(--token-accent-hover);border-color:var(--token-accent-hover)} .boton-contorno:not(:disabled):hover{border-color:var(--token-accent-line);color:var(--token-accent)} .boton-discreto:not(:disabled):hover{color:var(--token-ink-2)} .boton-peligro:not(:disabled):hover{background:color-mix(in srgb,var(--token-rt) 10%,transparent)} } /* ── 5 · La tabla de datos ─────────────────────────────────────────────────── */ /* Siete tablas y siete combinaciones distintas de ``, con el mismo encabezado en peso 400 en una y en 600 en otra. Y cinco de las siete sin envoltorio que ruede: en un portátil de 1280 la tabla de campañas se salía de la pantalla y las columnas de la derecha eran inalcanzables. `.tabla-envoltura` no es decoración: es lo que hace que una tabla ancha ruede **ella** en vez de poner a rodar la página entera. */ .tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch} .tabla-datos{width:100%;border-collapse:collapse;font-size:13px} .tabla-datos th{ padding:8px 12px;text-align:left;white-space:nowrap; font-family:var(--token-font-mono);font-size:10px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--token-muted-label); border-bottom:1px solid var(--token-line); } /* La interlínea va explícita, y sin ella la fila no mide lo que dice. El cuerpo del sitio va a 1.7 —correcto para un párrafo—, y una celda que lo hereda mide 43px con `height:34px` puesto: en una tabla, `height` es un **mínimo**, y el contenido la empuja. Medido en el navegador, no leído. Con 18px de interlínea y 8 de relleno arriba y abajo, la fila mide los 34 que tiene que medir. */ .tabla-datos td{ height:34px;padding:8px 12px;line-height:18px;vertical-align:middle; color:var(--token-ink-3); border-bottom:1px solid var(--token-line-hair); } .tabla-datos tbody tr:last-child td{border-bottom:0} .tabla-datos th.num,.tabla-datos td.num{text-align:right} .tabla-datos a{color:var(--token-ink-2);text-decoration:none} @media (hover:hover){ .tabla-datos tbody tr:hover td{background:var(--token-fill-faint)} .tabla-datos a:hover{color:var(--token-accent)} } /* Una sola opacidad para «esto está apagado», donde había seis (.45 .5 .55 .62 .68). Seis grises distintos para el mismo estado hacen creer que significan seis cosas. */ .fila-inactiva td{color:var(--token-muted-2)} .fila-inactiva a{color:var(--token-muted-2)} /* ── 6 · La pastilla de estado ─────────────────────────────────────────────── */ /* Cinco estados y cinco colores. No hay un sexto: si un estado no cabe en éstos, el estado está mal definido y hay que arreglar el estado, no añadir un color. listo · accent — publicado, activo, conectado, guardado, enviado cola · boxoffice — encolado, pendiente, sin enriquecer error · rt — fallido, rechazado, caducado por error inactivo · muted-2 — borrador, apagado, archivado, vacío proceso · budget — informativo, en curso El tinte y el borde salen del **mismo** color con `color-mix`, así que la pastilla se define en una regla y las cinco variantes son una línea cada una. Sin `color-mix` harían falta diez tokens nuevos para no escribir un hex, y el encargo dice que no se inventan tokens. Lo que sale de aquí: `imdb` ya no significa «pendiente». Ese amarillo es de IMDb y de nada más. */ .pastilla{ display:inline-flex;align-items:center;justify-content:center; min-width:84px;padding:3px 8px; font-family:var(--token-font-mono);font-size:10px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;white-space:nowrap; border-radius:var(--token-radius); color:var(--pastilla,var(--token-muted)); background:color-mix(in srgb,var(--pastilla,var(--token-muted)) 9%,transparent); border:1px solid color-mix(in srgb,var(--pastilla,var(--token-muted)) 30%,transparent); } .pastilla-listo{--pastilla:var(--token-accent)} .pastilla-cola{--pastilla:var(--token-boxoffice)} .pastilla-error{--pastilla:var(--token-rt)} .pastilla-inactivo{--pastilla:var(--token-muted-2)} .pastilla-proceso{--pastilla:var(--token-budget)} /* ── 7 · La tarjeta de cifra ───────────────────────────────────────────────── */ /* Dieciocho maneras de pintar «número grande con rótulo», ocho de ellas llamadas literalmente `Cifra`, y el rótulo arriba en unas y abajo en otras. Aquí el rótulo va **arriba**: se lee «películas: 612», que es el orden en que se pregunta. Y el número va en monoespaciada, no en la de titulares, porque en el panel una cifra existe para compararse con la de al lado y con la de ayer — para eso tiene que alinearse en columna. La rejilla se separa con `gap:1px` sobre el fondo del borde: un filete entre celdas sin dibujar ocho bordes que se suman de dos en dos. */ .rejilla-cifras{ display:grid;gap:1px; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); background:var(--token-line-hair); border:1px solid var(--token-line-hair); } .cifra{display:block;padding:14px 16px;background:var(--token-bg-panel);color:inherit;text-decoration:none} .cifra-rotulo{ display:block;margin-bottom:8px; font-family:var(--token-font-mono);font-size:10px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--token-muted-label); } .cifra-numero{ display:block;line-height:1; font-family:var(--token-font-mono);font-size:26px;font-weight:600; font-variant-numeric:tabular-nums;color:var(--token-ink-hi); } .cifra-pie{display:block;margin-top:7px;font-size:12px;color:var(--token-muted)} @media (hover:hover){ a.cifra:hover{background:var(--token-fill-soft)} a.cifra:hover .cifra-numero{color:var(--token-accent)} } /* ── 8 · Gráficas ──────────────────────────────────────────────────────────── */ /* Sin librería (mandamiento 1) y sin SVG: son cajas con un ancho o un alto en porcentaje. Ese porcentaje es el ÚNICO estilo en línea legítimo de una gráfica, porque es el dato. El color no: el color va aquí, o el día que cambie el acento habrá barras cian por todo el panel. */ .barra{height:6px;background:var(--token-fill-soft);overflow:hidden} .barra-relleno{height:100%;background:var(--token-accent)} .barra-relleno-cola{background:var(--token-boxoffice)} .barra-relleno-error{background:var(--token-rt)} .barra-relleno-proceso{background:var(--token-budget)} .columnas{display:flex;align-items:flex-end;gap:2px;height:88px} .columna{flex:1 1 0;min-width:2px;background:var(--token-fill-soft);position:relative} .columna-relleno{position:absolute;left:0;right:0;bottom:0;background:var(--token-accent)} .eje{ display:flex;justify-content:space-between;margin-top:7px; font-family:var(--token-font-mono);font-size:9px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--token-muted-2); } /* ── 9 · El estado vacío ───────────────────────────────────────────────────── */ /* Ocho formas y cuarenta y una apariciones, y **ninguna ofrecía la acción que lo resuelve**: te decía que no hay nada y te dejaba ahí. Un vacío es el mejor sitio del panel para poner el botón, porque es exactamente el momento en que hace falta. */ .vacio{ display:grid;justify-items:start;gap:9px; padding:24px 20px; border:1px dashed var(--token-line);border-radius:var(--token-radius); background:var(--token-fill-faint); } .vacio-titulo{ font-family:var(--token-font-heading);font-size:15px;font-weight:700; letter-spacing:-.01em;color:var(--token-ink-4); } .vacio-texto{font-size:13px;color:var(--token-muted);max-width:58ch} /* ── 10 · Avisos ───────────────────────────────────────────────────────────── */ /* Mismo mecanismo que las pastillas y por el mismo motivo: un color, y de él salen el borde y el velo. Los tonos son los mismos cinco estados, con otros nombres porque un aviso se lee como una frase y una pastilla como una etiqueta. */ .aviso{ padding:11px 13px;margin-bottom:18px;font-size:13px; border-radius:var(--token-radius); color:var(--token-ink-2); background:color-mix(in srgb,var(--aviso,var(--token-muted)) 7%,transparent); border:1px solid color-mix(in srgb,var(--aviso,var(--token-muted)) 34%,transparent); } .aviso-ok{--aviso:var(--token-accent)} .aviso-error{--aviso:var(--token-rt)} .aviso-atencion{--aviso:var(--token-boxoffice)} .aviso-info{--aviso:var(--token-budget)} .aviso b{color:var(--token-ink);font-weight:600} /* ── 11 y 12 · La cuenta y el anunciante ───────────────────────────────────── */ /* Son públicas, así que aquí NO entra ningún color de estado: en el sitio, el cian sigue queriendo decir «esto es mío y esto se pulsa», y un usuario no tiene por qué aprender que el dorado significa «en cola». Lo que sí comparten con el panel es el esqueleto —cabecera, pestañas, cifras— porque son pantallas de gestión y se leen igual. Las pestañas usan `.opcion`, que ya existe y ya responde al ratón. `Pestana` estaba escrito dos veces, con dos firmas y dos colores de activo. */ .cuenta-cabecera{ display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap; padding-bottom:16px;margin-bottom:24px; border-bottom:1px solid var(--token-line-hair); } .cuenta-pestanas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px} /* Las cifras de una pantalla pública: el número en la de titulares y no en monoespaciada. Aquí una cifra es un titular —«llevas 213 de las 1,000»— y no algo que se compare en columna. Es la misma información que en el panel y se dibuja distinto a propósito. */ .cuenta-cifras{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .cuenta-cifra{border:1px solid var(--token-line-hair);padding:16px 18px;background:var(--token-bg-card)} .cuenta-cifra-numero{ display:block;font-family:var(--token-font-heading);font-size:30px;font-weight:800; line-height:1;letter-spacing:-.03em;color:var(--token-ink-hi);font-variant-numeric:tabular-nums; } .cuenta-cifra-rotulo{ display:block;margin-top:9px; font-family:var(--token-font-mono);font-size:10px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--token-muted-label); } /* Sólo para lectores de pantalla. */ .solo-lectores{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } /* Quien pide menos movimiento, recibe menos movimiento. No es opcional. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } } /* ── Motor de efectos ───────────────────────────────────────────────────────── Las capas fijas van por encima de todo y NO capturan el ratón. El orden de z es el del prototipo: viñeta 89, scanlines 90, grano 91. */ .fx-capa{position:fixed;inset:0;pointer-events:none;will-change:opacity} /* El ancho y el alto explícitos NO sobran, y su ausencia tuvo el grano roto desde que se escribió. `inset:0` estira un

porque su tamaño no está definido de antemano; un

Universidad de Guadalajara

Se cruza con