/*
 * manuales.css — Las páginas de los manuales de CFM (/manuales/).
 *
 * Se cargan solo aquí, después del tema y de app.css, y no usan ningún color
 * ni ninguna letra que no venga de las variables del tema: así los manuales se
 * ven como el programa y cambian con él. Las separaciones salen de la escala
 * de seis peldaños de app.css (regla 1 de disenos/REGLAS-DE-PANTALLA.md).
 */

.manual-cuerpo {
    background: var(--color-bg);
    color: var(--color-text);
}

/* === La banda de arriba: la misma del panel, pero sin menú === */
.manual-banda {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: var(--espacio-4);
    height: var(--topbar-height);
    padding: 0 var(--espacio-5);
    background: var(--color-bg-topbar);
    border-bottom: 2px solid var(--color-primary);
}
.manual-banda__marca { display: flex; align-items: center; gap: var(--espacio-3); min-width: 0; text-decoration: none; }
.manual-banda__logo { height: 1.8rem; }
.manual-banda__que {
    font-family: var(--font-datos); font-size: .75rem; letter-spacing: .08em;
    color: var(--color-text-muted); white-space: nowrap;
}
/* Cinco manuales no caben en un móvil: la fila se desliza, como la del panel. */
.manual-banda__enlaces {
    margin-left: auto; display: flex; align-items: center; gap: var(--espacio-2);
    min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.manual-banda__enlaces::-webkit-scrollbar { display: none; }
.manual-banda__enlaces > * { flex-shrink: 0; }
.manual-banda__enlace {
    font-family: var(--font-cartel); font-weight: 600; font-size: .9rem;
    color: var(--color-text-sidebar); text-decoration: none;
    padding: var(--espacio-2) var(--espacio-3); border-radius: var(--border-radius);
}
.manual-banda__enlace:hover { background: var(--color-bg-sidebar-hover); color: var(--color-text); }
.manual-banda__enlace--activo { background: var(--color-text); color: var(--color-bg); }
.manual-banda__enlace--activo:hover { background: var(--color-text); color: var(--color-bg); }

/* === La caja de la portada y la de cada manual === */
.manual-marco {
    max-width: 1180px; margin: 0 auto;
    padding: var(--espacio-6) var(--espacio-5) var(--espacio-6);
    display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--espacio-6);
    align-items: start;
}
.manual-marco--solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }

/* === El índice de la izquierda, que sigue al desplazarse === */
.manual-indice {
    position: sticky; top: calc(var(--topbar-height) + var(--espacio-5));
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--espacio-4);
    max-height: calc(100vh - var(--topbar-height) - var(--espacio-6));
    overflow-y: auto;
}
.manual-indice__titulo {
    font-family: var(--font-datos); font-size: .7rem; letter-spacing: .1em;
    color: var(--color-text-muted); margin-bottom: var(--espacio-3);
}
.manual-indice__lista { list-style: none; display: flex; flex-direction: column; gap: var(--espacio-1); }
.manual-indice__enlace {
    display: flex; gap: var(--espacio-2); align-items: baseline;
    padding: var(--espacio-2) var(--espacio-2);
    border-radius: var(--border-radius);
    color: var(--color-text); text-decoration: none;
    font-size: .88rem; line-height: 1.3;
}
.manual-indice__enlace:hover { background: var(--color-bg); }
.manual-indice__numero {
    font-family: var(--font-datos); font-size: .78rem; color: var(--color-text-muted);
    flex: 0 0 1.4rem;
}

/* === El texto del manual === */
.manual-texto { max-width: 68ch; }

.manual-portadilla { margin-bottom: var(--espacio-6); }
.manual-portadilla__para {
    font-family: var(--font-datos); font-size: .72rem; letter-spacing: .12em;
    color: var(--color-primary-dark); margin-bottom: var(--espacio-2);
}
.manual-portadilla__titulo {
    font-family: var(--font-cartel); font-weight: 700; font-size: 2rem; line-height: 1.1;
    color: var(--color-text); margin-bottom: var(--espacio-3);
}
.manual-portadilla__entrada { font-size: 1.05rem; line-height: 1.65; color: var(--color-text); }
.manual-portadilla__entrada + .manual-portadilla__entrada { margin-top: var(--espacio-3); }

.manual-paso { margin-bottom: var(--espacio-6); scroll-margin-top: calc(var(--topbar-height) + var(--espacio-4)); }
.manual-paso__cabeza {
    display: flex; align-items: baseline; gap: var(--espacio-3);
    padding-bottom: var(--espacio-3); margin-bottom: var(--espacio-4);
    border-bottom: 2px solid var(--color-border);
}
.manual-paso__numero {
    font-family: var(--font-datos); font-size: 1.6rem; font-weight: 500;
    color: var(--color-primary); line-height: 1;
}
.manual-paso__titulo {
    font-family: var(--font-cartel); font-weight: 700; font-size: 1.35rem; line-height: 1.2;
    color: var(--color-text);
}
.manual-paso p { margin-bottom: var(--espacio-3); line-height: 1.65; }
.manual-paso ul, .manual-paso ol { margin: 0 0 var(--espacio-4) var(--espacio-5); }
.manual-paso li { margin-bottom: var(--espacio-2); line-height: 1.6; }
.manual-paso h3 {
    font-family: var(--font-cartel); font-weight: 600; font-size: 1.05rem;
    color: var(--color-text); margin: var(--espacio-5) 0 var(--espacio-3);
}
.manual-paso strong { font-weight: 600; }
.manual-paso a { color: var(--color-primary-dark); }

