/* ============================================================
   manual_base.css — Estilos comunes para el Manual del Administrador
   Los colores de marca se definen mediante variables CSS en el
   fichero manual.css de cada personalización (_personalizaciones/).
   ============================================================ */

/* Valores por defecto de las variables de color (tema neutro) */
:root {
    --primary:      #333;
    --primary-link: #333;
    --toc-bg:       #f7f7f7;
    --toc-border:   #ddd;
    --th-bg:        #f0f0f0;
    --th-color:     #222;
    --row-alt:      #f7f7f7;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 11pt;
    line-height: 1.6;
    color: #1a1a1a;
    background: #f0f2f5;
    padding: 2rem 1rem;
}

.page {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 3rem 3.5rem;
    box-shadow: 0 2px 16px rgba(0,0,0,.13);
    border-radius: 6px;
}

/* Cabecera del manual */
.doc-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid var(--primary);
}

    .doc-header > img {
        height: 68px;
        width: auto;
        flex-shrink: 0;
        margin: 0;
    }

.doc-header-text {
    text-align: left;
}

.doc-supertitle {
    font-size: .78rem;
    font-weight: 400;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 0 0 .2rem;
}

.doc-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -.01em;
}

.doc-version {
    font-size: .8rem;
    color: #bbb;
    margin: 0 0 1.5rem;
}

/* Imagen de portada */
.cover-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem 0 0;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* Imagen decorativa de fondo: ocultar */
img[src$="image003.png"] {
    display: none;
}

/* Título de sección con imagen decorativa a la derecha */
.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 3rem 0 1rem;
    border-top: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
}

    .section-title h1 {
        border: none;
        margin: 0;
        padding: 0;
        flex: 1;
        text-transform: uppercase;
    }

    .section-title img {
        height: 150px;
        width: auto;
        flex-shrink: 0;
        display: block;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
        opacity: .9;
    }

/* Índice */
nav.toc {
    background: var(--toc-bg);
    border: 1px solid var(--toc-border);
    border-radius: 6px;
    padding: 1.2rem 1.8rem;
    margin: 1.5rem 0 2rem;
}

    nav.toc h2 {
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #555;
        margin: 0 0 .7rem;
        border: none;
    }

    nav.toc ol {
        margin: 0;
        padding-left: 1.4rem;
    }

    nav.toc li {
        margin: .25rem 0;
    }

    nav.toc a {
        color: var(--primary-link);
        text-decoration: none;
    }

        nav.toc a:hover {
            text-decoration: underline;
        }

    nav.toc ol ol {
        list-style-type: none;
        font-size: .93em;
        margin-top: .2rem;
    }

/* Encabezados */
h1 {
    font-size: 1.9rem;
    color: var(--primary);
    margin: 3rem 0 1rem;
    font-weight: 900;
    padding-bottom: .4rem;
}

h2 {
    font-size: 1.35rem;
    color: var(--primary);
    font-weight: 900;
    margin: 2rem 0 .7rem;
}

h3 {
    font-size: 1.35rem;
    color: rgba(0,0,0,.80);
    margin: 2rem 0 .7rem;
}

h4 {
    font-size: 1rem;
    color: #222;
    margin: 1.2rem 0 .4rem;
    font-weight: 700;
}

/* Texto */
p {
    margin: .6rem 0;
}

ul, ol {
    margin: .6rem 0 .6rem 1.8rem;
}

li {
    margin: .28rem 0;
}

strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

u {
    text-decoration: underline;
}

a {
    color: var(--primary-link);
}

/* Imágenes */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2rem auto;
    border-radius: 4px;
}

/* Tablas de datos */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    font-size: .93em;
}

th, td {
    border: 1px solid #c8d0e0;
    padding: .45rem .7rem;
    vertical-align: top;
    text-align: left;
}

th {
    background: var(--th-bg);
    font-weight: 700;
    color: var(--th-color);
}

tr:nth-child(even) td {
    background: var(--row-alt);
}

/* Lista de iconos de estado */
dl.status-list {
    margin: .8rem 0 .8rem 0;
}

    dl.status-list dt {
        display: inline-block;
        vertical-align: middle;
        margin: .4rem .5rem .4rem 0;
    }

        dl.status-list dt img {
            display: inline;
            margin: 0;
            box-shadow: none;
            border-radius: 0;
            height: 20px;
            width: auto;
            vertical-align: middle;
        }

    dl.status-list dd {
        display: inline;
        vertical-align: middle;
        font-size: .95em;
    }

        dl.status-list dd::after {
            content: '';
            display: block;
        }

/* Separador */
hr {
    border: none;
    border-top: 1px solid #dde3f0;
    margin: 2rem 0;
}

/* Notas / avisos */
.note {
    background: #fffbe6;
    border-left: 4px solid #f5a623;
    padding: .65rem 1rem;
    margin: 1rem 0;
    border-radius: 3px;
}

/* Responsive & print */
@media (max-width: 700px) {
    .page {
        padding: 1.5rem 1.2rem;
    }
}

@media print {
    @page {
        margin: 2cm 2.5cm;
    }

    body {
        background: #fff;
        padding: 0;
    }

    .page {
        box-shadow: none;
        padding: 0;
        max-width: 100%;
        border-radius: 0;
    }

    /* Suprimir URL de los enlaces */
    a::after {
        content: none !important;
    }

    /* La portada ocupa su propia página */
    .cover-img {
        page-break-after: always;
        break-after: page;
        width: 100%;
        margin: 1rem 0 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* El índice ocupa su propia página */
    nav.toc {
        page-break-after: always;
        break-after: page;
    }

    /* Cada sección principal empieza en página nueva */
    .section-title {
        page-break-before: always;
        break-before: page;
    }

    /* h1 libre (sin .section-title): también nueva página */
    h1 {
        page-break-before: always;
        break-before: page;
    }

    /* No cortar justo después de sub-encabezados ni dentro de imágenes */
    h2, h3, h4 {
        page-break-after: avoid;
        break-after: avoid;
    }

    img {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    p {
        orphans: 3;
        widows: 3;
    }
}