/* ==========================================================================
   PORTAL · estilos de los módulos comunes (base replicable)
   Archivo: assets/css/portal.css  (se carga después de estilos.css)
   Orden: variables · barra superior · menú y submenús · lo más comentado ·
          contador de comentarios · comentarios · newsletter · pie ·
          páginas fijas y contacto · responsivo
   El color principal sale de Admin → Ajustes (variable --portal-color).
   ========================================================================== */

:root {
    --portal-color: #c0392b;
    --portal-oscuro: #1a1a1a;
    --portal-gris: #666;
    --portal-borde: #e5e5e5;
}

/* ---------- Barra superior: redes sociales ---------- */
.top-social a {
    margin-left: 12px;
    color: #aaa;
    text-decoration: none;
}
.top-social a:hover {
    color: #fff;
}

/* ---------- Menú: sección destacada y submenús ---------- */
.taurine-nav li a.nav-destacada {
    color: #fff;
    background: var(--portal-color);
}
.taurine-nav li.nav-con-sub {
    position: relative;
}
.taurine-nav li.nav-con-sub > a.nav-padre::after {
    content: ' ▾';
    font-size: 11px;
}
.taurine-nav .nav-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: var(--portal-oscuro);
    border-top: 2px solid var(--portal-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    z-index: 50;
    flex-direction: column;
}
.taurine-nav .nav-submenu li a {
    padding: 11px 18px;
    font-size: 13px;
}
@media (hover: hover) and (min-width: 769px) {
    .taurine-nav li.nav-con-sub:hover > .nav-submenu,
    .taurine-nav li.nav-con-sub:focus-within > .nav-submenu {
        display: flex;
    }
}
.nav-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    background: #111;
    border-top: 1px solid #333;
}
.nav-panel[hidden] {
    display: none;
}
.nav-panel a {
    color: #ddd;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 12px;
    border: 1px solid #333;
    border-radius: 3px;
}
.nav-panel a.active,
.nav-panel a:hover {
    color: #fff;
    background: var(--portal-color);
    border-color: var(--portal-color);
}

/* ---------- Lo más comentado / reciente ---------- */
a.t-item {
    text-decoration: none;
    color: inherit;
}
a.t-item:hover span.item-text {
    color: var(--portal-color);
}

/* ---------- Contador de comentarios (tarjetas y nota) ---------- */
.cm-contador {
    color: var(--portal-gris);
    text-decoration: none;
    white-space: nowrap;
}
.cm-contador:hover {
    color: var(--portal-color);
}

/* ==========================================================================
   COMENTARIOS
   ========================================================================== */
.cm {
    margin-top: 45px;
    padding-top: 25px;
    border-top: 2px solid var(--portal-color);
}
.cm-titulo {
    font-size: 22px;
    color: #111;
    margin-bottom: 18px;
}
.cm-num {
    color: var(--portal-color);
}
.cm-entrar,
.cm-aviso,
.pf-caja {
    background: #f8f8f8;
    border: 1px solid var(--portal-borde);
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 22px;
    font-size: 15px;
    color: #333;
}
.cm-aviso {
    background: #fff8e1;
    border-color: #f0b400;
    color: #7a5a00;
}
.cm-redes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.cm-red {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid #ccc;
    background: #fff;
    color: #222;
}
.cm-red:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.cm-red-facebook {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
}
.cm-red-g,
.cm-red-f {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
}
.cm-red-g {
    color: #4285f4;
    border: 1px solid #ddd;
}
.cm-red-f {
    background: #fff;
    color: #1877f2;
}

/* Formulario */
.cm-form {
    margin-bottom: 26px;
}
.cm-quien {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #444;
}
.cm-salir {
    margin-left: auto;
    font-size: 13px;
    color: var(--portal-gris);
}
.cm-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
}
.cm-form textarea:focus {
    outline: none;
    border-color: var(--portal-color);
}
.cm-acepto {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: #444;
}
.cm-form-pie {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
}
.cm-form-pie button.btn-leer-mas {
    border: none;
    cursor: pointer;
}
.cm-form-pie button:disabled {
    opacity: 0.6;
    cursor: wait;
}
.cm-msg {
    font-size: 13px;
    margin-right: auto;
}
.cm-msg-ok {
    color: #1e7a3c;
}
.cm-msg-error {
    color: var(--portal-color);
    font-weight: bold;
}
.cm-btn-cancelar {
    background: none;
    border: none;
    color: var(--portal-gris);
    cursor: pointer;
    font-size: 13px;
}

