/* ==========================================================================
   Manual de usuario de TV Cable — hoja de estilo
   ==========================================================================

   Reproduce el aspecto de la documentación oficial de Odoo 20. Los valores no
   están sacados a ojo: se midieron con `getComputedStyle()` sobre
   https://www.odoo.com/documentation/20.0/applications/sales/subscriptions.html
   el 28-sep-2026. Si algún día hay que retocarlos, se vuelve a medir ahí —
   no se ajustan "hasta que parezca".

     morado de marca .... #714B67   (H1, barra de los avisos, ítem activo)
     texto .............. #282F33
     enlaces ............ #017E84   sin subrayado, peso 600
     aviso: fondo ....... #E3DBE1   barra izquierda 3px #714B67, padding 16px
     aviso: título ...... #442D3E   18px, peso 700
     código ............. #925E12
     línea de los H2 .... #D5D5D5

   Tipografía: Inter para el cuerpo y los H1; Roboto Slab (serif) para los H2 y
   H3, que es lo que le da a la documentación de Odoo su aire reconocible.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Roboto+Slab:wght@400;500&display=swap');

:root {
    --morado:        #714B67;
    --morado-oscuro: #442D3E;
    --texto:         #282F33;
    --texto-suave:   #5a6368;
    --enlace:        #017E84;
    --aviso-fondo:   #E3DBE1;
    --linea:         #D5D5D5;
    --codigo:        #925E12;
    --fondo-lateral: #fbfbfb;
    --borde-tarjeta: rgba(0, 0, 0, .125);

    --sans:  Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --serif: "Roboto Slab", Georgia, "Times New Roman", Times, serif;
    --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ancho-lateral: 260px;
    --ancho-toc:     230px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 24px;
    color: var(--texto);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid var(--linea);
}

.cabecera .marca {
    font-size: 22px;
    font-weight: 700;
    color: var(--morado);
    text-decoration: none;
    white-space: nowrap;
}

.cabecera .marca span {
    font-weight: 400;
    color: var(--texto-suave);
    font-size: 15px;
}

.cabecera .buscador {
    flex: 1;
    max-width: 640px;
}

.cabecera .buscador input {
    width: 100%;
    padding: 8px 14px;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--texto);
    border: 1px solid var(--linea);
    border-radius: 4px;
    background: #fff;
}

.cabecera .buscador input:focus {
    outline: none;
    border-color: var(--morado);
}

.cabecera .version {
    font-size: 14px;
    color: var(--texto-suave);
    white-space: nowrap;
}

/* ── Rejilla de tres columnas ────────────────────────────────────────────── */

.rejilla {
    display: grid;
    grid-template-columns: var(--ancho-lateral) minmax(0, 1fr) var(--ancho-toc);
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: start;
}

/* ── Navegación lateral ──────────────────────────────────────────────────── */

.lateral {
    position: sticky;
    top: 57px;
    max-height: calc(100vh - 57px);
    overflow-y: auto;
    padding: 24px 0 48px;
    border-right: 1px solid var(--linea);
    background: var(--fondo-lateral);
}

.lateral .grupo {
    margin-bottom: 20px;
}

.lateral .grupo > .titulo {
    display: block;
    padding: 4px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
}

.lateral a {
    display: block;
    padding: 6px 16px;
    font-size: 14.5px;
    line-height: 20px;
    color: var(--texto);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.lateral a:hover {
    background: #f1ecef;
    color: var(--morado);
}

.lateral a.activa {
    background: var(--morado);
    color: #fff;
    font-weight: 600;
    border-left-color: var(--morado-oscuro);
}

/* ── Contenido ───────────────────────────────────────────────────────────── */

.contenido {
    padding: 28px 0 80px;
    min-width: 0;
}

.migas {
    font-size: 13.5px;
    color: var(--texto-suave);
    margin-bottom: 18px;
}

.migas a {
    color: var(--texto-suave);
    text-decoration: none;
}

.migas a:hover { color: var(--morado); text-decoration: underline; }

.migas .sep { margin: 0 6px; }

h1 {
    font-family: var(--sans);
    font-size: 28.8px;
    line-height: 34.6px;
    font-weight: 700;
    color: var(--morado);
    margin: 0 0 18px;
}

h2 {
    font-family: var(--serif);
    font-size: 25.6px;
    font-weight: 500;
    color: var(--texto);
    border-bottom: 1px solid var(--linea);
    padding-bottom: 4.8px;
    margin: 42px 0 16px;
}

h3 {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 500;
    color: var(--texto);
    margin: 30px 0 12px;
}

p { margin: 0 0 14px; }

a { color: var(--enlace); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0 0 16px; padding-left: 26px; }
li { margin-bottom: 6px; }

/* Los pasos numerados de un procedimiento. Odoo usa lista numerada cuando el
   orden importa; aquí se les da un poco más de aire para que se lean como
   pasos y no como una enumeración cualquiera. */
ol.pasos > li { margin-bottom: 12px; }

strong, b { font-weight: 700; }

code, .literal {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--codigo);
    background: #f7f7f7;
    padding: 1px 5px;
    border-radius: 3px;
}

