:root {
    --bg: #edf7ef;
    --bg-strong: #d7eadb;
    --panel: #ffffff;
    --panel-soft: #f8fcf8;
    --text: #162419;
    --muted: #637265;
    --border: #cfe2d4;
    --primary: #1f9d55;
    --primary-dark: #0f6b37;
    --primary-soft: #e5f6eb;
    --accent: #c4933b;
    --accent-dark: #9c721f;
    --accent-soft: #f1ead8;
    --accent-border: rgba(196, 147, 59, .18);
    --danger: #b42318;
    --success: #127a45;
    --shadow: 0 16px 38px rgba(12, 50, 26, .08);
    --shadow-strong: 0 28px 80px rgba(3, 24, 13, .22);
    --radius: 18px;
}

/* Sin esto, tocar cualquier botón/enlace en iOS/Android deja el recuadro
   gris nativo un momento — se sustituye por :active explícito más abajo
   (.btn, .nav-link, .link-pill, .account-trigger) para no perder el
   feedback al tacto. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(31, 157, 85, .16), transparent 34rem),
        radial-gradient(circle at 92% 18%, rgba(15, 107, 55, .07), transparent 38rem),
        linear-gradient(180deg, #f8fbf7 0%, #eef7ef 44%, #e7f2e9 100%);
    color: var(--text);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.55rem, 3vw, 2.3rem); letter-spacing: -.03em; }
h2 { font-size: 1.22rem; margin-bottom: 8px; }

.app-shell { min-height: 100vh; }
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 78px;
    padding: 14px clamp(16px, 3vw, 34px);
    /* apple-mobile-web-app-status-bar-style=black-translucent (ver
       layouts/app.blade.php) pide expresamente que la página se dibuje bajo
       la barra de estado/notch — sin esto, la topbar fija podía quedar
       tapada en un iPhone. env() vale 0px donde no hay notch (Android, la
       mayoría de navegadores de escritorio), así que no cambia nada ahí. */
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    background: rgba(250, 253, 250, .92);
    border-bottom: 1px solid rgba(207, 226, 212, .92);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(13, 57, 28, .055), inset 0 -1px 0 rgba(255,255,255,.72);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 180px; }
.brand-logo { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 10px 28px rgba(7, 91, 47, .22), 0 0 0 1px rgba(196, 147, 59, .10); }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: 1.28rem; font-weight: 900; letter-spacing: -.04em; }
.brand-copy small { color: var(--accent-dark); font-weight: 800; margin-top: 3px; }