/* Lista */
.cm-vacio {
    color: var(--portal-gris);
    font-style: italic;
}
.cm-item {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}
.cm-respuestas .cm-item {
    padding: 12px 0 0 0;
    border-bottom: none;
}
.cm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.cm-respuestas .cm-avatar {
    width: 32px;
    height: 32px;
}
.cm-avatar-letra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--portal-color);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}
.cm-cuerpo {
    flex: 1;
    min-width: 0;
}
.cm-cabeza {
    font-size: 14px;
    color: #111;
}
.cm-cabeza time {
    color: #999;
    font-size: 12px;
    margin-left: 6px;
}
.cm-texto {
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.55;
    color: #333;
    overflow-wrap: anywhere;
}
.cm-acciones {
    margin-top: 6px;
    display: flex;
    gap: 14px;
}
.cm-acciones button {
    background: none;
    border: none;
    padding: 0;
    color: var(--portal-gris);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}
.cm-acciones button:hover {
    color: var(--portal-color);
}
.cm-acciones button:disabled {
    cursor: default;
    color: #aaa;
}
.cm-form-respuesta {
    margin: 12px 0 0 0;
}
.cm-nuevo {
    animation: cmResalta 2.5s ease-out;
}
@keyframes cmResalta {
    from { background: #fff8e1; }
    to { background: transparent; }
}
.cm-reglas {
    margin-top: 18px;
    font-size: 12px;
    color: #999;
}
.cm-reglas a {
    color: #777;
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.nl-form h3 {
    font-size: 17px;
    color: #111;
    margin-bottom: 6px;
}
.nl-form p {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}
.nl-fila {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.nl-fila input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
.nl-fila button {
    background: var(--portal-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 14px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.nl-fila button:disabled {
    opacity: 0.6;
}
.nl-trampa {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.nl-form .nl-msg {
    margin-top: 8px;
    min-height: 1em;
}
.nl-form .nl-ok {
    color: #1e7a3c;
}
.nl-form .nl-error {
    color: var(--portal-color);
    font-weight: bold;
}
.nl-form .nl-legal {
    font-size: 11px;
    color: #999;
    margin-top: 6px;
}
.nl-form .nl-legal a {
    color: #999;
}

/* En el pie (fondo oscuro) */
.footer-newsletter {
    max-width: 560px;
    margin: 0 auto 25px auto;
    padding-bottom: 25px;
    border-bottom: 1px solid #222;
}
.nl-pie h3 {
    color: #fff;
}
.nl-pie p,
.nl-pie .nl-legal,
.nl-pie .nl-legal a {
    color: #999;
}
.nl-pie .nl-fila input {
    background: #151515;
    border-color: #333;
    color: #fff;
}
.nl-pie .nl-ok {
    color: #6fdc8c;
}

/* ---------- Pie: redes ---------- */
.footer-redes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 12px;
}
.footer-redes a {
    color: #ccc;
    text-decoration: none;
    font-weight: bold;
}
.footer-redes a:hover {
    color: var(--portal-color);
}

/* ==========================================================================
   PÁGINAS FIJAS Y CONTACTO
   ========================================================================== */
.pagina-fija {
    max-width: 900px;
    margin: 0 auto;
}
.pagina-fija-cuerpo h2 {
    font-size: 20px;
    margin: 26px 0 10px 0;
}
.pagina-fija-cuerpo ul,
.pagina-fija-cuerpo ol {
    margin: 0 0 16px 22px;
    line-height: 1.7;
}
.pagina-fija-cuerpo p:first-of-type::first-letter {
    font-family: inherit;
    font-size: inherit;
    float: none;
    line-height: inherit;
    padding: 0;
    color: inherit;
}
.pf-contacto {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pf-contacto label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-weight: bold;
    font-size: 14px;
    color: #333;
    flex: 1;
}
.pf-contacto input,
.pf-contacto textarea {
    padding: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    font-weight: normal;
}
.pf-contacto input:focus,
.pf-contacto textarea:focus {
    outline: none;
    border-color: var(--portal-color);
}
.pf-fila {
    display: flex;
    gap: 14px;
}
.pf-contacto button {
    align-self: flex-start;
    border: none;
    cursor: pointer;
}
.pf-legal {
    font-size: 12px;
    color: #888;
}
.pf-ok {
    margin-top: 20px;
    padding: 15px;
    background: #eafaf1;
    border: 1px solid #27ae60;
    color: #1e7a3c;
    border-radius: 4px;
}
.pf-error {
    padding: 12px;
    background: #fff3f3;
    border: 1px solid var(--portal-color);
    color: var(--portal-color);
    border-radius: 4px;
    font-size: 14px;
}
.pf-btn-peligro {
    border: none;
    cursor: pointer;
    margin-top: 10px;
}
.nl-resultado p {
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.6;
}
.nl-resultado form {
    margin-top: 20px;
}
.nl-resultado button {
    border: none;
    cursor: pointer;
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 768px) {
    .taurine-nav .nav-submenu {
        display: none !important;
    }
    .cm-titulo {
        font-size: 19px;
    }
    .cm-red {
        flex: 1 1 100%;
        justify-content: center;
    }
    .cm-form-pie {
        flex-wrap: wrap;
    }
    .cm-msg {
        flex-basis: 100%;
    }
    .pf-fila {
        flex-direction: column;
    }
    .nl-fila {
        flex-direction: column;
    }
}