/* Capa del producto. Se carga después de Code4you UI v1.1 (copia literal, no se edita).
   La Semilla sólo trae lo que necesitan sus pantallas base: Inicio, Usuarios y Perfiles.
   Las clases propias del producto usan el prefijo `app-`. */

/* Code4you UI no tiene una regla global para [hidden] y varios componentes declaran
   `display`, que gana al atributo. Acotada al administrador; el login ya la trae en
   login.css. Ver knowledge/ui-producto.md → Excepciones locales. */
body.c4y-admin [hidden]{display:none!important}

/* =====================================================================
   Tema CMO · excepción R3 CMO-05 (knowledge/decisiones-tecnicas.md)
   Sólo sustituye el acento ámbar de Code4you UI por los colores institucionales
   del Colegio (cmo/colegiocmo/CLAUDE.md → Paleta CMO). El shell grafito, la
   tipografía, el espaciado y los componentes no cambian.
   Contrastes WCAG medidos en knowledge/ui-producto.md → Tema CMO.
   ===================================================================== */
:root{
  --c4y-accent:#0ea5e9;                    /* accent CMO sobre grafito (6.8:1) */
  --c4y-accent-hover:#38bdf8;
  --c4y-accent-border:#0284c7;
  --c4y-accent-ink:#0f172a;                /* dark CMO sobre el acento (6.4:1) */
  --c4y-accent-soft:rgba(14,165,233,.12);
  --c4y-accent-line:rgba(14,165,233,.55);
  --c4y-accent-ink-light:#3d6491;          /* primary CMO sobre claro (6.1:1) */
  --c4y-accent-ink-light-2:#2a4570;        /* primary dark: texto pequeño sobre claro (9.6:1) */
  --c4y-nav-active:rgba(14,165,233,.10);
  --c4y-app-selected:#eef4fb;              /* soft CMO */
  --c4y-app-accent-soft:#eef4fb;
}
/* Code4you UI v1.1 fija algunos bordes ámbar sin token; se reemplazan aquí. */
.c4y-btn--primary:hover{border-color:var(--c4y-accent-border)}
.c4y-check[aria-checked="true"],.c4y-check[data-checked="true"]{border-color:var(--c4y-accent-border)}
.c4y-filter[aria-pressed="true"],.c4y-filter[data-active="true"]{border-color:var(--c4y-accent-border)}
.c4y-switch input:checked{border-color:var(--c4y-accent-border)}

/* ---------- identidad (Core\Brand) ---------- */
/* El logotipo sustituye a la marca de texto de shell.css (rombo + «code4you») y al
   isotipo + texto del login. Sólo se fija la altura: la proporción la da el archivo.
   Alturas ≥ mínimos de la guía de marca (logotipo 24 px, isotipo 32 px). */
.app-marca::before{content:none}
.c4y-shell .app-marca__logo{display:block;width:auto;max-width:100%;height:24px;object-fit:contain;object-position:left center}
.c4y-shell .app-marca__isotipo{display:none;width:auto;height:32px}
/* rail de Code4you UI (600–1023): el isotipo sustituye al logotipo si existe */
@media (min-width:600px) and (max-width:1023px){
  .c4y-shell .app-marca__isotipo{display:block}
  .c4y-shell .app-marca__isotipo + .app-marca__logo{display:none}
}
.c4y-brand .app-marca__logo{width:auto;max-width:100%;height:26px;object-fit:contain;object-position:left center}
/* Sello oficial del CMO (CMO-03): es vertical, así que necesita más altura que el
   logotipo horizontal de la Semilla. Sidebar 48 px, rail 36 px, login 96 px. */
.c4y-shell .app-marca__logo{height:48px}
.c4y-shell .app-marca__isotipo{height:36px}

/* ---------- Inicio: índice de pantallas ---------- */
.app-home{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));align-items:start;gap:22px var(--c4y-gutter);padding:0 var(--c4y-gutter) 28px}
.app-home .c4y-list{margin-top:10px}
.app-home .c4y-list__item{background:var(--c4y-app-panel);color:var(--c4y-app-ink);font-weight:600}
.app-home .c4y-list__item:hover{background:var(--c4y-app-hover)}
.app-home .c4y-list__item .c4y-micro{color:var(--c4y-app-ink-4)}
.app-home .c4y-list__item:focus-visible{outline-offset:-2px;border-radius:0}