/* === La ruta de pantallas: dónde se hace cada cosa === */
.manual-ruta {
    display: inline-flex; flex-wrap: wrap; align-items: stretch;
    font-family: var(--font-datos); font-size: .8rem;
    background: var(--color-primary-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden; vertical-align: middle;
}
.manual-ruta__tramo { padding: var(--espacio-1) var(--espacio-3); color: var(--color-text); }
.manual-ruta__tramo + .manual-ruta__tramo { border-left: 1px solid var(--color-border); }
.manual-ruta__tramo:last-child { font-weight: 500; }

.manual-donde {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
}
.manual-donde__rotulo {
    font-family: var(--font-datos); font-size: .7rem; letter-spacing: .1em;
    color: var(--color-text-muted);
}

/* === Las cajas de aviso: mismos colores que los avisos del panel === */
.manual-nota {
    border-left: 4px solid var(--color-border);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: var(--espacio-3) var(--espacio-4);
    margin-bottom: var(--espacio-4);
    font-size: var(--font-size-sm); line-height: 1.6;
}
.manual-nota p { margin-bottom: var(--espacio-2); }
.manual-nota p:last-child { margin-bottom: 0; }
.manual-nota__titulo { font-family: var(--font-cartel); font-weight: 700; display: block; margin-bottom: var(--espacio-1); }
.manual-nota--aviso   { background: var(--color-warning-bg); border-left-color: var(--color-warning); color: var(--color-text); }
.manual-nota--dato    { background: var(--color-info-bg);    border-left-color: var(--color-info);    color: var(--color-text); }
.manual-nota--cuidado { background: var(--color-danger-bg);  border-left-color: var(--color-danger);  color: var(--color-text); }
.manual-nota--bien    { background: var(--color-success-bg); border-left-color: var(--color-success); color: var(--color-text); }

/* === Tablas de datos dentro del manual === */
.manual-tabla-marco { overflow-x: auto; margin-bottom: var(--espacio-4); }
.manual-tabla {
    width: 100%; border-collapse: collapse; font-size: var(--font-size-sm);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}
.manual-tabla th, .manual-tabla td {
    padding: var(--espacio-2) var(--espacio-3);
    text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}
.manual-tabla th {
    font-family: var(--font-cartel); font-weight: 600; font-size: .82rem;
    color: var(--color-text);
    background: var(--color-bg);
}
.manual-tabla tr:last-child td { border-bottom: none; }
.manual-tabla td code { font-family: var(--font-datos); font-size: .8rem; }

/* === La tabla de los botones del programa: el botón de verdad, con la clase
   .accion de app.css, para que se vea igual que en la pantalla === */
.manual-iconos td:first-child { width: 3.5rem; text-align: center; }

/* === Una orden para teclear === */
.manual-orden {
    display: block; font-family: var(--font-datos); font-size: .82rem;
    background: var(--color-text); color: var(--color-text-inverse);
    padding: var(--espacio-3) var(--espacio-4);
    border-radius: var(--border-radius);
    margin-bottom: var(--espacio-4);
    overflow-x: auto; white-space: pre;
}

/* === La lista de comprobación del final === */
.manual-repaso { list-style: none; margin-left: 0 !important; }
.manual-repaso li {
    display: flex; gap: var(--espacio-3); align-items: flex-start;
    padding: var(--espacio-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.manual-repaso li:last-child { border-bottom: none; }
.manual-repaso__casilla {
    flex: 0 0 auto; width: 18px; height: 18px; margin-top: .15rem;
    border: 2px solid var(--color-text-muted); border-radius: 3px;
}

/* === La portada: los manuales por grupos === */
.manual-portada { max-width: 860px; margin: 0 auto; }
.manual-grupo { margin-bottom: var(--espacio-6); }
.manual-grupo__titulo {
    font-family: var(--font-cartel); font-weight: 700; font-size: 1.1rem;
    color: var(--color-text); margin-bottom: var(--espacio-1);
}
.manual-grupo__que { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--espacio-4); }
.manual-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--espacio-5); }
.manual-ficha {
    display: block; text-decoration: none; color: inherit;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--espacio-5);
    box-shadow: var(--shadow-card);
}
.manual-ficha:hover { border-color: var(--color-primary); }
.manual-ficha__para {
    font-family: var(--font-datos); font-size: .7rem; letter-spacing: .1em;
    color: var(--color-primary-dark); margin-bottom: var(--espacio-2);
}
.manual-ficha__titulo { font-family: var(--font-cartel); font-weight: 700; font-size: 1.2rem; margin-bottom: var(--espacio-2); }
.manual-ficha__que { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.6; }
.manual-ficha__pasos {
    margin-top: var(--espacio-4); padding-top: var(--espacio-3);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-datos); font-size: .75rem; color: var(--color-text-muted);
}

/* === El pie === */
.manual-pie {
    max-width: 1180px; margin: 0 auto;
    padding: var(--espacio-5) var(--espacio-5) var(--espacio-6);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm); color: var(--color-text-muted);
}
.manual-pie a { color: var(--color-primary-dark); }

/* === Pantallas estrechas: el índice deja de ser columna y se pone arriba === */
@media (max-width: 900px) {
    .manual-marco { grid-template-columns: minmax(0, 1fr); padding: var(--espacio-5) var(--espacio-4); gap: var(--espacio-5); }
    .manual-indice { position: static; max-height: none; }
    .manual-portadilla__titulo { font-size: 1.6rem; }
    .manual-banda { padding: 0 var(--espacio-4); gap: var(--espacio-3); }
    .manual-banda__que { display: none; }
}

/* === En papel: se imprime el texto, sin banda ni índice === */
@media print {
    .manual-banda, .manual-indice { display: none; }
    .manual-marco { display: block; max-width: none; padding: 0; }
    .manual-cuerpo { background: #FFFFFF; }
    .manual-paso { break-inside: avoid-page; }
}