.top-nav { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.nav-dropdown { position: relative; display: inline-flex; }
/* <details>/<summary> nativo en vez de solo :hover/:focus-within (que no
   funciona de forma fiable con touch) — mismo patrón ya usado en
   .account-dropdown, que sí funciona bien en móvil sin JS. */
.nav-dropdown summary { list-style: none; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(247, 251, 247, .70);
    color: #294332;
    font-weight: 800;
    font-size: .94rem;
    cursor: default;
    transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.nav-link:hover, .nav-link.is-active, .nav-link:active { background: var(--primary-soft); color: var(--primary-dark); border-color: rgba(31, 157, 85, .18); box-shadow: 0 6px 16px rgba(12, 50, 26, .055); }
.nav-link.is-active { box-shadow: inset 0 0 0 1px rgba(31, 157, 85, .16), 0 6px 16px rgba(12, 50, 26, .055); }
.nav-trigger::after { content: "›"; transform: rotate(90deg); margin-left: 6px; font-size: .85em; opacity: .70; color: var(--primary-dark); }
.nav-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 190px;
    display: grid;
    gap: 3px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 22px 55px rgba(12, 50, 26, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    z-index: 40;
}
.nav-dropdown[open] .nav-menu, .nav-dropdown:focus-within .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown[open] .nav-trigger { background: var(--primary-soft); color: var(--primary-dark); border-color: rgba(31, 157, 85, .18); }
.nav-menu a, .nav-menu span { display: block; border-radius: 10px; padding: 9px 10px; color: var(--primary-dark); font-weight: 850; font-size: .92rem; white-space: nowrap; }
.nav-menu a:hover { background: var(--primary-soft); }
.nav-menu span { opacity: .86; }
.nav-menu-separador { border: none; border-top: 1px solid var(--border); margin: 3px 4px; }
/* :hover que abre el desplegable SOLO para dispositivos con puntero real
   (ratón). En touch (iOS/Android), aunque el dispositivo lo soportara,
   WebKit exige un toque extra para "simular" el :hover antes del click real
   cuando ese :hover revela contenido anidado — de ahí el bug de doble toque
   en iOS que no pasaba en Android. El <details>/<summary> nativo ya cubre
   la apertura por toque con un solo tap, esto es solo azúcar para ratón. */
@media (hover: hover) {
    .nav-dropdown:hover .nav-trigger { background: var(--primary-soft); color: var(--primary-dark); border-color: rgba(31, 157, 85, .18); box-shadow: 0 6px 16px rgba(12, 50, 26, .055); }
    .nav-dropdown:hover .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
}
.nav-menu span.nav-menu-titulo { padding: 4px 10px 0; color: var(--muted); font-weight: 950; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; opacity: 1; }

.topbar-actions, .actions-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Cabecera típica "título+descripción a la izquierda / botón a la derecha".
   Antes era un `style="justify-content:space-between; flex-wrap:nowrap;"`
   inline repetido en ~20 vistas, sin ningún tratamiento en móvil — el bloque
   se quedaba apretado en vez de apilarse (ver el @media de abajo). */
.actions-row-split { justify-content: space-between; flex-wrap: nowrap; }
.user-pill { padding: 8px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 850; }
.account-dropdown { position: relative; }
.account-dropdown summary { list-style: none; }
.account-dropdown summary::-webkit-details-marker { display: none; }
.account-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid rgba(31, 157, 85, .22);
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    cursor: pointer;
    font-weight: 950;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.account-trigger::after { content: "›"; transform: rotate(90deg); margin-left: 7px; font-size: .85em; }
.account-trigger.is-active, .account-trigger:active { background: #d7f3e2; border-color: rgba(31, 157, 85, .35); }
.account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 22px 55px rgba(12, 50, 26, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    z-index: 44;
}
.account-dropdown[open] .account-menu, .account-dropdown:focus-within .account-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.account-menu a, .account-logout { width: 100%; display: block; border: 0; border-radius: 10px; padding: 10px; background: transparent; color: var(--primary-dark); cursor: pointer; text-align: left; font-weight: 900; }
.account-menu a:hover, .account-logout:hover { background: var(--primary-soft); }
.account-logout { color: var(--danger); }
/* Mismo motivo que .nav-dropdown más arriba: :hover que abre el
   desplegable solo para dispositivos con puntero real, para no reintroducir
   el bug de doble toque en iOS. */
@media (hover: hover) {
    .account-dropdown:hover .account-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
}

.main-area { width: min(1180px, 94vw); margin: 0 auto; padding: 26px 0 40px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.page-heading { padding: 8px 2px 22px; }
.eyebrow { color: var(--primary-dark); margin: 0 0 5px; font-weight: 950; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; }
.content { display: block; }
.card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.93));
    border: 1px solid rgba(207, 226, 212, .96);
    border-top-color: rgba(196, 147, 59, .16);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow), 0 1px 0 rgba(196, 147, 59, .06);
}
.card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 0 0 999px 999px; background: linear-gradient(90deg, transparent, rgba(196, 147, 59, .30), transparent); pointer-events: none; }
.grid { display: grid; gap: 18px; }
.cards-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt { margin-top: 22px; }
.mt-sm { margin-top: 8px; }
.mini-table { display: grid; gap: 0; }
.mini-table-row { display: grid; grid-template-columns: 1fr auto minmax(120px, auto); align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.mini-table-row:last-child { border-bottom: none; }
.mini-table-row span:nth-child(2), .mini-table-row span:nth-child(3) { text-align: right; }
.mini-table-head { color: var(--muted); font-weight: 850; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }
.mini-table-2col .mini-table-row { grid-template-columns: 1fr auto; }
.subcard { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--panel-soft); display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.subcard > span:first-child { font-weight: 850; white-space: nowrap; }
.subcard ul { margin: 0; padding-left: 18px; flex: 1; min-width: 140px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.check-box { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--panel-soft); }
.check-box-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 850; }
.mini-table-head span:nth-child(3) { color: var(--primary-dark); }
.metric-card span { color: var(--muted); display: block; margin-bottom: 8px; font-weight: 800; }
.metric-card strong { display: block; font-size: 2rem; margin-bottom: 4px; color: var(--primary-dark); }
.metric-card p { margin: 0; color: var(--muted); }
.section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-header h2::after { content: ""; display: block; width: 42px; height: 3px; margin-top: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--primary), rgba(31, 157, 85, .10)); }