/* ---------- listados del administrador ---------- */
.app-crud{flex:1;min-height:0;display:flex;flex-direction:column}
.app-crud .c4y-page{flex-wrap:wrap;row-gap:12px}
.app-crud .c4y-thead,.app-crud .c4y-row{padding:0 6px 0 18px}
/* la fila no abre nada: las acciones están en su menú */
.app-crud .c4y-row{cursor:default}
.app-pager-movil{display:none}

/* Usuarios: Usuario, Perfil y acciones antes que Correo y Celular. */
.app-usuarios{--c4y-cols:minmax(0,1.2fr) minmax(0,1.3fr) 132px minmax(0,.9fr) 52px}
@media (max-width:1599px){.c4y-app[data-drawer="open"] .app-usuarios{--c4y-cols:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,.9fr) 52px}}
@media (min-width:1024px) and (max-width:1259px){
  .c4y-app[data-drawer="open"] .app-usuarios{--c4y-cols:minmax(0,1.3fr) minmax(0,1fr) 52px}
  .c4y-app[data-drawer="open"] .app-col--correo{display:none}
}
@media (max-width:1023px){.app-usuarios,.c4y-app[data-drawer="open"] .app-usuarios{--c4y-cols:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,.9fr) 48px}}

/* Perfiles: Perfil, Usuarios, Estado y acciones antes que Descripción. */
.app-perfiles{--c4y-cols:minmax(0,1fr) minmax(0,1.6fr) 96px 120px 52px}
@media (max-width:1599px){.c4y-app[data-drawer="open"] .app-perfiles{--c4y-cols:minmax(0,1fr) 96px 120px 52px}}
/* 1024–1259 con el drawer abierto: sidebar y drawer tienen ancho fijo y el área operativa
   queda en ~320px; también cede Usuarios. */
@media (min-width:1024px) and (max-width:1259px){
  .c4y-app[data-drawer="open"] .app-perfiles{--c4y-cols:minmax(0,1fr) 112px 52px}
  .c4y-app[data-drawer="open"] .app-col--usuarios{display:none}
}
@media (max-width:1023px){.app-perfiles,.c4y-app[data-drawer="open"] .app-perfiles{--c4y-cols:minmax(0,1fr) 88px 112px 48px}}

/* ---------- tablas de contenido: Congresos, Noticias y Eventos ---------- */
/* Las columnas se reparten según el ancho REAL de la tabla (container query), no según el
   viewport: así cuentan por igual el sidebar, el rail de tablet y el drawer abierto. Cada
   módulo declara sus columnas de menor a mayor ancho, por prioridad; la de acciones tiene
   ancho fijo y nunca se oculta.
   Estas tablas no usan .c4y-col--secondary: responsive.css la oculta por viewport y la
   rejilla quedaría desalineada respecto a --c4y-cols. */
.app-tabla{container:app-tabla / inline-size}
.app-tabla .c4y-thead,.app-tabla .c4y-row{column-gap:16px;padding:0 8px 0 18px}
.app-tabla .c4y-cell--primary{padding-right:0}
/* .c4y-truncate necesita una caja de bloque: en un <span> en línea el texto no se recorta
   y se encima sobre la columna siguiente. */
