/*
 * Gobernanza, con la identidad de Kometa (Manual de marca 2023).
 *
 * Decisiones:
 * - Color: azul Kometa #1560BC es el color de la herramienta (títulos, enlaces, acciones).
 *   El azul claro #29AAE1 solo va en el filete bajo los títulos: como texto no llega a 3:1.
 * - Naranja, magenta y verde de la paleta se usan solo como estados (aviso, crítico, correcto),
 *   en tonos oscurecidos para que el texto pase AA. El magenta es el único acento: marca lo
 *   que hay que atender (contadores de alertas, alertas críticas).
 * - Tipografía: National Park para títulos (tipografía principal del manual) y Century Gothic
 *   para el texto (secundaria); si no está instalada, Questrial, de la misma familia geométrica.
 * - Motivo de identidad: el encabezado del manual (título en mayúsculas, filete azul claro,
 *   subtítulo azul) en cada página, y la franja de cinco colores arriba de todo.
 * - Tema claro fijo: la versión principal del isologo es sobre blanco y la herramienta se usa
 *   junto a Moodle, que también es claro.
 * - Movimiento: solo transiciones de hover y foco.
 */

:root {
    --blue: #1560bc;
    --blue-strong: #0f4c96;
    --blue-soft: #e8f1fb;
    --sky: #29aae1;
    --sky-text: #1a6fa0;
    --magenta: #d3145a;
    --magenta-text: #a8104a;
    --magenta-soft: #fce8ef;
    --orange: #f05a24;
    --orange-text: #9a3a0c;
    --orange-soft: #feede5;
    --green: #8bc53f;
    --green-text: #3e6b12;
    --green-soft: #eef7e4;

    --bg: #f4f7fb;
    --surface: #ffffff;
    --text: #1c2733;
    --muted: #55606e;
    --border: #d5dde8;
    --border-strong: #7a8799; /* Borde de campos: 3.65:1 sobre blanco (contraste no textual). */

    --radius: 6px;
    --radius-small: 4px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 40px;

    --font-title: "National Park", "Century Gothic", "Questrial", sans-serif;
    --font-text: "Century Gothic", "Questrial", "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    font-family: var(--font-text);
    font-size: 15px;
    color: var(--text);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); line-height: 1.5; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Foco visible en todo lo interactivo: azul Kometa, 6.1:1 sobre blanco. */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.skip { position: absolute; left: var(--space-4); top: -60px; background: var(--blue); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius); z-index: 10; }
.skip:focus { top: var(--space-2); }

h1, h2, h3 { font-family: var(--font-title); color: var(--blue); line-height: 1.2; }
h2 { font-size: 1.2rem; font-weight: 700; margin: var(--space-6) 0 var(--space-3); }
h3 { font-size: 1rem; font-weight: 700; margin: 0 0 var(--space-2); }
code { font-family: var(--font-mono); background: var(--blue-soft); color: var(--text); padding: .1em .35em; border-radius: var(--radius-small); font-size: .88em; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }

/* Franja de cinco colores: la segmentación de la paleta del manual (pág. 11-12). */
.brandbar { display: grid; grid-template-columns: repeat(5, 1fr); height: 4px; }
.brandbar span:nth-child(1) { background: var(--blue); }
.brandbar span:nth-child(2) { background: var(--sky); }
.brandbar span:nth-child(3) { background: var(--green); }
.brandbar span:nth-child(4) { background: var(--orange); }
.brandbar span:nth-child(5) { background: var(--magenta); }

/* Barra superior: blanca, porque la versión principal del isologo va sobre blanco. */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar .inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-5); min-height: 60px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--blue); }
.brand:hover { text-decoration: none; }
.brand img { height: 22px; width: auto; display: block; }
.brand .product { font-family: var(--font-title); font-weight: 600; font-size: 1.05rem; padding-left: var(--space-3); border-left: 2px solid var(--sky); }
.topbar nav { display: flex; gap: var(--space-1); flex: 1; overflow-x: auto; align-self: stretch; }
.topbar nav a { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); min-height: 44px; color: var(--text); white-space: nowrap; border-bottom: 3px solid transparent; }
.topbar nav a:hover { color: var(--blue); text-decoration: none; background: var(--blue-soft); }
/* El subrayado marca la sección actual (estado real, no decoración). */
.topbar nav a.active { color: var(--blue); font-weight: 700; border-bottom-color: var(--blue); }
.topbar .account { display: flex; align-items: center; gap: var(--space-3); }
.topbar .account form { margin: 0; }