.btn { border: 0; border-radius: 12px; padding: 10px 14px; cursor: pointer; font-weight: 850; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; transition: transform .12s ease, background .12s ease, box-shadow .12s ease, filter .12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(.95); }
.btn-primary { background: linear-gradient(135deg, var(--primary), #35bd70); color: #fff; box-shadow: 0 10px 22px rgba(31, 157, 85, .22); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }
.btn-secondary { background: #edf5ee; color: #173d24; box-shadow: inset 0 0 0 1px rgba(31, 157, 85, .10); }
.btn-danger { background: #ffe9e6; color: var(--danger); }
.btn-small { min-height: 36px; padding: 7px 10px; font-size: .9rem; }
/* Varias vistas ponen 2-4 botones .btn-small seguidos dentro de la misma
   celda de tabla (Ver/Anular/Hist./Adjuntar...), sin gap explícito entre
   ellos — con esto quedan separados y con más margen para el dedo, tanto si
   están sueltos como si van dentro de un <form> con display:flex. */
.data-table td .btn-small { margin: 2px 4px 2px 0; }
.btn-full { width: 100%; }

.form-stack { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; color: #253b2c; font-weight: 800; }
.field span { color: #213928; }
.field input, .field select, .field textarea, .mock-modal textarea { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; background: #fff; color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus, .search-field input:focus { outline: 3px solid rgba(31, 157, 85, .18); border-color: var(--primary); }
.search-module, .filters { border: 1px solid var(--border); border-radius: 16px; background: rgba(247, 251, 247, .92); }
.search-module { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; }
.search-field input { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 999px; padding: 10px 14px; background: #fff; color: var(--text); }
.search-count { color: var(--primary-dark); font-size: .86rem; font-weight: 950; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px; align-items: end; padding: 12px; }
/* Variantes de número de columnas para .filters: como clase (no `style` inline)
   para que el colapso a 1 columna en móvil (más abajo, dentro de los @media)
   siga ganando por orden de cascada — un `style` inline tiene más
   especificidad que cualquier regla de hoja de estilos y rompía el colapso. */
.filters-1 { grid-template-columns: 1fr; }
.filters-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filters-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filters-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filter-actions { display: flex; align-items: end; }
/* Repetido igual en correo/por-pena, push/por-pena y notificaciones/configuracion:
   un selector de Peña que necesita algo de ancho mínimo dentro de una fila
   flex con wrap. Antes era `style="min-width:220px;"` inline en cada vista. */
.field-min220 { min-width: 220px; }
.field-checkbox { display: flex; align-items: center; gap: 8px; color: #253b2c; font-weight: 800; }
.field-checkbox input[type="checkbox"] { width: auto; accent-color: var(--primary); }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.data-table th, .data-table td { padding: 13px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.data-table th { color: var(--primary-dark); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.text-right { text-align: right !important; }
.compact { justify-content: flex-end; }
/* Con 2-3 acciones seguidas (Ver/Reenviar/Anular, Probar/Revocar...), la
   celda podía partirse en dos líneas -- tanto por texto/botones inline que
   se envolvían como, peor aún, por acciones que son <form> independientes
   (bloques, siempre se apilan verticalmente sin esto) cuando cada una
   necesita su propia action/confirm(). white-space:nowrap fuerza una sola
   línea para el texto/botones inline; form{display:inline-flex} hace que
   los <form> se comporten igual que un <button>/<a> suelto (.btn ya es
   inline-flex) en vez de apilarse como bloques. IMPORTANTE: nunca poner
   display:flex directamente en el propio <td> -- eso le quita su
   comportamiento de celda de tabla (dejar de participar en el cálculo de
   altura de la fila y en border-collapse), descuadrando el borde inferior
   respecto al resto de la fila (hallazgo real, visto en producción).
   .table-wrap ya tiene overflow-x:auto como red de seguridad, así que
   forzar una sola línea aquí es seguro: en pantallas estrechas se ve
   completa haciendo scroll lateral en vez de partida. */
.data-table .compact { white-space: nowrap; }
.data-table .compact form { display: inline-flex; vertical-align: middle; }
/* Columna de texto libre largo (asunto de correo, mensaje...) sin acotar
   dejaba que el layout automático de la tabla le diera todo el ancho que
   pidiera, empujando el resto de columnas (incluidas las acciones) fuera de
   la vista y forzando scroll lateral incluso en pantallas anchas -- ver
   correo/por-pena.blade.php y correo/global.blade.php. El texto completo
   sigue disponible en "Ver" (o al pasar el ratón, vía title). */
.col-truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-flex; border-radius: 999px; padding: 5px 9px; font-weight: 850; font-size: .82rem; }
.badge-success { color: var(--success); background: #e8f6ef; }
.badge-info { color: var(--primary-dark); background: var(--primary-soft); }
.badge-danger { color: var(--danger); background: #fbe7e6; }
.badge-accent { color: var(--accent-dark); background: var(--accent-soft); }
.empty-state { color: var(--muted); text-align: center !important; padding: 24px !important; }
.progress-bar { width: 100%; height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 999px; transition: width .2s ease; }
.alert { border-radius: 14px; padding: 13px 15px; margin-bottom: 18px; border: 1px solid rgba(31, 157, 85, .16); }
.alert-success { background: #e8f6ef; color: #115f3c; }
.alert-danger { background: #fff0f1; color: #9a1c2a; }
.alert-info { background: var(--primary-soft); color: var(--primary-dark); }
.alert ul { margin-bottom: 0; }
.timeline { display: grid; gap: 10px; color: var(--muted); }
.danger-zone { border-color: #f1bdc4; }
.mock-modal { border: 1px solid var(--border); border-radius: 16px; padding: 16px; background: #fafdfb; display: grid; gap: 12px; }
.muted { color: var(--muted); }
/* Un <a> normal hereda color/decoración del padre (ver "a { color: inherit;
   text-decoration: none; }" arriba) -- dentro de un párrafo .muted queda
   visualmente idéntico al texto de alrededor, indistinguible como enlace
   (hallazgo real del usuario probando Peña > Configuración en producción). */
.muted a { color: var(--primary-dark); font-weight: 700; text-decoration: underline; }
.muted a:hover { color: var(--primary); }

/* Mismo hallazgo que .muted a, esta vez dentro de un check-row (el enlace al
   "Recordatorio de repetición de juegos" desde Correo/Push/Telegram): sin
   esto, hereda color: var(--muted) del propio .check-row y queda igual de
   indistinguible como enlace que el texto de alrededor. */
.check-row a { color: var(--primary-dark); font-weight: 700; text-decoration: underline; }
.check-row a:hover { color: var(--primary); }

.manual-shot { margin-top: 12px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.manual-shot img { display: block; width: 100%; height: auto; }
.manual-shot-pending { background: var(--panel-soft); }
.manual-shot-placeholder { display: grid; justify-items: center; gap: 4px; padding: 28px 16px; color: var(--muted); text-align: center; }
.manual-shot-placeholder span { font-size: 1.6rem; }
.manual-shot-placeholder code { font-size: .78rem; }

/* max-height + overflow-y siempre activos (no solo en el @media de abajo):
   un aviso con mensaje largo, muchos destinatarios y adjuntos puede salirse
   de pantalla también en tablet/portátil de poca altura, no solo en móvil. */
.app-modal { border: none; border-radius: var(--radius); padding: 22px; width: min(480px, 92vw); max-height: min(560px, 84vh); overflow-y: auto; box-shadow: var(--shadow-strong); background: var(--panel); color: var(--text); }
.app-modal::backdrop { background: rgba(8, 24, 14, .45); }
.app-modal h3 { margin: 0 0 4px; }
.app-modal .modal-summary { background: var(--panel-soft); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.app-modal .modal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

.login-body {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px;
    /* Pantalla a sangre completa (viewport-fit=cover) — igual que la topbar,
       necesita hueco para el notch/isla arriba y la barra de gestos abajo. */
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    background:
        radial-gradient(circle at 18% 14%, rgba(62, 218, 124, .32), transparent 28rem),
        radial-gradient(circle at 85% 85%, rgba(196, 147, 59, .12), transparent 30rem),
        linear-gradient(135deg, #0b1710, #173a26 48%, #edf5ea 48%, #f7faf6);
}
.login-shell { width: min(980px, 100%); display: grid; grid-template-columns: 1.08fr .92fr; background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.52); border-radius: 30px; box-shadow: var(--shadow-strong); overflow: hidden; }
.login-hero { position: relative; min-height: 580px; padding: 42px; display: flex; flex-direction: column; justify-content: flex-end; color: #f3fff6; background: linear-gradient(180deg, rgba(6,32,17,.20), rgba(6,32,17,.92)), radial-gradient(circle at top, rgba(67,217,123,.36), transparent 26rem), radial-gradient(circle at 85% 8%, rgba(196,147,59,.12), transparent 18rem), #0c2114; }
.login-orb { position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(84,225,132,.18); filter: blur(2px); }
.login-logo-large { width: 142px; height: 142px; border-radius: 34px; }
.login-kicker { color: #d7a545; text-shadow: 0 10px 34px rgba(215,165,69,.42); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.45rem, 5.2vw, 4.15rem); font-style: italic; font-weight: 800; letter-spacing: .025em; line-height: .96; text-transform: none; max-width: 420px; }
.login-card { background: rgba(255,255,255,.96); padding: 42px; display: flex; flex-direction: column; justify-content: center; }
.login-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.login-brand-row .brand-logo { width: 56px; height: 56px; border-radius: 17px; }
.login-brand-row strong { display: block; font-size: 1.45rem; font-weight: 950; letter-spacing: -.05em; }
.login-brand-row span { color: var(--accent-dark); font-weight: 800; }
.login-title-block h2 { font-size: clamp(1.65rem, 3vw, 2.1rem); margin-bottom: 8px; }
.check-row { display: flex; gap: 10px; align-items: center; color: var(--muted); font-weight: 700; }
.install-link { align-self: center; margin-top: 20px; }
/* Oculto cuando la PWA ya está instalada (abierta a pantalla completa) — el
   enlace solo tiene sentido para quien todavía la ve en el navegador normal. */
@media (display-mode: standalone) {
    .install-link { display: none; }
}
.check-row input { width: auto; }

.account-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; }
.account-avatar { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(135deg, var(--primary), #39bd72); color: #fff; font-size: 1.55rem; font-weight: 950; box-shadow: 0 14px 32px rgba(31,157,85,.22); }
.account-hero-copy h2 { margin-bottom: 4px; font-size: clamp(1.35rem, 2.3vw, 1.8rem); }
.account-login-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 999px; padding: 8px 12px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 850; white-space: nowrap; }
.link-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; border-radius: 999px; padding: 8px 16px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 850; white-space: nowrap; text-decoration: none; transition: filter .12s ease; }
.link-pill:hover, .link-pill:active { filter: brightness(.96); }

.login-footer, .app-footer { display: flex; justify-content: center; align-items: center; gap: 28px; }
.login-footer a, .app-footer a { color: var(--muted); font-size: 1rem; font-weight: 800; text-decoration: none; }
.login-footer a:hover, .app-footer a:hover { color: var(--primary-dark); text-decoration: underline; }
.footer-version { color: var(--muted); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1rem; font-weight: 700; opacity: .6; }
.app-footer {
    width: min(1180px, 94vw);
    margin: 0 auto;
    padding: 18px 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
}
.export-inline summary { list-style: none; cursor: pointer; }
.export-inline summary::-webkit-details-marker { display: none; }
.export-inline[open] summary { margin-bottom: 10px; }
.export-inline form { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--panel-soft); }
.account-layout { align-items: start; }
.account-card { overflow: visible; }
.account-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.account-form-grid .span-2 { grid-column: 1 / -1; }
.account-readonly input { background: var(--panel-soft); color: var(--muted); font-weight: 850; }
.account-readonly small { color: var(--muted); font-size: .88rem; font-weight: 750; }
.account-password-note { border: 1px solid var(--border); border-radius: 14px; padding: 11px 13px; background: rgba(229,246,235,.72); color: var(--primary-dark); font-weight: 800; }
.account-table-wrap { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 14px; }
.account-table { min-width: 760px; }

@media (max-width: 1040px) {
    .app-topbar { grid-template-columns: 1fr; }
    .brand { min-width: 0; }
    .top-nav { justify-content: flex-start; }
    .topbar-actions { justify-content: flex-end; }
    .two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .login-body {
        padding: clamp(18px, 7vw, 32px);
        padding-top: calc(clamp(18px, 7vw, 32px) + env(safe-area-inset-top, 0px));
        padding-bottom: calc(clamp(18px, 7vw, 32px) + env(safe-area-inset-bottom, 0px));
        background:
            radial-gradient(circle at 50% 0, rgba(52, 211, 117, .28), transparent 17rem),
            radial-gradient(circle at 88% 8%, rgba(196, 147, 59, .10), transparent 15rem),
            linear-gradient(180deg, #0d2416 0, #143822 34%, #f3f8f2 34%, #f7faf6 100%);
    }
    .login-shell { width: min(100%, 430px); grid-template-columns: 1fr; background: rgba(255,255,255,.96); border-radius: 28px; }
    .login-hero { display: none; }
    .login-card { padding: 28px; min-width: 0; }
    /* La frase larga del pill de instalación no cabía en una línea en
       móviles estrechos — al ser inline-flex con nowrap, forzaba el ancho
       mínimo de toda la tarjeta por encima del viewport, y como
       .login-shell tiene overflow:hidden el resto del contenido (campos,
       botón) se veía recortado en vez de desbordar visiblemente. */
    .install-link { white-space: normal; text-align: center; line-height: 1.3; }
    .login-brand-row { margin-bottom: 22px; }
    .login-brand-row .brand-logo { width: 50px; height: 50px; border-radius: 15px; }
    .login-title-block h2 { font-size: clamp(1.8rem, 8vw, 2.25rem); }
    .login-logo-large { width: 96px; height: 96px; border-radius: 24px; }
    .login-kicker { font-size: clamp(1.75rem, 9vw, 2.65rem); letter-spacing: .018em; max-width: 290px; }
    .form-stack { gap: 16px; }
    .login-card .field input, .login-card .field select, .login-card .field textarea { min-height: 48px; font-size: 1rem; }
    .check-row { align-items: flex-start; line-height: 1.25; }
    .check-row input { margin-top: 3px; }
    .login-card .btn { min-height: 46px; }
    .main-area { width: min(100% - 28px, 1180px); padding-top: 18px; }
    .cards-grid, .two-cols, .filters, .search-module, .app-modal .modal-meta { grid-template-columns: 1fr; }
    .section-header, .actions-row-split { flex-direction: column; align-items: flex-start; flex-wrap: wrap; }
    .actions-row-split .btn { width: 100%; }
    .search-count { justify-self: end; }
    .account-hero { grid-template-columns: 1fr; align-items: start; }
    .account-avatar { width: 54px; height: 54px; border-radius: 16px; }
    .account-form-grid { grid-template-columns: 1fr; }
    .account-form-grid .span-2 { grid-column: auto; }
    .account-table { min-width: 680px; }
}

@media (max-width: 560px) {
    .app-topbar { padding: 12px; }
    .brand-logo { width: 42px; height: 42px; }
    .top-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    /* Con un número impar de enlaces (p.ej. admin de peña: Panel+Peña+Lotería,
       3 en total) el último quedaba solo en su fila, ocupando solo la mitad
       izquierda y dejando un hueco vacío a la derecha. Este selector solo
       coincide cuando el último hijo cae en posición impar (1, 3, 5...), que
       es justo cuando queda solo en la última fila de una rejilla de 2
       columnas — con un número par de enlaces no coincide y no cambia nada. */
    .top-nav > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
    /* position:static (en vez de relative, ver regla base más arriba): el
       menú desplegable, al ser absolute, pasa a anclarse al .app-topbar
       (position:sticky, el siguiente ancestro posicionado) en vez de a su
       propio .nav-dropdown -- este último solo ocupa la mitad del ancho en
       la rejilla de 2 columnas de aquí abajo, así que "Peña"/"Sistema" (2ª
       columna) desbordaban el borde derecho de la pantalla en cualquier
       móvil real (confirmado con Playwright a 320-412px de ancho, con
       overflow horizontal genuino, no solo un recorte visual). Anclado al
       topbar completo, el menú siempre cabe con margen a ambos lados.
       "Lotería" (1ª columna) no cambia de aspecto, ya encajaba. */
    .nav-dropdown { width: 100%; position: static; }
    .nav-link { border-radius: 12px; width: 100%; }
    .nav-menu { left: 0; right: auto; transform: translateY(4px); width: min(260px, 90vw); }
    .nav-dropdown[open] .nav-menu, .nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu { transform: translateY(0); }
    .card { padding: 16px; border-radius: 16px; }
    .card::before { left: 14px; right: 14px; }
    .actions-row { width: 100%; }
    .actions-row .btn { flex: 1; }
    .topbar-actions { width: 100%; justify-content: flex-end; }
    .account-menu { max-width: calc(100vw - 24px); }
    .login-body { padding: 14px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
    .login-shell { border-radius: 24px; }
    .login-card { padding: 24px 20px; }
    .login-brand-row strong { font-size: 1.35rem; }
    .login-brand-row span { font-size: .95rem; }
}

@media (max-width: 380px) {
    .login-card { padding: 22px 18px; }
    .login-title-block h2 { font-size: 1.75rem; }
    .login-brand-row { gap: 10px; }
}