/* Trama Admin — Portal Autor
   Mismo sistema tipográfico y visual de Trama POS (GothamHTF, negro/rojo/grises).
   Breakpoints: móvil <480px | tablet 480-768px | desktop >768px
*/

/* ── Fuente ───────────────────────────────────────────────────────────────── */
@font-face{font-family:'GothamHTF';src:url('../fonts/GothamHTF-Light.otf') format('opentype');font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:'GothamHTF';src:url('../fonts/GothamHTF-Medium.otf') format('opentype');font-weight:500 900;font-style:normal;font-display:swap}
@font-face{font-family:'GothamHTF';src:url('../fonts/GothamHTF-LightCondensed.otf') format('opentype');font-weight:300 400;font-style:normal;font-stretch:condensed;font-display:swap}

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
    --font: 'GothamHTF', sans-serif;
    --red: #CC1B1B; --red-d: #a31414; --red-l: #fdecea;
    --black: #0D0D0D; --g90: #1a1a1a; --g70: #4d4d4d;
    --g50: #808080; --g30: #b3b3b3; --g10: #e8e8e8; --g05: #f5f5f5;
    --white: #fff;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
/* El sitio tiene su propio theme con estilos globales para button/a/input que
   pueden ganarle en especificidad a nuestras clases sueltas (ej. "Resumen" en
   el menú y el botón "Confirmar" quedaban invisibles). Por eso el portal fija
   color/fondo/borde con !important en los elementos interactivos de abajo. */