.app-tabla .c4y-cell > .c4y-truncate{display:block}
.app-tabla .c4y-status{max-width:100%;min-width:0}
.app-tabla .c4y-status__text{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Acciones: columna propia de 44px (área táctil), botón centrado y siempre visible. */
.app-tabla .app-col--acciones{display:flex;justify-content:center;align-items:center}

/* Eventos (CMO-14): Evento > Fecha del evento > Publicación > Lugar. */
.app-eventos .c4y-thead,.app-eventos .c4y-row{--c4y-cols:minmax(0,1fr) 44px}
.app-eventos .app-col--fecha,.app-eventos .app-col--publicacion,.app-eventos .app-col--lugar{display:none}
@container app-tabla (min-width:420px){
  .app-eventos .c4y-thead,.app-eventos .c4y-row{--c4y-cols:minmax(0,1fr) 200px 44px}
  .app-eventos .app-col--fecha{display:flex}
}
@container app-tabla (min-width:700px){
  .app-eventos .c4y-thead,.app-eventos .c4y-row{--c4y-cols:minmax(0,1fr) 200px 112px 44px}
  .app-eventos .app-col--publicacion{display:flex}
}
@container app-tabla (min-width:880px){
  .app-eventos .c4y-thead,.app-eventos .c4y-row{--c4y-cols:minmax(0,1.6fr) minmax(200px,1.2fr) 112px minmax(0,1fr) 44px}
  .app-eventos .app-col--lugar{display:block}
}

/* Noticias (CMO-11): Noticia > Estado > Publicación > Actualizada. */
.app-noticias .c4y-thead,.app-noticias .c4y-row{--c4y-cols:minmax(0,1fr) 44px}
.app-noticias .app-col--estado,.app-noticias .app-col--fecha,.app-noticias .app-col--actualizada{display:none}
@container app-tabla (min-width:420px){
  .app-noticias .c4y-thead,.app-noticias .c4y-row{--c4y-cols:minmax(0,1fr) 124px 44px}
  .app-noticias .app-col--estado{display:flex}
}
@container app-tabla (min-width:700px){
  .app-noticias .c4y-thead,.app-noticias .c4y-row{--c4y-cols:minmax(0,1fr) 124px 150px 44px}
  .app-noticias .app-col--fecha{display:flex}
}
@container app-tabla (min-width:880px){
  .app-noticias .c4y-thead,.app-noticias .c4y-row{--c4y-cols:minmax(0,2fr) 124px minmax(150px,1fr) minmax(150px,1fr) 44px}
  .app-noticias .app-col--actualizada{display:flex}
}

/* Congresos (CMO-10): Congreso > Estado > Fechas oficiales > Vigencia en la app. */
.app-congresos .c4y-thead,.app-congresos .c4y-row{--c4y-cols:minmax(0,1fr) 44px}
.app-congresos .app-col--estado,.app-congresos .app-col--fechas,.app-congresos .app-col--vigencia{display:none}
@container app-tabla (min-width:460px){
  .app-congresos .c4y-thead,.app-congresos .c4y-row{--c4y-cols:minmax(0,1fr) 188px 44px}
  .app-congresos .app-col--estado{display:flex}
}
@container app-tabla (min-width:720px){
  .app-congresos .c4y-thead,.app-congresos .c4y-row{--c4y-cols:minmax(0,1fr) 180px 188px 44px}
  .app-congresos .app-col--fechas{display:flex}
}
@container app-tabla (min-width:940px){
  .app-congresos .c4y-thead,.app-congresos .c4y-row{--c4y-cols:minmax(0,1.6fr) minmax(180px,1fr) minmax(0,1.3fr) 188px 44px}
  .app-congresos .app-col--vigencia{display:flex}
}

/* Estado de cada Congreso: la forma de la marca y el texto lo distinguen; el color refuerza. */
.app-estado--vigente{color:var(--c4y-ok-ink)}
.app-estado--pendiente,.app-estado--seleccionable{color:var(--c4y-accent-ink-light)}
.app-estado--terminada_sel,.app-estado--invalido{color:var(--c4y-danger-ink)}
.app-estado--sin_vigencia,.app-estado--terminada,.app-estado--baja{color:var(--c4y-app-ink-3)}
.app-fila--baja .c4y-cell__title{color:var(--c4y-app-ink-3)}
.c4y-record__foot .app-estado{margin-top:2px}

/* ---------- Noticias (CMO-11) ---------- */
.app-celda-noticia{display:flex;align-items:center;gap:12px}
.app-celda-noticia__texto{display:flex;flex-direction:column;min-width:0}
.app-miniatura{flex:none;width:56px;height:32px;border-radius:var(--c4y-r-xs);object-fit:cover;background:var(--c4y-app-hover)}
.app-miniatura--vacia{display:grid;place-items:center;color:var(--c4y-app-ink-4)}

.app-estado--publicada{color:var(--c4y-ok-ink)}
.app-estado--programada{color:var(--c4y-accent-ink-light)}
.app-estado--borrador{color:var(--c4y-app-ink-3)}

/* ---------- Eventos (CMO-14) ---------- */
.app-celda-fecha{flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.app-celda-fecha > *{max-width:100%}
.app-situacion{font-size:var(--c4y-fs-meta);font-weight:600;color:var(--c4y-app-ink-3)}
.app-situacion--proximo{color:var(--c4y-accent-ink-light)}
.app-situacion--en_curso{color:var(--c4y-ok-ink)}
.app-estado--publicado{color:var(--c4y-ok-ink)}
.app-estado--programado{color:var(--c4y-accent-ink-light)}
.app-filtro-select .c4y-select{min-width:170px}
@media (max-width:767px){.app-filtro-select,.app-filtro-select .c4y-select{width:100%}}

.app-filtros{display:flex;flex-wrap:wrap;gap:6px}
/* Barra de herramientas: si el ancho no alcanza (drawer abierto, tablet), los filtros bajan
   a otra línea en vez de aplastar el buscador y su contador. */
.app-crud .c4y-toolbar__row{flex-wrap:wrap}
.app-crud .c4y-search{flex:1 1 280px}
.app-crud .c4y-search__count{flex:none;white-space:nowrap}
@media (max-width:767px){.app-filtros{width:100%}}

/* Contenido: texto largo sin formato, legible al redactar. */
.app-contenido{min-height:220px}

/* Portada: vista previa en 16:9, como la recorta la app. */
.app-portada{display:grid;place-items:center;aspect-ratio:16/9;max-width:420px;overflow:hidden;border:1px dashed var(--c4y-app-line-strong);border-radius:var(--c4y-r-md);background:var(--c4y-app-hover)}
.app-portada[data-estado="con-imagen"]{border-style:solid}
.app-portada__img{width:100%;height:100%;object-fit:cover}
.app-portada__vacia{margin:0;font-size:var(--c4y-fs-meta);color:var(--c4y-app-ink-4)}
/* position:relative ancla el input de archivo (.c4y-sr, absoluto) dentro del cuerpo con
   scroll del drawer; si no, se posiciona respecto al drawer, escapa del recorte y alarga
   la página: al desplazarla, el sidebar y el drawer se suben y queda un hueco gris. */
.app-portada__acciones{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.app-portada__acciones label.c4y-btn{cursor:pointer}
.app-portada__acciones:has(input:focus-visible) label.c4y-btn{outline:2px solid var(--c4y-focus);outline-offset:1px}

/* Modo de APP CMO (barra sobre la tabla). */
.app-modo{align-items:center;gap:12px;margin:0 var(--c4y-gutter) 16px}
.app-modo__texto{flex:1;min-width:0}
.app-modo__rotulo{margin:0 0 3px}
.app-modo .c4y-notice__title{margin:0}
.app-modo__detalle{margin:2px 0 0;color:var(--c4y-app-ink-2)}
.app-modo__detalle:empty{display:none}
.app-modo__acciones:empty{display:none}
.app-modo--vigente{border-color:var(--c4y-ok-border);background:var(--c4y-ok-bg)}
.app-modo--vigente .c4y-icon{color:var(--c4y-ok-ink)}
.app-modo--terminada,.app-modo--invalido{border-color:var(--c4y-danger-border);background:var(--c4y-danger-bg)}
.app-modo--terminada .c4y-icon,.app-modo--invalido .c4y-icon{color:var(--c4y-danger-ink)}
@media (max-width:599px){
  .app-modo{flex-wrap:wrap;margin:0 var(--c4y-gutter-mobile) 14px}
  .app-modo__acciones{width:100%}
  .app-modo__acciones .c4y-btn{width:100%;justify-content:center;min-height:var(--c4y-touch)}
}

/* ---------- Usuarios: contraseña temporal ---------- */
.app-temporal{display:flex;gap:8px}
.app-temporal .c4y-input{flex:1;min-width:0;letter-spacing:.06em}

/* ---------- Perfiles: matriz de permisos ---------- */
/* Una fila por pantalla con sus cuatro permisos como casillas con texto. */
.app-matriz{display:flex;flex-direction:column}
.app-matriz__grupo{padding:14px 0 4px}
.app-matriz__modulo{display:flex;flex-direction:column;gap:9px;min-width:0;margin:0;padding:12px 0;border:0;border-bottom:1px solid var(--c4y-app-line-faint)}
.app-matriz__modulo:last-child{border-bottom:0}
.app-matriz__titulo{padding:0;font-size:var(--c4y-fs-control);font-weight:600;color:var(--c4y-app-ink)}
.app-matriz__permisos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media (min-width:1440px){.app-matriz__permisos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.app-permiso{display:flex;align-items:center;gap:7px;min-width:0;height:32px;padding:0 9px;border:1px solid var(--c4y-app-line-strong);border-radius:var(--c4y-r-sm);background:var(--c4y-app-panel);font-size:var(--c4y-fs-meta);font-weight:600;color:#3a3733;cursor:pointer}
.app-permiso input{flex:none;width:14px;height:14px;margin:0;accent-color:var(--c4y-accent-ink-light)}
.app-permiso:has(input:checked){border-color:var(--c4y-accent-border);background:var(--c4y-app-accent-soft);color:var(--c4y-accent-ink-light-2)}
.app-permiso:has(input:focus-visible){outline:2px solid var(--c4y-focus);outline-offset:1px}

/* ---------- login sin zona visual ---------- */
/* login.css v1.1 da por hecho la zona visual; sin diagrama el panel se centra. */
.app-auth--solo{justify-content:center}
.app-auth--solo .c4y-auth__panel{border-left:1px solid var(--c4y-border)}

/* ---------- login institucional (CMO-06) ---------- */
/* Zona de acceso: sello, producto e institución sobre el formulario. Sólo cuando
   `brand.institucion` tiene valor (login.php añade .app-marca-login). */
.c4y-brand.app-marca-login{align-items:center;gap:18px}
.c4y-brand.app-marca-login .app-marca__logo{width:auto;height:96px;flex:none}
.c4y-brand .app-marca__texto{display:flex;flex-direction:column;gap:6px;min-width:0;font:inherit;letter-spacing:normal;color:inherit}
.c4y-brand .app-marca__texto b{font:700 20px/1.1 var(--c4y-font);letter-spacing:-.01em;color:#f4f2ee}
.c4y-brand .app-marca__texto span{font:500 13px/1.4 var(--c4y-font);letter-spacing:0;color:var(--c4y-ink-2)}

/* Zona institucional: título, descripción, diagrama y firma en flujo normal (la
   variante de login.css posiciona caption, gráfico y pie en bandas absolutas). La
   activa una entrada de diagramas.php con `descripcion`. */
.app-stage{
  display:flex;flex-direction:column;gap:32px;
  padding:clamp(36px,6vh,64px) clamp(32px,5vw,88px) 34px;
  background:
    radial-gradient(80% 60% at 88% 8%,rgba(61,100,145,.30) 0%,transparent 62%),
    radial-gradient(60% 50% at 6% 96%,rgba(14,165,233,.07) 0%,transparent 60%),
    var(--c4y-stage);
}
.app-stage__cuerpo{display:flex;flex-direction:column;gap:clamp(24px,4vh,40px);width:100%;max-width:600px;margin:auto 0}
.app-stage__head{display:flex;flex-direction:column;gap:12px}
.app-stage__eyebrow{margin:0;font:500 11px/1.5 var(--c4y-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--c4y-accent)}
.app-stage__titulo{margin:0;font:600 clamp(24px,2.3vw,32px)/1.15 var(--c4y-font);letter-spacing:-.02em;color:#f4f2ee}
.app-stage__texto{margin:0;max-width:52ch;font:400 15px/1.6 var(--c4y-font);color:var(--c4y-ink-2)}
.app-stage__diagram svg{display:block;width:100%;height:auto;max-height:50vh}
.app-stage__foot{margin:0;display:flex;align-items:center;gap:8px;font:400 12px/1 var(--c4y-font);color:var(--c4y-ink-3)}
.app-stage__foot::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c4y-accent)}

@media (min-width:1024px){
  /* la firma vive en la zona institucional; en una columna vuelve al pie del panel */
  .app-auth--informativa .c4y-auth__foot .c4y-by{display:none}
}
@media (max-width:1023px){
  /* una columna: la zona institucional se oculta como en login.css (.app-stage la
     declara flex); el formulario va primero y el diagrama compacto lo explica debajo */
  .app-stage{display:none}
  .app-auth--informativa .c4y-compact{order:3;border-bottom:0;border-top:1px solid var(--c4y-border);padding:22px 0 0}
  .app-auth--informativa .c4y-auth__foot{order:4}
  .app-auth--informativa .c4y-compact__svg{height:auto;padding:18px 14px 14px}
}
@media (max-width:640px){
  .c4y-brand.app-marca-login{gap:14px}
  .c4y-brand.app-marca-login .app-marca__logo{height:72px}
  .c4y-brand .app-marca__texto b{font-size:18px}
  .app-auth--informativa .c4y-compact{display:none}   /* en móvil manda el formulario */
}

/* ---------- vista pública mínima ---------- */
.app-publico{min-height:100vh;display:flex;flex-direction:column}

@media (max-width:599px){
  .app-home{padding-top:var(--c4y-gutter)}
  .app-pager-movil{display:flex;margin:0 var(--c4y-gutter-mobile) 16px;border:1px solid var(--c4y-app-line);border-radius:var(--c4y-r-md)}
  .app-permiso{height:var(--c4y-touch)}
}