/* Ruta de menú, al estilo `:menuselection:` de Odoo: TV Cable ‣ Configuración */
.ruta {
    font-weight: 700;
    color: var(--texto);
    white-space: nowrap;
}

/* Etiqueta de campo o botón, al estilo `:guilabel:` */
.campo { font-weight: 700; color: var(--texto); }

/* ── Avisos ──────────────────────────────────────────────────────────────── */

.aviso {
    background: var(--aviso-fondo);
    border-left: 3px solid var(--morado);
    padding: 16px;
    margin: 20px 0;
    border-radius: 0 4px 4px 0;
}

.aviso .aviso-titulo {
    font-size: 18px;
    font-weight: 700;
    color: var(--morado-oscuro);
    margin: 0 0 8px;
}

.aviso > *:last-child { margin-bottom: 0; }

/* Variantes: el fondo cambia, la estructura no. */
.aviso.importante { background: #fdf3e7; border-left-color: #c47d1c; }
.aviso.importante .aviso-titulo { color: #8a5610; }

.aviso.peligro { background: #fbeceb; border-left-color: #b4352c; }
.aviso.peligro .aviso-titulo { color: #8a2820; }

.aviso.ejemplo { background: #eef4f4; border-left-color: var(--enlace); }
.aviso.ejemplo .aviso-titulo { color: #015c60; }

/* ── Tarjetas de subtemas (las de la portada de cada app en Odoo) ────────── */

.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.tarjeta {
    display: block;
    border: 1px solid var(--borde-tarjeta);
    border-radius: 4px;
    padding: 18px 20px;
    text-decoration: none;
    font-weight: 400;
    color: var(--texto);
    background: #fff;
}

.tarjeta:hover {
    border-color: var(--morado);
    text-decoration: none;
}

.tarjeta .titulo {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--morado);
    margin-bottom: 6px;
}

.tarjeta .resumen {
    font-size: 14.5px;
    line-height: 21px;
    color: var(--texto-suave);
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 15px;
}

th, td {
    border: 1px solid var(--linea);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

th {
    background: #f6f6f6;
    font-weight: 700;
}

/* ── Imágenes ────────────────────────────────────────────────────────────── */

figure { margin: 22px 0; }

figure img {
    max-width: 100%;
    width: auto;
    border: 1px solid var(--linea);
    border-radius: 4px;
    display: block;
}

figcaption {
    font-size: 13.5px;
    color: var(--texto-suave);
    margin-top: 8px;
    font-style: italic;
}

/* ── «En esta página» ────────────────────────────────────────────────────── */

.toc {
    position: sticky;
    top: 81px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 28px 0 48px;
    font-size: 14px;
}

.toc .titulo {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-suave);
    margin-bottom: 10px;
}

.toc a {
    display: block;
    padding: 4px 0 4px 10px;
    color: var(--texto-suave);
    font-weight: 400;
    text-decoration: none;
    border-left: 2px solid var(--linea);
    line-height: 19px;
}

.toc a:hover { color: var(--morado); border-left-color: var(--morado); }
.toc a.n3 { padding-left: 24px; font-size: 13.5px; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.pie {
    border-top: 1px solid var(--linea);
    margin-top: 48px;
    padding-top: 18px;
    font-size: 13.5px;
    color: var(--texto-suave);
}

/* ── Pantallas estrechas ─────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .rejilla { grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); }
    .toc { display: none; }
}

@media (max-width: 860px) {
    .rejilla { grid-template-columns: 1fr; gap: 0; padding: 0 16px; }
    .lateral {
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--linea);
        margin: 0 -16px;
        padding: 16px 0;
    }
    .cabecera { flex-wrap: wrap; gap: 12px; padding: 10px 16px; }
    .cabecera .buscador { order: 3; flex-basis: 100%; }
    h1 { font-size: 25px; line-height: 31px; }
    h2 { font-size: 22px; }
}

/* ── Impresión ───────────────────────────────────────────────────────────── */

@media print {
    .cabecera, .lateral, .toc, .migas { display: none; }
    .rejilla { display: block; max-width: none; padding: 0; }
    a { color: var(--texto); }
    h2 { page-break-after: avoid; }
    figure, .aviso, table { page-break-inside: avoid; }
}