.trama-admin-portal {
    width: 100%;
    max-width: 100%;
    font-family: var(--font);
    color: var(--black);
    box-sizing: border-box;
    line-height: 1.5;
}
.trama-admin-portal *, .trama-admin-portal *::before, .trama-admin-portal *::after {
    box-sizing: border-box;
    font-family: inherit;
}
.trama-admin-portal button, .trama-admin-portal a {
    font-family: inherit;
    /* Reemplaza el flash gris/azul por defecto de WebKit/Chrome al tocar un
       link o botón — ya tenemos nuestros propios estados :active arriba. */
    -webkit-tap-highlight-color: transparent;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.trama-admin-portal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: var(--white);
    border-bottom: 1px solid var(--g10);
    flex-wrap: wrap;
}
.trama-admin-portal-bienvenida { flex: 1; min-width: 0; }
.trama-admin-portal-bienvenida h2 {
    margin: 0 0 2px;
    font-size: 20px;
    font-weight: 700 !important;
    color: var(--black) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trama-admin-portal-bienvenida p { margin: 0; color: var(--g50) !important; font-size: 12px; letter-spacing: 0.04em; }
.trama-admin-portal-logout { flex-shrink: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.trama-admin-portal-logout a {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 .65rem;
    border: 1px solid var(--black);
    background: transparent !important;
    color: var(--black) !important;
    font-size: 11px;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: all .12s;
}
/* :hover scoped a (hover:hover) — en touch, un :hover sin condición se queda
   "pegado" (invertido) después de tocar, hasta que el usuario toca otra parte
   de la pantalla; en celular, que es como entra la mayoría de autores, un
   botón que queda visualmente "activado" se lee como roto. :active de abajo
   da el feedback táctil real para dedo. */
@media (hover: hover) {
    .trama-admin-portal-logout a:hover { background: var(--black) !important; color: var(--white) !important; }
}
.trama-admin-portal-logout a:active { background: var(--g10) !important; }

/* ── Navegación ───────────────────────────────────────────────────────────── */
.trama-admin-portal-nav {
    display: flex;
    background: var(--white);
    border-bottom: 1px solid var(--g10);
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.trama-admin-portal-nav::-webkit-scrollbar { display: none; }
.trama-admin-portal-nav a {
    display: inline-block;
    padding: 13px 20px;
    text-decoration: none !important;
    background: transparent !important;
    color: var(--g70) !important;
    font-size: 13px;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.12s, border-color 0.12s;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (hover: hover) {
    .trama-admin-portal-nav a:hover { color: var(--black) !important; }
}
.trama-admin-portal-nav a:active { color: var(--black) !important; }
.trama-admin-portal-nav a.activo {
    color: var(--black) !important;
    border-bottom-color: var(--red);
}

/* ── Contenido ────────────────────────────────────────────────────────────── */
.trama-admin-portal-contenido { padding: 0 20px 20px; }
.trama-admin-portal-contenido h3 {
    font-size: 12px;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--g50) !important;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--g10);
}
.trama-admin-portal-contenido h4 {
    font-size: 16px;
    font-weight: 700 !important;
    color: var(--black) !important;
    margin: 26px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--g10);
}

/* ── Acumulado pagado ─────────────────────────────────────────────────────── */
.trama-admin-pagado-acumulado {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: var(--black) !important;
    padding: 12px 16px;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}
.trama-admin-pagado-label {
    color: var(--white, #fff) !important;
    font-size: 12px;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.trama-admin-pagado-monto { font-weight: 700 !important; color: var(--white, #fff) !important; font-size: 15px; white-space: nowrap; }

/* ── Badge nuevo ──────────────────────────────────────────────────────────── */
.trama-admin-badge-nuevo {
    display: inline-block;
    background: var(--red) !important;
    color: var(--white) !important;
    font-size: 10px;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Badge institucional (tiradas) ────────────────────────────────────────── */
.trama-admin-badge-institucional {
    display: inline-block;
    background: var(--g10) !important;
    color: var(--g70) !important;
    font-size: 9px;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 2px;
    vertical-align: middle;
}

/* ── Badge saldado (pendiente = $0) ───────────────────────────────────────── */
.trama-admin-badge-saldado {
    display: inline-block;
    background: #e7f4ec !important;
    color: #1e7a45 !important;
    font-size: 10px;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
}

/* ── Banner "Ver como autor" (modo supervisión de un admin) ─────────────────
   Ámbar, no rojo/negro de marca a propósito: debe leerse como un aviso
   distinto del resto del portal, no como parte normal de la UI del autor. */
.trama-admin-banner-ver-como {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: #fff4d6 !important;
    color: #7a5b00 !important;
    border: 1px solid #f0d38a !important;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
}
.trama-admin-banner-ver-como strong { color: #7a5b00 !important; }
.trama-admin-banner-ver-como form { margin: 0; }
.trama-admin-banner-ver-como button {
    background: #7a5b00 !important;
    color: var(--white) !important;
    border: none !important;
    padding: 6px 14px;
    font-weight: 700 !important;
    font-size: 12px;
    letter-spacing: 0.03em;
    cursor: pointer;
    border-radius: 3px;
}

/* ── Botón aceptar — alto contraste ───────────────────────────────────────── */
/* El tema del sitio le pone su propio font-size/line-height/padding a los
   <button> con más especificidad que la nuestra; sin !important en esas
   propiedades el texto salía enorme y descentrado dentro del botón. */
.trama-admin-btn-confirmar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 26px !important;
    line-height: 1 !important;
    background: var(--black) !important;
    border: none !important;
    border-radius: 2px !important;
    color: var(--white) !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 10px !important;
    font-family: var(--font) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    touch-action: manipulation;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
@media (hover: hover) {
    .trama-admin-btn-confirmar:hover { background: var(--white) !important; color: var(--black) !important; }
}
.trama-admin-btn-confirmar:active { opacity: .8; }

/* ── Tabla de cortes — wrapper para scroll horizontal en tablet ───────────── */
.trama-admin-tabla-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 24px;
    /* indicador visual de scroll */
    background:
        linear-gradient(to right, white 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
        radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.08), transparent),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.08), transparent) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ── Tabla de cortes — desktop ────────────────────────────────────────────────
   Sigue las pautas de UX Planet para data tables: bordes finos que se
   funden con el fondo (no gritones), sin zebra striping (estas tablas son
   cortas — 1 a 5 filas por libro — donde el zebra confunde en vez de ayudar),
   y números alineados a la derecha, texto a la izquierda. ────────────────── */
.trama-admin-tabla-cortes {
    width: 100%;
    /* Ancho de columna fijo (definido por el <colgroup> del HTML) en vez de
       autoajustado por contenido — cada libro tiene su propia <table>, y sin
       esto el ancho de cada columna variaba de una tabla a otra según su
       contenido (ej. el botón "Aceptar" ensanchaba Confirmación solo en esa
       tabla), quedando desalineadas entre sí. */
    table-layout: fixed;
    /* table-layout:fixed hace que el ancho de columna nunca supere el % del
       <colgroup>, incluso si el contenido no cabe — en pantallas angostas
       (tablet) eso recortaría el texto en vez de activar el scroll horizontal
       del wrapper. Este mínimo obliga a la tabla a mantener un ancho usable y
       delega el resto en el scroll, igual que antes de fijar las columnas. */
    min-width: 1000px;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14.5px;
    margin-bottom: 0;
}
/* Safari le agrega un borde propio a <table>/<th>/<td> aunque se declare
   border-collapse — hay que anularlo explícitamente en las celdas o el
   borde nuestro (1px) queda pegado al de Safari y se ve doble/más grueso. */
.trama-admin-tabla-cortes th,
.trama-admin-tabla-cortes td {
    border-left: 0;
    border-right: 0;
    border-top: 0;
}
.trama-admin-tabla-cortes th {
    background: var(--black) !important;
    color: var(--white) !important;
    padding: 10px 12px;
    text-align: left;
    font-weight: 700 !important;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.trama-admin-tabla-cortes td {
    padding: 12px;
    border-bottom: 1px solid var(--g10);
    vertical-align: middle;
    color: var(--g90) !important;
    font-size: 14.5px;
}
.trama-admin-tabla-cortes td[data-label="Período"] {
    /* El badge "Nuevo" debe quedar siempre en la misma línea que el nombre
       del período, nunca partido en dos renglones dentro de la celda. */
    white-space: nowrap;
}
.trama-admin-tabla-cortes td.trama-admin-num {
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.trama-admin-tabla-cortes td strong { color: var(--black) !important; font-weight: 700 !important; font-size: 15px; }
/* El <strong> del monto pendiente heredaría el rojo de su <td> si no fuera
   por la regla genérica de arriba (misma especificidad de propiedad, pero
   apunta directo al <strong> en vez de heredar) — sin este override el
   monto que más debería resaltar en la tabla se veía negro, igual que
   cualquier otro dato. */
.trama-admin-tabla-cortes td.trama-admin-cifra-pendiente strong { color: var(--red) !important; }
@media (hover: hover) {
    .trama-admin-tabla-cortes tbody tr:hover td { background: var(--g05) !important; }
}

/* ── Total acumulado — fila de cierre ─────────────────────────────────────── */
/* Un solo borde de 1px, igual al resto de filas — el borde extra que tenía
   antes (más grueso, sumado al de la última fila de la tabla) se veía como
   una línea doble. */
.trama-admin-tabla-cortes tfoot td {
    color: var(--black) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 10px 12px !important;
    border-top: 1px solid var(--g10);
    border-bottom: none !important;
}
.trama-admin-tabla-cortes td.trama-admin-cifra-pagada { color: #1e7a45 !important; }
.trama-admin-tabla-cortes td.trama-admin-cifra-pendiente { color: var(--red) !important; }

/* ── Nota de contacto debajo de la tabla de cortes ────────────────────────── */
.trama-admin-nota-dudas {
    font-size: 12px;
    color: var(--g50) !important;
    margin: 0 0 20px;
}
.trama-admin-nota-dudas a { color: var(--g70) !important; text-decoration: underline !important; }

/* ── Fila de ventas históricas (pre-2025) dentro de la tabla de cortes ────── */
.trama-admin-fila-historico td {
    color: var(--g50) !important;
    font-style: italic;
    background: var(--g05) !important;
}
.trama-admin-fila-historico td[data-label="Período"] { font-weight: 700 !important; font-style: normal; }
.trama-admin-fila-historico td.trama-admin-num { font-style: normal; color: var(--g90) !important; font-weight: 400 !important; }
.trama-admin-fila-historico td.trama-admin-num strong { font-weight: 700 !important; }

/* ── Cortes — tarjetas nativas en móvil ────────────────────────────────────
   La tabla de escritorio venía forzándose a verse como tarjeta en móvil
   con CSS (content: attr(data-label), flex hacks, overrides de
   especificidad) — un patrón fràgil que dio tres bugs seguidos (etiquetas
   pisadas por el propio wp-admin en el panel, superposición etiqueta/valor,
   desborde horizontal). En vez de seguir parchando eso, el portal ahora
   trae dos versiones: la tabla de siempre para escritorio, y una lista de
   tarjetas armadas con divs (.trama-admin-corte-tarjeta) que reutiliza el
   mismo componente .trama-admin-libro-fila ya probado en la pestaña
   Resumen — mismo lenguaje visual, sin ningún truco de tabla-a-tarjeta.
   Cada media query decide cuál de las dos se ve. ── */
.trama-admin-cortes-tarjetas-movil { display: none; }

.trama-admin-corte-tarjeta {
    border: 1px solid var(--g10);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.trama-admin-corte-tarjeta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--g10);
}
.trama-admin-corte-tarjeta-header strong {
    font-size: 15px;
    color: var(--black) !important;
    font-weight: 700 !important;
}
.trama-admin-corte-tarjeta-confirmacion { margin-top: 6px; }
.trama-admin-corte-tarjeta-confirmacion span { color: var(--g50) !important; font-size: 13px; }
.trama-admin-corte-tarjeta-confirmacion .trama-admin-btn-confirmar {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 12px !important;
}
/* Ventas históricas (pre-2025) — mismo criterio visual que
   .trama-admin-fila-historico en la tabla de escritorio: atenuada e
   itálica, se distingue de los cortes reales sin competir con ellos. */
.trama-admin-corte-tarjeta-historico { background: var(--g05); }
.trama-admin-corte-tarjeta-historico .trama-admin-corte-tarjeta-header strong,
.trama-admin-corte-tarjeta-historico .trama-admin-libro-fila,
.trama-admin-corte-tarjeta-historico .trama-admin-libro-fila span { color: var(--g50) !important; font-style: italic; }
.trama-admin-corte-tarjeta-historico .trama-admin-libro-fila strong { font-style: normal; }
.trama-admin-corte-tarjeta-historico p { color: var(--g50) !important; font-style: italic; }
/* Total acumulado — mismo título de sección que usa Resumen para sus
   bloques ("Contrato", "Liquidación"…), para que ambas pestañas lean
   igual de bien. */
.trama-admin-corte-tarjeta-total { background: var(--g05); }

@media (max-width: 600px) {
    .trama-admin-tabla-wrapper { display: none; }
    .trama-admin-cortes-tarjetas-movil { display: block; }
}

/* ── Header y nav — móvil ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* El header apilaba bienvenida + botones en una sola fila: como
       .trama-admin-portal-bienvenida tiene min-width:0 (puede encogerse sin
       límite) y .trama-admin-portal-logout tiene flex-shrink:0 (no cede nada
       de espacio), todo el ancho faltante lo absorbía el bloque de
       bienvenida — "Portal de regalías · Rey Naranjo Editores" quedaba
       comprimido a una columna angosta, una palabra por línea. En vez de
       competir por espacio en una fila, se apilan verticalmente. */
    .trama-admin-portal-header { flex-direction: column; align-items: stretch; gap: 6px; padding: 16px 16px 12px; }
    /* Jerarquía: el nombre crece (es lo primero que el autor busca al
       entrar), el subtítulo se mantiene discreto, y las acciones de cuenta
       — que se usan una vez cada mucho tiempo — bajan de peso visual: ya
       no son dos botones con borde del mismo tamaño que compiten con el
       nombre, sino texto pequeño subrayado, alineado a su contenido en vez
       de estirado a ancho completo. */
    .trama-admin-portal-bienvenida { min-width: 100%; }
    .trama-admin-portal-bienvenida h2 { font-size: 18px; }
    .trama-admin-portal-bienvenida p { font-size: 11px; white-space: normal; margin-bottom: 2px; }
    .trama-admin-portal-contenido { padding: 0 14px 16px; }
    .trama-admin-portal-logout { width: auto; gap: 16px; margin-top: 2px; }
    /* white-space:nowrap + ancho al contenido (no flex:1 a la mitad del
       header) es lo que evita que "Cambiar contraseña" se parta en dos
       líneas — con los botones repartiéndose el ancho a la mitad, el texto
       más largo de los dos no cabía. 44px de alto igual (guía táctil de
       Apple/Google) pero como link de texto, no como botón con borde. */
    .trama-admin-portal-logout a {
        flex: none;
        height: auto;
        min-height: 44px;
        padding: 0;
        border: none;
        white-space: nowrap;
        font-size: 11px;
        letter-spacing: 0.06em;
        color: var(--g50) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }
    /* El :active de base (fondo gris) está pensado para el botón con borde
       de escritorio — sobre texto subrayado sin padding se ve como un
       parche pegado a las letras. En su lugar, feedback táctil por color. */
    .trama-admin-portal-logout a:active { background: none !important; color: var(--black) !important; }
    .trama-admin-portal-nav a { padding: 14px; font-size: 12px; min-height: 44px; }
    .trama-admin-pagado-acumulado { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; }
}

/* ── Formulario login ─────────────────────────────────────────────────────── */
.trama-admin-login-card {
    max-width: 400px;
    margin: 48px auto;
    padding: 36px 32px;
    border: 1px solid var(--g10, #e8e8e8);
    background: var(--white, #fff) !important;
    font-family: var(--font, 'GothamHTF', sans-serif);
    box-sizing: border-box;
}
.trama-admin-login-titulo {
    margin: 0 0 24px;
    font-size: 22px;
    font-weight: 700 !important;
    color: var(--black, #0D0D0D) !important;
    text-align: center;
}
.trama-admin-login-ayuda {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--g10, #e8e8e8);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--g50, #808080) !important;
    text-align: center;
}
.trama-admin-login-ayuda a {
    color: var(--black, #0D0D0D) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}
@media (max-width: 480px) {
    .trama-admin-login-card { margin: 24px 16px; padding: 28px 22px; }
}
.trama-admin-error {
    background: var(--red-l, #fdecea) !important;
    color: var(--red-d, #a31414) !important;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 16px;
}
.trama-admin-form-login .trama-admin-campo,
.trama-admin-form-clave .trama-admin-campo { margin-bottom: 16px; }
.trama-admin-form-login label,
.trama-admin-form-clave label {
    display: block;
    font-size: 11px;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--g50, #808080) !important;
    margin-bottom: 6px;
}
.trama-admin-form-login input[type="text"],
.trama-admin-form-login input[type="password"],
.trama-admin-form-clave input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--g10, #e8e8e8);
    background: var(--white, #fff) !important;
    font-family: var(--font, 'GothamHTF', sans-serif);
    /* 16px, no 15px: Safari en iOS hace zoom automático al enfocar cualquier
       input con font-size menor a 16px — al usuario le "salta" la pantalla
       apenas toca el campo de usuario/contraseña en el celular. */
    font-size: 16px;
    color: var(--black, #0D0D0D) !important;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s;
    outline: none;
}
.trama-admin-form-login input:focus { border-color: var(--black, #0D0D0D); }
.trama-admin-btn-ingresar {
    display: block;
    width: 100%;
    background: var(--black, #0D0D0D) !important;
    color: var(--white, #fff) !important;
    border: none !important;
    padding: 14px !important;
    line-height: normal !important;
    font-family: var(--font, 'GothamHTF', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer;
    margin-top: 4px;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    transition: background 0.15s;
    box-shadow: none !important;
}
.trama-admin-btn-ingresar:hover,
.trama-admin-btn-ingresar:active { background: var(--g90, #1a1a1a) !important; color: var(--white, #fff) !important; }

/* ── Libros ───────────────────────────────────────────────────────────────── */
.trama-admin-libro-card {
    border: 1px solid var(--g10);
    margin-bottom: 20px;
    overflow: hidden;
}
.trama-admin-libro-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 18px;
    background: var(--g05);
    border-bottom: 1px solid var(--g10);
    flex-wrap: wrap;
}
.trama-admin-libro-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700 !important;
    color: var(--black) !important;
    border: none;
    padding: 0;
}
.trama-admin-libro-isbn {
    font-size: 11px;
    color: var(--g50) !important;
    letter-spacing: 0.04em;
}
.trama-admin-libro-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 0;
}
.trama-admin-libro-seccion {
    padding: 14px 18px;
    border-right: 1px solid var(--g10);
}
.trama-admin-libro-seccion:last-child { border-right: none; }
.trama-admin-libro-seccion-titulo {
    /* Mismo tamaño/peso que el encabezado de la tabla de Cortes (th), para que
       ambas pestañas compartan la misma jerarquía de "título de columna". */
    font-size: 12px;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--g50) !important;
    margin-bottom: 10px;
}
/* Cada fila tiene su propia línea divisoria fina — mismo criterio que la
   tabla de Cortes (bordes finos que se funden con el fondo), en vez de
   cebreado, para que las columnas con distinto número de filas (algunas
   tienen bloques de dos líneas, como las tiradas) se lean parejas. */
.trama-admin-libro-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    /* Mismo tamaño de texto que las celdas de la tabla de Cortes (14.5px). */
    font-size: 14.5px;
    color: var(--g70) !important;
    border-bottom: 1px solid var(--g05);
}
.trama-admin-libro-fila span { color: var(--g50) !important; }
.trama-admin-libro-fila strong {
    color: var(--black) !important;
    font-weight: 700 !important;
    /* Igual que .trama-admin-tabla-cortes td strong: el valor se lee un poco
       más grande que la etiqueta, misma jerarquía en ambas pestañas. */
    font-size: 15px;
    white-space: nowrap;
}

/* Sub-división dentro de una sección (ej. separar "Vendidos" de las tiradas
   impresas dentro de "Ejemplares impresos") — mismo estilo que el título de
   sección, pero con línea divisoria arriba para marcar el corte. */
.trama-admin-libro-subtitulo {
    font-size: 12px;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--g50) !important;
    margin: 16px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--g10);
}

/* Fila de total (ej. "Total impresos", "Total recibido"): la etiqueta
   también va en negro/negrilla, no solo el valor, para que se lea como
   cierre del bloque en vez de un dato más. */
.trama-admin-libro-fila-total span {
    color: var(--black, #0D0D0D) !important;
    font-weight: 700 !important;
}

/* Adelanto: se distingue del resto de datos de contrato con fondo propio.
   Sangra hasta el borde de la tarjeta (cancela el padding de la sección con
   márgenes negativos) y repone ese mismo padding para que el texto quede
   alineado con el de las demás filas — si no, el fondo queda inset y el
   texto desalineado respecto a "Rol"/"Regalía física". */
.trama-admin-libro-fila.trama-admin-libro-adelanto {
    background: var(--g05);
    margin: 6px -18px -14px;
    padding: 10px 18px;
    border-bottom: none;
}

/* ── Nota de anticipo en la cabecera de la tarjeta (pestaña Cortes) ───────── */
.trama-admin-nota-anticipo {
    font-size: 12px;
    color: var(--g70) !important;
    background: var(--g05);
    margin: 0;
    padding: 8px 18px;
    border-bottom: 1px solid var(--g10);
}

/* ── Tiradas: fecha/institucional en línea secundaria, separada del número ── */
.trama-admin-libro-tirada { padding: 8px 0; border-bottom: 1px solid var(--g05); }
.trama-admin-libro-tirada .trama-admin-libro-fila { padding: 0; border-bottom: none; }
.trama-admin-libro-tirada-meta {
    font-size: 11px;
    color: var(--g50) !important;
    margin: 3px 0 0;
}

@media (max-width: 600px) {
    .trama-admin-libro-grid { grid-template-columns: 1fr; }
    .trama-admin-libro-seccion { border-right: none; border-bottom: 1px solid var(--g10); }
    .trama-admin-libro-seccion:last-child { border-bottom: none; }
}

/* ── Página pública de descarga de media kit (/kit-de-prensa/) ─────────────── */
.trama-admin-mk {
    display: flex;
    justify-content: center;
    padding: 48px 20px;
}
.trama-admin-mk-card {
    width: 100%;
    max-width: 440px;
    background: var(--white);
    border: 1px solid var(--g10);
    padding: 40px 36px;
    text-align: center;
}
.trama-admin-mk-logo { width: 150px; height: auto; margin: 0 0 24px; }
.trama-admin-mk-portada {
    display: block;
    max-width: 200px;
    width: 100%;
    height: auto;
    margin: 0 auto 24px;
    border: 1px solid var(--g10);
}
.trama-admin-mk-kicker {
    margin: 0 0 6px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--g50) !important;
}
.trama-admin-mk-titulo {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700 !important;
    color: var(--black) !important;
    line-height: 1.3;
}
.trama-admin-mk-desc {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--g70) !important;
    line-height: 1.6;
}
.trama-admin-mk-desc a { color: var(--black) !important; }
.trama-admin-mk-form { margin: 0 0 14px; }
.trama-admin-mk-btn {
    display: inline-block;
    width: 100%;
    padding: 14px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500 !important;
    color: var(--white) !important;
    background: var(--black) !important;
    border: 1px solid var(--black) !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.trama-admin-mk-btn:hover { background: var(--g90) !important; }
.trama-admin-mk-btn:active { transform: translateY(1px); }
.trama-admin-mk-nota {
    margin: 0;
    font-size: 12px;
    color: var(--g50) !important;
    line-height: 1.5;
}
.trama-admin-mk-nota a { color: var(--g50) !important; }