/* Contadores: cuántas cosas esperan en cada bandeja. El de alertas es el acento magenta. */
.count { display: inline-block; min-width: 1.6em; padding: 0 .45em; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.6; text-align: center; background: var(--blue-soft); color: var(--blue); }
.count.attention { background: var(--magenta); color: #fff; }

main { max-width: 1240px; margin: 0 auto; padding: var(--space-5) var(--space-4) 72px; }

/* Encabezado de página, como en el manual: título, filete azul claro y subtítulo azul. */
.page-head { margin-bottom: var(--space-5); }
.page-head .back { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; }
.page-head h1 { display: inline-block; margin: 0; padding-bottom: var(--space-2); border-bottom: 2px solid var(--sky); font-size: 2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
/* Los nombres de cursos y plataformas no van en mayúsculas: son datos y se leen mejor así. */
.page-head.entity h1 { text-transform: none; font-size: 1.7rem; }
.page-head .lead { margin: var(--space-2) 0 0; color: var(--sky-text); max-width: 75ch; }
.page-head .tag { vertical-align: middle; margin-left: var(--space-2); }

.flash, .errors { border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-weight: 600; }
.flash { background: var(--green-soft); color: var(--green-text); border: 1px solid #b9d99a; }
.errors { background: var(--magenta-soft); color: var(--magenta-text); border: 1px solid #f1b3c8; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); }

/* Datos del inventario como una sola línea de hechos, no como tarjetas de tablero. */
.inventory-line { margin: 0 0 var(--space-3); color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-4); padding: 0; }
.facts div { display: flex; flex-direction: column; }
.facts dt { font-size: .82rem; color: var(--muted); order: 2; }
.facts dd { margin: 0; font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* Resumen de alertas por tipo: lo primero que se atiende en una plataforma. */
.alert-summary { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.alert-summary a { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.alert-summary a:hover { border-color: var(--blue); text-decoration: none; }
.alert-summary strong { font-family: var(--font-title); font-size: 1.35rem; font-variant-numeric: tabular-nums; }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-family: var(--font-title); font-size: .85rem; font-weight: 600; color: var(--blue); background: var(--blue-soft); white-space: nowrap; }
tbody tr:hover td { background: #f8fafd; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.empty { color: var(--muted); padding: var(--space-5) var(--space-4); }
tr.deleted td { color: var(--muted); }
td a { font-weight: 600; }

/* Etiquetas de estado: siempre con texto, el color solo refuerza. */
.badge { display: inline-block; padding: .15em .55em; border-radius: var(--radius-small); font-size: .78rem; font-weight: 700; background: #edf0f4; color: var(--muted); white-space: nowrap; }
.badge.danger { background: var(--magenta-soft); color: var(--magenta-text); }
.badge.warn { background: var(--orange-soft); color: var(--orange-text); }
.badge.ok { background: var(--green-soft); color: var(--green-text); }
.badge.info { background: var(--blue-soft); color: var(--blue); }

form { margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-bottom: var(--space-4); }
label { display: block; font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: var(--space-1); }
label.check { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; min-height: 44px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea {
    font: inherit; min-height: 44px; padding: var(--space-2) 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-small); background: var(--surface); color: var(--text); width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: var(--blue); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blue); }
textarea { min-height: 80px; resize: vertical; }
.field { margin-bottom: var(--space-3); min-width: 180px; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.row > .field { flex: 1; }

button, .button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    font: inherit; font-weight: 700; min-height: 44px; padding: var(--space-2) 18px; border-radius: var(--radius);
    border: 1px solid var(--blue); background: var(--blue); color: #fff; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
button:hover, .button:hover { background: var(--blue-strong); border-color: var(--blue-strong); text-decoration: none; }
button.secondary, .button.secondary { background: var(--surface); color: var(--blue); }
button.secondary:hover, .button.secondary:hover { background: var(--blue-soft); }
button.link { background: none; border: 0; color: var(--blue); padding: 0 var(--space-2); font-weight: 600; }
button.link:hover { text-decoration: underline; background: none; }
button:disabled, .button[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.button[aria-disabled=true]:hover { background: var(--surface); }

/* La barra de acciones queda sobre la tabla al desplazarse: la sombra marca esa elevación. */
.sticky-actions { position: sticky; bottom: 0; background: var(--surface); border-top: 2px solid var(--blue); padding: var(--space-4); box-shadow: 0 -6px 16px rgba(28, 39, 51, .08); }
.sticky-actions .hint { margin-left: var(--space-3); }

.token { font-family: var(--font-mono); background: var(--text); color: #fff; padding: var(--space-3); border-radius: var(--radius-small); word-break: break-all; margin: var(--space-2) 0; }

/* Línea de tiempo: cada punto lleva el color del tipo de entrada, y el tipo también va escrito. */
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-1); border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 var(--space-5) var(--space-5); }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--border-strong); }
.timeline li.t-change_detected::before, .timeline li.t-course_created::before, .timeline li.t-course_deleted::before { border-color: var(--orange); }
.timeline li.t-rule_confirmed::before, .timeline li.t-rule_replaced::before, .timeline li.t-context::before { border-color: var(--blue); background: var(--blue); }
.timeline li.t-alert::before { border-color: var(--magenta); }
.timeline li.t-alert_resolved::before, .timeline li.t-alert_attended::before { border-color: var(--green); }
.timeline .when { font-size: .82rem; color: var(--muted); }
.timeline .what { font-weight: 700; }
.timeline .values { font-family: var(--font-mono); font-size: .88rem; margin-top: 2px; }
.timeline .meta { font-size: .85rem; color: var(--muted); margin-top: 2px; }

.rule-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.rule-item:first-child { padding-top: 0; }
.rule-item:last-of-type { border-bottom: 0; }
.alert-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.alert-item:first-child { padding-top: 0; }
.alert-item strong, .alert-item .small { display: block; margin-top: var(--space-1); }

details summary { cursor: pointer; color: var(--blue); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
details[open] summary { margin-bottom: var(--space-2); }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.two-col > section h2:first-child, .two-col > aside h2:first-child { margin-top: 0; }
@media (min-width: 960px) { .two-col { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

.pager { margin-top: var(--space-4); }
.pager nav { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Ingreso: el panel azul con el isologo en negativo, como las aplicaciones del manual (pág. 13). */
main.login-page { max-width: none; margin: 0; padding: 0; }
.login-page { min-height: calc(100vh - 4px); display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); }
.login-brand { background: var(--blue); color: #fff; padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); }
.login-brand img { width: min(260px, 70%); height: auto; }
.login-brand h1 { font-family: var(--font-title); color: #fff; font-size: 2rem; font-weight: 800; text-transform: uppercase; margin: 0; padding-bottom: var(--space-2); border-bottom: 2px solid var(--sky); align-self: flex-start; }
.login-brand p { margin: 0; max-width: 42ch; font-size: 1.05rem; }
.login-form { padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; justify-content: center; }
.login-form form { width: 100%; max-width: 380px; }
.login-form h2 { margin-top: 0; }
@media (min-width: 860px) {
    .login-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .login-brand { padding: 64px; }
    .login-form { padding: 64px; }
}

@media (max-width: 720px) {
    .topbar .inner { gap: var(--space-2) var(--space-4); padding-top: var(--space-2); }
    .topbar nav { order: 3; flex-basis: 100%; }
    .topbar .account { margin-left: auto; }
    .brand .product { display: none; }
    .page-head h1 { font-size: 1.55rem; }
    .page-head.entity h1 { font-size: 1.35rem; }
    .facts { gap: var(--space-3) var(--space-5); }
    .sticky-actions .hint { display: block; margin: var(--space-2) 0 0; }
}