/* ============================================================
   Miss Paula - Acordeón (Condiciones Generales)
   Marcado: condiciones_render_acordeon() en ERP/includes/condiciones_generales.php

   Componente independiente de portal.css: cada variable lleva su valor
   de respaldo para poder usarlo en una página que no lo cargue.
   ============================================================ */

.mp-acordeon {
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    color: var(--mp-text, #1a1a2e);
    text-align: left;
}

.mp-acordeon-item {
    border: 1px solid var(--mp-border, #e0e0e0);
    border-radius: var(--mp-radius, 12px);
    background: var(--mp-card, #ffffff);
    margin-bottom: 10px;
}

.mp-acordeon-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display, 'Nunito', sans-serif);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.3;
    border-radius: var(--mp-radius, 12px);
}

/* Sin el triángulo del navegador: el indicador es el "+" de la derecha */
.mp-acordeon-titulo::-webkit-details-marker { display: none; }

.mp-acordeon-titulo::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    color: var(--mp-magenta, #ad1457);
    transition: transform 0.2s;
}

.mp-acordeon-item[open] > .mp-acordeon-titulo {
    color: var(--mp-magenta, #ad1457);
    border-bottom: 1px solid var(--mp-border, #e0e0e0);
    border-radius: var(--mp-radius, 12px) var(--mp-radius, 12px) 0 0;
}

.mp-acordeon-item[open] > .mp-acordeon-titulo::after { transform: rotate(45deg); }

.mp-acordeon-titulo:hover { color: var(--mp-magenta, #ad1457); }

.mp-acordeon-titulo:focus-visible {
    outline: 2px solid var(--mp-magenta, #ad1457);
    outline-offset: 2px;
}

.mp-acordeon-cuerpo {
    padding: 14px 16px 16px;
    font-size: 0.92rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.mp-acordeon-cuerpo p { margin: 0 0 10px; }
.mp-acordeon-cuerpo h3,
.mp-acordeon-cuerpo h4 {
    font-family: var(--font-display, 'Nunito', sans-serif);
    font-size: 1rem;
    margin: 14px 0 6px;
}
.mp-acordeon-cuerpo a { color: var(--mp-azul, #1565c0); font-weight: 600; }
.mp-acordeon-cuerpo blockquote {
    margin: 0 0 10px;
    padding-left: 12px;
    border-left: 3px solid var(--mp-border, #e0e0e0);
}

/* Listas: mismo esquema que el editor (Quill), que no anida listas sino que
   marca la sangría en el propio <li> (ql-indent-1, ql-indent-2).
   Numeradas: 1. → a. → i.   Con viñetas: solo cambia la sangría. */
.mp-acordeon-cuerpo ol,
.mp-acordeon-cuerpo ul {
    margin: 0 0 10px;
    padding-left: 0;
    list-style: none;
}

.mp-acordeon-cuerpo li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 8px;
}
.mp-acordeon-cuerpo li.ql-indent-1 { padding-left: 4em; }
.mp-acordeon-cuerpo li.ql-indent-2 { padding-left: 6em; }

.mp-acordeon-cuerpo li::before {
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: right;
    font-weight: 700;
    color: var(--mp-magenta, #ad1457);
}
.mp-acordeon-cuerpo li.ql-indent-1::before { left: 2em; }
.mp-acordeon-cuerpo li.ql-indent-2::before { left: 4em; }

.mp-acordeon-cuerpo ul > li::before { content: '•'; }

.mp-acordeon-cuerpo ol { counter-reset: mp-lista-0; }
.mp-acordeon-cuerpo ol > li {
    counter-increment: mp-lista-0;
    counter-reset: mp-lista-1 mp-lista-2;
}
.mp-acordeon-cuerpo ol > li::before { content: counter(mp-lista-0) '.'; }

.mp-acordeon-cuerpo ol > li.ql-indent-1 {
    counter-increment: mp-lista-1;
    counter-reset: mp-lista-2;
}
.mp-acordeon-cuerpo ol > li.ql-indent-1::before { content: counter(mp-lista-1, lower-alpha) '.'; }

.mp-acordeon-cuerpo ol > li.ql-indent-2 {
    counter-increment: mp-lista-2;
    counter-reset: none;
}
.mp-acordeon-cuerpo ol > li.ql-indent-2::before { content: counter(mp-lista-2, lower-roman) '.'; }

.mp-acordeon-vacio,
.mp-acordeon-actualizado {
    font-size: 0.82rem;
    color: var(--mp-text-sub, #757575);
    text-align: center;
    margin: 14px 0 0;
}