/* ===========================
   3dedos — Panel CSS
   =========================== */

/* ---- VARIABLES ---- */
:root {
    --verde-oscuro: #315f1b;
    --verde-medio: #4f9722;
    --verde-claro: #72b53a;
    --verde-suave: #eef7e8;
    --verde-hover: #f4f9ef;
    --negro-suave: #1f2937;
    --gris-texto: #6b7280;
    --gris-claro: #f9fafb;
    --gris-borde: #e5e7eb;
    --blanco: #ffffff;
    --rojo: #dc2626;
    --rojo-suave: #fee2e2;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radius: 8px;
    --radius-lg: 12px;
    --transition: all 0.2s ease;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* ---- RESET / ANTI-DESBORDE ----
   Sin esto, cualquier elemento con padding + ancho fijo o en % se sale
   de su contenedor (la causa más común de "cosas que se salen" en mobile). */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Cualquier texto largo sin espacios (emails, links, DNIs pegados) no debe
   forzar el ancho de tarjetas, celdas de tabla o inputs */
.cd-card, .cd-form-group, td, th, .cd-stat-card {
    min-width: 0;
    overflow-wrap: break-word;
}

input, select, textarea {
    max-width: 100%;
    min-width: 0;
}

/* ---- GRIDS DEL DASHBOARD (gráficos, KPIs, resumen) ---- */
.cd-dash-grid {
    display: grid;
    gap: 24px;
    margin-bottom: 30px;
}

.cd-dash-grid--450 { grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); }
.cd-dash-grid--400 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.cd-dash-grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.cd-dash-grid--200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 0; }

/* ---- LAYOUT ---- */
.cd-layout {
    display: flex;
    min-height: 100vh;
}

/* ---- SIDEBAR ---- */
.cd-sidebar {
    width: 260px;
    min-height: 100vh;
    background: var(--verde-oscuro);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transition: transform 0.3s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}

.cd-sidebar__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 28px 24px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cd-logo-icon {
    background: var(--verde-claro);
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.cd-logo-text {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.cd-logo-sub {
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    font-weight: 400;
    display: block;
}

.cd-sidebar-logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    padding: 3px;
    flex-shrink: 0;
}

/* Nav */
.cd-sidebar__nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cd-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    color: rgba(255,255,255,0.6);
    border-radius: var(--radius);
    transition: var(--transition);
    border-left: 3px solid transparent;
    font-size: 14px;
    font-weight: 500;
}

/* ── Grupos desplegables del menú (Mi Equipo, Jugadores, Herramientas) ── */
.cd-nav-grupo__header {
    width: 100%;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.cd-nav-grupo__chevron {
    margin-left: auto;
    display: flex;
    transition: transform 0.18s ease;
    opacity: 0.6;
}
.cd-nav-grupo--abierto .cd-nav-grupo__chevron {
    transform: rotate(90deg);
}
.cd-nav-grupo__items {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-left: 14px;
    margin: 2px 0 4px;
}
.cd-nav-grupo--abierto .cd-nav-grupo__items {
    display: flex;
}
.cd-nav-subitem {
    padding: 9px 14px 9px 24px;
    font-size: 13.5px;
    position: relative;
}
.cd-nav-subitem::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    transform: translateY(-50%);
}

.cd-nav-item:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
}

.cd-nav-item.active {
    color: #fff;
    background: var(--verde-medio);
    border-left-color: var(--verde-claro);
    font-weight: 600;
}

.cd-nav-icon {
    width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cd-nav-icon svg {
    display: block;
}

/* ── Badge de pendientes en el menú (ej. Novedades) ─────────────── */
.cd-nav-badge {
    margin-left: auto;
    background: #e0524f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
    animation: cd-nav-badge-pulso 2s ease-in-out infinite;
}
@keyframes cd-nav-badge-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 82, 79, 0.55); }
    50%      { box-shadow: 0 0 0 4px rgba(224, 82, 79, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .cd-nav-badge { animation: none; }
}

/* ---- Sistema de íconos SVG (cd_icon() en PHP) ----
   stroke="currentColor" hereda el color del texto que lo rodea, así que
   estos SVG cambian de color solos con hover/active/badges sin tocar CSS
   por cada uno. Solo dan estilos utilitarios opcionales acá. */
.cd-icon {
    vertical-align: middle;
    flex-shrink: 0;
}

.cd-icon--verde   { color: var(--verde-medio); }
.cd-icon--rojo    { color: var(--rojo); }
.cd-icon--naranja { color: #92400e; }
.cd-icon--gris    { color: var(--gris-texto); }

/* Footer sidebar */
.cd-sidebar__footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-sidebar__footer-actions {
    display: flex;
    gap: 8px;
}

.cd-sidebar__footer-actions .cd-logout,
.cd-sidebar__footer-actions .cd-mi-cuenta {
    flex: 1;
    text-align: center;
}

.cd-mi-cuenta {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    transition: var(--transition);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.cd-mi-cuenta:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.cd-soporte-link {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 7px;
    width: max-content;
    max-width: 100%;
    min-height: 32px;
    padding: 6px 12px;
    margin: 0 auto 10px;
    background: rgba(37,211,102,.11);
    color: #35dc72;
    border: 1px solid rgba(37,211,102,.34);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transition: var(--transition);
}
.cd-soporte-link:hover {
    background: rgba(37,211,102,.20);
    border-color: rgba(37,211,102,.72);
    color: #52e388;
    transform: translateY(-1px);
}
.cd-soporte-link .cd-whatsapp-icon { flex: 0 0 auto; }

.cd-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cd-user-avatar {
    width: 34px;
    height: 34px;
    background: var(--verde-claro);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.cd-user-name {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: block;
}

.cd-user-role {
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    display: block;
}

.cd-logout {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    transition: var(--transition);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.cd-logout:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* ---- CONTENIDO ---- */
.cd-content {
    margin-left: 260px;
    flex: 1;
    min-height: 100vh;
    background: var(--gris-claro);
}

.cd-content__inner {
    padding: 36px 40px;
    max-width: 1200px;
}

/* ---- TOPBAR (mobile) ---- */
.cd-topbar {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--blanco);
    color: var(--negro-suave);
    padding: 10px 56px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-bottom: 1px solid var(--gris-borde);
    text-align: center;
}

.cd-topbar__logo {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    object-fit: cover;
    display: block;
}

.cd-topbar__nombre {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ---- LIGHTBOX DE FOTO ---- */
.cd-foto-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    animation: cd-foto-fade .2s ease;
}
@keyframes cd-foto-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cd-foto-lightbox {
    position: relative;
    max-width: min(90vw, 480px);
    max-height: 85vh;
}
.cd-foto-lightbox__img {
    display: block;
    width: 100%;
    max-height: 85vh;
    border-radius: 16px;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.cd-foto-lightbox__cerrar {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #1f2937;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.cd-foto-lightbox__cerrar:hover {
    background: #f3f4f6;
}

/* ---- PAGE HEADER ---- */
.cd-page-header {
    margin-bottom: 32px;
}

.cd-page-header__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cd-page-header__top > * {
    min-width: 0;
}

.cd-page-header h1 {
    font-size: 26px;
    font-weight: 800;
    color: var(--negro-suave);
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.cd-page-header p {
    color: var(--gris-texto);
    font-size: 14px;
}

.cd-page-header p a {
    color: var(--verde-medio);
    font-weight: 500;
}

.cd-page-header p a:hover {
    text-decoration: underline;
}

/* ---- STATS GRID (version profesional/compacta) ---- */
.cd-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1px;
    margin-bottom: 32px;
    background: var(--gris-borde);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cd-stat-card {
    background: var(--blanco);
    box-shadow: none;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: none;
    border-radius: 0;
    transition: background-color 0.15s ease;
    position: relative;
    overflow: hidden;
}

.cd-stat-card::before {
    content: none;
}

.cd-stat-card:hover {
    box-shadow: none;
    transform: none;
    background: #fafbfa;
}

.cd-stat-icon {
    display: block;
    opacity: 0.45;
    order: 0;
    line-height: 1;
}
.cd-stat-icon svg { width: 20px; height: 20px; }

.cd-stat-number {
    font-size: 26px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.1;
    letter-spacing: -0.02em;
    order: 2;
    font-variant-numeric: tabular-nums;
}

.cd-stat-label {
    font-size: 12px;
    color: var(--gris-texto);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    order: 1;
}

/* ---- BOTONES (sistema único: todo el resto del archivo delega acá) ---- */
.cd-btn,
.cd-btn-primary,
.cd-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    line-height: 1;
    text-decoration: none;
}

.cd-btn--primary,
.cd-btn-primary {
    background: var(--verde-medio);
    color: #fff;
    box-shadow: 0 1px 2px rgba(26,71,49,0.15);
}
.cd-btn--primary:hover,
.cd-btn-primary:hover {
    background: var(--verde-oscuro);
    color: #fff;
    box-shadow: 0 2px 6px rgba(26,71,49,0.25);
}

.cd-btn--secondary,
.cd-btn-secondary {
    background: var(--blanco);
    color: var(--negro-suave);
    border: 1.5px solid var(--gris-borde);
}
.cd-btn--secondary:hover,
.cd-btn-secondary:hover {
    background: var(--verde-suave);
    border-color: var(--verde-claro);
    color: var(--verde-oscuro);
}

.cd-btn--ghost {
    background: transparent;
    color: var(--gris-texto);
    border: 1.5px solid var(--gris-borde);
}
.cd-btn--ghost:hover {
    background: var(--gris-claro);
    color: var(--negro-suave);
}

.cd-btn--azul {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 1px 2px rgba(37,99,235,0.2);
}
.cd-btn--azul:hover {
    background: #1d4ed8;
    color: #fff;
}

.cd-btn--warning {
    background: #f59e0b;
    color: #fff;
    box-shadow: 0 1px 2px rgba(245,158,11,0.25);
}
.cd-btn--warning:hover {
    background: #d97706;
    color: #fff;
}

.cd-btn--morado {
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 1px 2px rgba(124,58,237,0.2);
}
.cd-btn--morado:hover {
    background: #6d28d9;
    color: #fff;
}

.cd-btn--danger {
    background: transparent;
    color: #c0392b;
    border: 1.5px solid #c0392b;
}
.cd-btn--danger:hover {
    background: #fef2f2;
    border-color: #a93226;
    color: #a93226;
}

/* Spinner chico para botones en carga — blanco por default (para
   verse bien arriba de un botón de color), se puede pisar el color
   con un style inline puntual si hace falta mostrarlo sobre blanco. */
.cd-loading {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: cd-spin 0.8s linear infinite;
    vertical-align: middle;
}
@keyframes cd-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cd-btn--sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

.cd-btn:disabled,
.cd-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---- ALERTAS ---- */
.cd-alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cd-alert--success {
    background: var(--verde-suave);
    color: var(--verde-oscuro);
    border: 1px solid #b7e4ca;
}

.cd-alert--success::before { content: '✅'; }

.cd-alert--error {
    background: var(--rojo-suave);
    color: var(--rojo);
    border: 1px solid #fecaca;
}

.cd-alert--error::before { content: '❌'; }

.cd-alert--warning {
    background: #fff7ed;
    color: #9a5b0f;
    border: 1px solid #fdba74;
}

.cd-alert--warning::before { content: '⏳'; }

/* ---- TABLA ---- */
.cd-table-wrap {
    background: var(--blanco);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    overflow-x: auto;
    border: 1px solid var(--gris-borde);
}

.cd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cd-table thead {
    background: var(--verde-oscuro);
}

.cd-table th {
    color: rgba(255,255,255,0.85);
    padding: 14px 18px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.cd-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--gris-borde);
    color: var(--negro-suave);
    vertical-align: middle;
}

.cd-table tbody tr:last-child td {
    border-bottom: none;
}

.cd-table tbody tr:hover {
    background: var(--verde-hover);
}

.cd-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ---- CARD ---- */
.cd-card {
    background: var(--blanco);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 36px;
    border: 1px solid var(--gris-borde);
}

/* ---- FORMULARIO ---- */
.cd-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 28px;
}

.cd-form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    /* Sin esto, cuando este grupo (label + input/select) vive adentro
       de un formulario de filtro con "display:flex" (un patrón muy
       repetido en todo el sistema — División/Período, fechas, etc.),
       no se achica de su ancho natural — el mismo problema de fondo
       que el email largo o el botón largo: los ítems flex no ceden
       espacio solos. Acá se repetía con selects de nombres largos
       ("— Todas las categorías —", nombres de división) empujando la
       fila entera afuera de la pantalla en mobile. */
    min-width: 0;
}

.cd-form-group--full {
    grid-column: 1 / -1;
}

.cd-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--negro-suave);
    letter-spacing: 0.2px;
}

.cd-form-group input,
.cd-form-group select,
.cd-form-group textarea {
    width: 100%;
    min-width: 0;
    padding: 11px 14px;
    border: 1.5px solid var(--gris-borde);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--negro-suave);
    background: #fff;
    transition: var(--transition);
    font-family: var(--font);
    outline: none;
}

gmp-place-autocomplete {
    width: 100%;
    display: block;
}

/* ── Selector de jugadores en Cargos Especiales ──────────────────── */
.cd-ce-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.cd-ce-search-wrap {
    position: relative;
    flex: 1;
    min-width: 240px;
}
.cd-ce-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gris-texto, #6b7280);
    display: flex;
    pointer-events: none;
}
.cd-ce-search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1.5px solid var(--verde-claro, #72b53a);
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
    transition: var(--transition);
}
.cd-ce-search-input:focus {
    outline: none;
    border-color: var(--verde-medio, #4f9722);
    box-shadow: 0 0 0 3px var(--verde-suave, #eef7e8);
}
.cd-ce-toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.cd-ce-lista {
    max-height: 440px;
    overflow-y: auto;
    border: 1.5px solid var(--gris-borde);
    border-radius: 12px;
    padding: 8px;
    background: #fafbfa;
}
.cd-ce-grupo {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.cd-ce-grupo:last-child { margin-bottom: 0; }
.cd-ce-grupo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gris-borde);
}
.cd-ce-grupo-header strong {
    font-size: 12.5px;
    color: var(--verde-oscuro);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cd-ce-grupo-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 12px;
}
.cd-ce-jugador-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    font-size: 13.5px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.cd-ce-jugador-row:hover {
    background: var(--gris-claro, #f4f6f5);
}
.cd-ce-jugador-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--verde-oscuro);
}

.cd-form-group input:focus,
.cd-form-group select:focus,
.cd-form-group textarea:focus {
    border-color: var(--verde-claro);
    box-shadow: 0 0 0 3px rgba(60,171,110,0.12);
}

.cd-form-group input::placeholder {
    color: #b0bdb7;
}

.cd-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid var(--gris-borde);
}

/* ---- FILTROS ---- */
.cd-filters {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cd-filters select {
    padding: 9px 14px;
    border: 1.5px solid var(--gris-borde);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--negro-suave);
    background: var(--blanco);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font);
    outline: none;
}

.cd-filters select:focus {
    border-color: var(--verde-claro);
}

/* Mismo criterio que adentro de un modal — cualquier input suelto
   dentro de una barra de filtros, sin necesidad de ponerle una clase
   ni un style inline cada vez, así ningún campo se ve "pelado". */
.cd-filters input[type="text"],
.cd-filters input[type="date"],
.cd-filters input[type="month"],
.cd-filters input[type="number"],
.cd-filters input[type="email"] {
    padding: 9px 14px;
    border: 1.5px solid var(--gris-borde);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--negro-suave);
    background: var(--blanco);
    font-family: var(--font);
    outline: none;
    transition: var(--transition);
}
.cd-filters input[type="text"]:focus,
.cd-filters input[type="date"]:focus,
.cd-filters input[type="month"]:focus,
.cd-filters input[type="number"]:focus,
.cd-filters input[type="email"]:focus {
    border-color: var(--verde-claro);
}

/* ---- CHECKBOXES ---- */
.cd-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cd-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gris-claro);
    border: 1.5px solid var(--gris-borde);
    border-radius: var(--radius);
    padding: 9px 14px;
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
    user-select: none;
}

.cd-checkbox:hover {
    border-color: var(--verde-claro);
    background: var(--verde-suave);
}

.cd-checkbox input[type="checkbox"] {
    accent-color: var(--verde-medio);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.cd-checkbox input[type="checkbox"]:checked + span {
    color: var(--verde-oscuro);
    font-weight: 600;
}

/* ---- CITADOS (con Titular/Suplente) ---- */
.cd-citados-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.cd-citado-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--gris-claro);
    border: 1.5px solid var(--gris-borde);
    border-radius: var(--radius);
    padding: 8px 12px;
}
.cd-citado-row__nombre {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.cd-citado-row__nombre input[type="checkbox"] {
    accent-color: var(--verde-medio);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.cd-citado-row__nombre span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cd-citado-row__rol {
    flex-shrink: 0;
    font-size: 13px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--gris-borde);
    background: #fff;
}
.cd-citado-row__rol:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- EMPTY STATE ---- */
.cd-empty {
    text-align: center;
    padding: 80px 20px;
    background: var(--blanco);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gris-borde);
}

.cd-empty span {
    display: block;
    margin-bottom: 16px;
    color: var(--gris-texto);
    opacity: 0.55;
}

.cd-empty span svg {
    width: 40px;
    height: 40px;
}

.cd-empty p {
    font-size: 16px;
    color: var(--gris-texto);
    margin-bottom: 24px;
}

/* ---- HELP TEXT ---- */
.cd-help {
    font-size: 13px;
    color: var(--gris-texto);
    font-style: italic;
}

/* ---- BADGE ---- */
.cd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.cd-badge--verde {
    background: var(--verde-suave);
    color: var(--verde-oscuro);
}

.cd-badge--gris {
    background: var(--gris-claro);
    color: var(--gris-texto);
}

.cd-badge--naranja {
    background: #fff7ed;
    color: #c2410c;
}

/* ---- CAJA: tabs ---- */
/* Formulario "Nuevo movimiento" en Caja → Otros Movimientos — las
   columnas viven acá (no en el estilo en línea del HTML) para que la
   regla de mobile más abajo, que las apila en una sola columna,
   pueda pisarlas de verdad. Un grid-template-columns puesto directo
   en el style="" del elemento gana siempre contra cualquier CSS
   externo, sin importar la especificidad — por eso hay que sacarlo
   de ahí para poder cambiarlo según el ancho de pantalla. */
.cd-caja-mov-tipo {
    width: fit-content;
    max-width: 100%;
}

.cd-mov-grid-2col {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.cd-mov-grid-4col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Tarjeta de cada movimiento en el listado — mismo criterio que el
   formulario de arriba: nada de anchos fijos en el style="" del HTML,
   todo acá, para que la versión de mobile más abajo pueda pisarlo. */
.cd-caja-mov-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-left: 3px solid;
}

.cd-caja-mov-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.cd-caja-mov-item__contenido {
    flex: 1 1 auto;
    min-width: 0;
}

.cd-caja-mov-item__resumen {
    flex: 0 0 auto;
    min-width: 0;
    text-align: right;
}

.cd-caja-mov-item__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
}

.cd-caja-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cd-caja-tabs .cd-btn {
    flex: 1 1 auto;
    min-width: 150px;
    text-align: center;
    /* La clase base .cd-btn fuerza white-space:nowrap (correcto para
       botones cortos como "Guardar"), pero acá hay etiquetas largas
       ("Cuotas Vencidas / Planes de Pago") que con eso se vuelven más
       anchas que la pantalla del celular — rompiendo el acomodo de
       TODAS las solapas de al lado, no solo la propia. Se le permite
       bajar de línea en vez de forzar el ancho. */
    white-space: normal;
    /* El botón en sí ya es un contenedor flex por dentro (ícono +
       texto, ver .cd-btn más arriba) — sin esto, el texto largo sigue
       sin achicarse por más que se permita el salto de línea arriba,
       por la misma razón que un email largo no cortaba solo en una
       celda de tabla: los ítems flex no se achican de su ancho
       natural salvo que se les diga explícitamente. */
    flex-wrap: wrap;
    row-gap: 2px;
}

.cd-caja-tabs .cd-caja-tab-texto {
    min-width: 0;
    overflow-wrap: break-word;
}

/* Misma idea que la de arriba, pero para cualquier botón suelto (no
   dentro de .cd-caja-tabs) que tenga una etiqueta larga — envolver el
   texto en <span class="cd-btn-texto-largo"> y combinarlo con
   white-space:normal + flex-wrap:wrap en el propio botón. */
.cd-btn-texto-largo {
    min-width: 0;
    overflow-wrap: break-word;
}

.cd-caja-tabs .cd-btn--secondary {
    background: var(--verde-suave);
    color: var(--verde-oscuro);
    border: 1.5px solid var(--verde-suave);
}
.cd-caja-tabs .cd-btn--secondary:hover {
    background: #dcf3e4;
    border-color: var(--verde-claro);
}

/* ---- Impresión de recibos: ocultar todo el chrome del panel ---- */
@media print {
    .cd-sidebar, .cd-topbar, .cd-hamburger, .cd-caja-tabs,
    .cd-recibo-no-imprimir {
        display: none !important;
    }
    .cd-content, .cd-content__inner {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ---- OVERLAY mobile ---- */
.cd-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
}

.cd-overlay.active {
    display: block;
}

/* ===========================
   ASISTENCIAS
   =========================== */

.cd-asistencia-card {
    background: var(--blanco);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gris-borde);
    box-shadow: var(--shadow-sm);
    margin-bottom: 28px;
    overflow: hidden;
}

.cd-asistencia-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gris-borde);
    flex-wrap: wrap;
    background: var(--verde-suave);
}

.cd-asistencia-card__header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--verde-oscuro);
    margin-bottom: 4px;
}

.cd-asistencia-meta {
    font-size: 12px;
    color: var(--gris-texto);
}

.cd-asistencia-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Badges de estado */
.cd-asis-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.cd-asis-badge--presente {
    background: #dcfce7;
    color: #166534;
}

.cd-asis-badge--ausente {
    background: #fee2e2;
    color: #dc2626;
}

.cd-asis-badge--justificado {
    background: #fef9c3;
    color: #854d0e;
}

.cd-asis-badge--tardanza {
    background: #ffedd5;
    color: #9a3412;
}

/* ===========================
   REPORTES (ARMONIZADO)
   =========================== */

.cd-section-header {
    margin-bottom: 28px;
}

.cd-section-header h2 {
    font-size: 26px;
    font-weight: 800;
    color: var(--negro-suave);
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.cd-section-header p {
    color: var(--gris-texto);
    font-size: 14px;
}

.cd-report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    background: var(--blanco);
    padding: 6px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gris-borde);
}

.cd-report-tab {
    flex: 1;
    min-width: 160px;
    padding: 12px 16px;
    text-align: center;
    color: var(--gris-texto);
    text-decoration: none;
    border-radius: var(--radius);
    transition: var(--transition);
    font-weight: 500;
    font-size: 14px;
}

.cd-report-tab:hover {
    background: var(--verde-suave);
    color: var(--verde-oscuro);
}

.cd-report-tab.active {
    background: var(--verde-oscuro);
    color: white;
}

.cd-filtros-card {
    background: var(--blanco);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid var(--gris-borde);
    box-shadow: var(--shadow-sm);
}

.cd-filtros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    align-items: end;
}

.cd-filtro-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cd-filtro-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--negro-suave);
}

.cd-filtro-group input,
.cd-filtro-group select {
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    border: 1.5px solid var(--gris-borde);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--negro-suave);
    background: var(--blanco);
    transition: var(--transition);
}

.cd-filtro-group input:focus,
.cd-filtro-group select:focus {
    border-color: var(--verde-claro);
    outline: none;
    box-shadow: 0 0 0 3px rgba(60,171,110,0.1);
}

.cd-filtro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cd-report-header {
    margin-bottom: 28px;
}

.cd-report-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--negro-suave);
    margin-bottom: 20px;
}

/* Stats para reportes - usando mismo estilo que dashboard */
.cd-report-header {
    overflow-x: hidden;
}

.cd-report-header .cd-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 0;
}

.cd-report-header .cd-stat-card {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    padding: 16px 12px;
    text-align: center;
    min-width: 0;
}

.cd-report-header .cd-stat-card::before {
    background: var(--verde-claro);
}

.cd-report-header .cd-stat-value {
    font-size: 26px;
    color: var(--verde-oscuro);
    font-weight: 700;
}

.cd-report-header .cd-stat-label {
    color: var(--gris-texto);
    font-size: 12px;
}

/* Tabla de reportes */
.cd-table-responsive {
    overflow-x: auto;
    background: var(--blanco);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gris-borde);
}

.cd-table-report {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cd-table-report thead {
    background: var(--verde-oscuro);
}

.cd-table-report th {
    color: rgba(255,255,255,0.85);
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cd-table-report td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gris-borde);
    color: var(--negro-suave);
}

.cd-table-report tbody tr:hover {
    background: var(--verde-hover);
}

.cd-table-report tbody tr:last-child td {
    border-bottom: none;
}

/* Badges para estados */
.cd-table-report .cd-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.cd-table-report .badge-success {
    background: #dcfce7;
    color: #166534;
}

.cd-table-report .badge-danger {
    background: #fee2e2;
    color: #dc2626;
}

.cd-table-report .badge-warning {
    background: #fef9c3;
    color: #854d0e;
}

.cd-table-report .badge-info {
    background: #dbeafe;
    color: #1e40af;
}

.cd-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--blanco);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gris-borde);
}

.cd-empty-state span {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.cd-empty-state p {
    color: var(--gris-texto);
    font-size: 15px;
}

/* ===========================
   SISTEMA — TABS
   =========================== */
.cd-sistema-tabs {
    display: flex;
    gap: 4px;
    margin-top: 24px;
    background: var(--gris-claro);
    border-radius: var(--radius);
    padding: 4px;
    flex-wrap: wrap;
}

.cd-sistema-tab {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-texto);
    transition: var(--transition);
    white-space: nowrap;
}

.cd-sistema-tab:hover {
    color: var(--negro-suave);
    background: rgba(0,0,0,0.05);
}

.cd-sistema-tab.active {
    background: var(--blanco);
    color: var(--verde-oscuro);
    box-shadow: var(--shadow-sm);
}

/* Import info */
.cd-import-info {
    background: var(--verde-suave);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid var(--gris-borde);
}

.cd-import-info p {
    font-size: 13px;
    color: var(--negro-suave);
    margin-bottom: 10px;
    font-weight: 500;
}

.cd-import-cols {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cd-import-cols span {
    background: var(--verde-medio);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Preview */
.cd-import-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--negro-suave);
}

/* ===========================
   ADMIN ITEM
   =========================== */
.cd-admin-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--gris-claro);
    border-radius: var(--radius);
    border: 1px solid var(--gris-borde);
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.cd-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-info-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gris-texto);
}

.cd-info-valor {
    font-size: 14px;
    color: var(--negro-suave);
    font-weight: 500;
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 1024px) {
    .cd-content__inner {
        padding: 28px 28px;
    }
}

@media (max-width: 768px) {
    /* Formulario "Nuevo movimiento" en Caja → Otros Movimientos — con
       4 columnas fijas, "Método/Persona/N° factura/Fecha" se cortaba
       en la pantalla del celular. Apiladas una debajo de otra, igual
       que el resto de los formularios angostos de esta pantalla. */
    .cd-mov-grid-2col,
    .cd-mov-grid-4col {
        grid-template-columns: minmax(0, 1fr);
    }

    .cd-caja-mov-tipo {
        width: 100%;
    }

    .cd-caja-mov-tipo button {
        flex: 1 1 50%;
        min-width: 0;
    }

    /* La tarjeta de cada movimiento pasa a 2 filas en mobile: ícono +
       concepto arriba, monto + acciones abajo en su propia fila
       completa (en vez de quedar apretados al lado del ícono). */
    .cd-caja-mov-item {
        flex-wrap: wrap;
        align-items: center;
    }

    .cd-caja-mov-item__contenido {
        flex-basis: calc(100% - 46px);
    }

    .cd-caja-mov-item__resumen {
        display: flex;
        flex: 1 1 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid var(--gris-borde);
        text-align: left;
    }

    .cd-caja-mov-item__acciones {
        margin-top: 0;
    }

    .cd-hamburger {
        display: flex;
    }

    .cd-topbar {
        display: flex;
        align-items: center;
    }

    .cd-sidebar {
        transform: translateX(-100%);
        width: 280px;
    }

    .cd-sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .cd-content {
        margin-left: 0;
    }

    .cd-content__inner {
        padding: 20px 16px;
    }

    .cd-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .cd-stat-card {
        padding: 16px 14px;
    }

    .cd-stat-number {
        font-size: 22px;
    }

    .cd-form-grid {
        grid-template-columns: 1fr;
    }

    .cd-form-group--full {
        grid-column: 1;
    }

    .cd-card {
        padding: 20px 16px;
    }

    .cd-page-header h1 {
        font-size: 22px;
    }

    .cd-page-header__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .cd-table th,
    .cd-table td {
        padding: 11px 12px;
        font-size: 13px;
    }

    .cd-form-actions {
        flex-direction: column-reverse;
    }

    .cd-btn {
        width: 100%;
        justify-content: center;
    }

    .cd-btn--sm {
        width: auto;
    }

    .cd-table__actions {
        flex-direction: column;
        gap: 4px;
    }

    /* Reportes responsive */
    .cd-report-tabs {
        flex-direction: column;
        gap: 6px;
    }
    
    .cd-filtros-grid {
        grid-template-columns: 1fr;
    }
    
    .cd-filtro-actions {
        flex-direction: column;
    }
    
    .cd-filtro-actions button {
        width: 100%;
    }
    
    .cd-report-header .cd-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Grids del dashboard: en mobile, una sola columna (nada de minmax fijo) */
    .cd-dash-grid,
    .cd-dash-grid--450,
    .cd-dash-grid--400,
    .cd-dash-grid--300,
    .cd-dash-grid--200 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    /* En vez de confiar en el cálculo automático de auto-fit (que
       queda al límite justo con 2 tarjetas de monto grande — "Neto"
       terminaba cortado en algunos anchos reales de celular), se
       fuerza una sola columna directamente en mobile. */
    #caja-kpis-grid {
        grid-template-columns: 1fr;
    }

    .cd-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cd-filters {
        flex-direction: column;
    }

    .cd-filters select {
        width: 100%;
    }
    
    .cd-report-header .cd-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   TABLAS → TARJETAS en mobile
   =========================== */
@media (max-width: 768px) {

    .cd-table thead {
        display: none;
    }

    .cd-table,
    .cd-table tbody,
    .cd-table tr,
    .cd-table td {
        display: block;
        width: 100%;
    }

    .cd-table tbody tr {
        background: var(--blanco);
        border-radius: var(--radius);
        border: 1px solid var(--gris-borde);
        margin-bottom: 14px;
        padding: 16px;
        box-shadow: var(--shadow-sm);
        position: relative;
    }

    .cd-table tbody tr:hover {
        background: var(--verde-hover);
    }

    .cd-table td {
        /* Antes era "display:flex" — los ítems flex, por default, NO
           se achican por debajo del ancho natural de su contenido. Un
           email largo sin espacios (o un link, o un DNI pegado) no
           tiene ningún punto donde cortar solo, así que terminaba
           empujando el ancho de la celda — y con eso, el de toda la
           fila, la tabla, y la página entera — hacia afuera de la
           pantalla. Con grid + minmax(0, 1fr) en la segunda columna,
           se la obliga a respetar el ancho disponible sí o sí, y el
           texto largo corta ahí adentro en vez de desbordar. */
        display: grid;
        grid-template-columns: 90px minmax(0, 1fr);
        align-items: flex-start;
        gap: 8px;
        padding: 6px 0;
        border: none;
        font-size: 14px;
        overflow-wrap: break-word;
    }

    .cd-table td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--gris-texto);
        padding-top: 1px;
    }

    .cd-table td.cd-table__actions {
        /* Esta fila (los botones de acción) sí necesita comportarse
           como flex-wrap de verdad, no como la grilla de 2 columnas de
           arriba — se pisa la regla general a propósito acá. */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--gris-borde);
        gap: 8px;
    }

    .cd-table td.cd-table__actions::before {
        display: none;
    }

    .cd-table__actions .cd-btn--sm {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    .cd-table-wrap {
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: visible;
    }
    
    /* Tabla de reportes en mobile */
    .cd-table-report thead {
        display: none;
    }
    
    .cd-table-report tbody tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid var(--gris-borde);
        border-radius: var(--radius);
        padding: 12px;
    }
    
    .cd-table-report td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border: none;
    }
    
    .cd-table-report td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 11px;
        color: var(--gris-texto);
        text-transform: uppercase;
    }
}

/* Ajustes para asistencia en móvil */
@media (max-width: 768px) {
    .cd-asistencia-card__header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .cd-asistencia-stats {
        width: 100%;
    }
    
    .cd-admin-item {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* Badges adicionales */
.cd-badge.badge-secondary {
    background: #e5e7eb;
    color: #6b7280;
}

.cd-badge.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.cd-badge.badge-info {
    background: #dbeafe;
    color: #1e40af;
}

.cd-badge.badge-success {
    background: #d1fae5;
    color: #065f46;
}

.cd-badge.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

/* Hamburguesa */
.cd-hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    line-height: 1;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
}

.cd-hamburger svg {
    width: 20px;
    height: 20px;
    stroke: #1f2937;
}

/* Contenido con padding superior para no quedar encimado */
.cd-content__inner {
    padding: 28px 32px 40px;
    max-width: 1200px;
    margin-top: 0;
}
/* ===========================
   MODAL PARA MOVER JUGADORES - CENTRADO
   =========================== */

.cd-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.cd-modal-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

.cd-modal-btn--confirm {
    background: linear-gradient(135deg, #4f9722 0%, #72b53a 100%);
    color: white;
}

.cd-modal-btn--confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 122, 79, 0.3);
}

.cd-modal-btn--cancel {
    background: #f3f4f6;
    color: #6b7280;
}

.cd-modal-btn--cancel:hover {
    background: #e5e7eb;
}

/* Responsive para móvil */
@media (max-width: 768px) {
    .cd-hamburger {
        display: flex;
        top: 14px;
        left: 14px;
    }

    .cd-topbar {
        display: flex;
        align-items: center;
        padding: 16px 60px 20px 60px;
        font-size: 14px;
    }

    /* Espacio extra para que el contenido no quede debajo del menú */
    .cd-content__inner {
        padding: 34px 16px 80px;
        margin-top: 0;
    }
    
    /* Asegurar que el primer elemento tenga espacio */
    .cd-content__inner > :first-child {
        margin-top: 0;
        padding-top: 0;
    }
}

/* Para pantallas muy pequeñas */
@media (max-width: 480px) {
    .cd-content__inner {
        padding: 28px 14px 80px;
    }
}
/* ===========================
   TOPBAR MOBILE — antes había otro bloque acá que ponía el topbar en
   position:fixed con un padding-top calculado a mano en .cd-content para
   compensar. Eso se rompía apenas el topbar cambiaba de altura (por
   ejemplo, al cargar un logo de club) porque tapaba el contenido de
   abajo. Con sticky (ya definido en la regla base de .cd-topbar) el
   navegador reserva el espacio solo, sea cual sea la altura real.
   =========================== */
@media (max-width: 768px) {
    .cd-content__inner {
        padding: 34px 16px 80px;
        margin-top: 0;
    }

    .cd-content__inner > :first-child {
        margin-top: 0;
        padding-top: 0;
    }

    .cd-sidebar.open {
        z-index: 200;
    }
}

/* Para pantallas muy pequeñas (menos de 480px) */
@media (max-width: 480px) {
    .cd-topbar {
        padding: 10px 50px 10px 50px;
        font-size: 13px;
    }

    .cd-content__inner {
        padding: 28px 14px 80px;
    }
}

/* Ajuste específico para el dashboard en móvil */
@media (max-width: 768px) {
    .cd-page-header {
        margin-top: 0;
        padding-top: 0;
    }
    
    .cd-page-header h1 {
        font-size: 20px;
        margin-top: 0;
    }
    
    /* Las tarjetas de estadísticas no deben estar pegadas arriba */
    .cd-stats-grid {
        margin-top: 8px;
    }
}

.cd-notif-wrap {
    max-width: 1100px;
}

.cd-section-header {
    margin-bottom: 28px;
}
.cd-section-header h1 {
    font-size: 26px;
    font-weight: 800;
    color: var(--negro-suave);
    margin: 0 0 4px;
    letter-spacing: -0.3px;
}
.cd-section-header p {
    color: var(--gris-texto);
    margin: 0;
    font-size: 14px;
}

.cd-notif-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .cd-notif-layout {
        grid-template-columns: 1fr;
    }
}

.cd-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}
.cd-card__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--negro-suave);
}
.cd-card__sub {
    font-size: 13px;
    color: var(--gris-texto);
    margin: 0 0 20px;
}
.cd-card--stats {
    background: #f8fdf9;
    border-color: #d4edda;
}

.cd-form-group {
    margin-bottom: 18px;
    position: relative;
}
.cd-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--negro-suave);
    margin-bottom: 6px;
}
.cd-optional {
    font-weight: 400;
    color: var(--gris-texto);
}
.cd-input,
.cd-select,
.cd-textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--negro-suave);
    background: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.cd-input:focus,
.cd-select:focus,
.cd-textarea:focus {
    outline: none;
    border-color: #2a7a4f;
    box-shadow: 0 0 0 3px rgba(42,122,79,0.1);
}
.cd-textarea {
    resize: vertical;
    min-height: 80px;
}
.cd-char-count {
    position: absolute;
    right: 0;
    bottom: -20px;
    font-size: 11px;
    color: var(--gris-texto);
}

.cd-segmented {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cd-seg-btn {
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    color: var(--negro-suave);
    transition: all 0.2s;
}
.cd-seg-btn:hover {
    border-color: #2a7a4f;
    color: #2a7a4f;
}
.cd-seg-btn.active {
    background: #2a7a4f;
    border-color: #2a7a4f;
    color: #fff;
}

.cd-btn-enviar {
    width: 100%;
    padding: 14px;
    background: var(--verde-medio);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 8px;
}
.cd-btn-enviar:hover  { background: var(--verde-oscuro); }
.cd-btn-enviar:active { transform: translateY(0); }
.cd-btn-enviar:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.cd-notif-resultado {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}
.cd-notif-resultado--exito {
    background: #f0faf4;
    color: #1a5c38;
    border: 1px solid #a8d5b8;
}
.cd-notif-resultado--error {
    background: #fff5f5;
    color: #c0392b;
    border: 1px solid #f5c6cb;
}

/* ── Preview phone ── */
.cd-phone-mock {
    background: #f1f3f4;
    border-radius: 16px;
    padding: 16px;
    margin-top: 12px;
}
.cd-phone-mock__bar {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.cd-phone-mock__bar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
}
.cd-notif-bubble {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.cd-notif-bubble__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.cd-notif-bubble__icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}
.cd-notif-bubble__app {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    flex: 1;
}
.cd-notif-bubble__time {
    font-size: 11px;
    color: #999;
}
.cd-notif-bubble__titulo {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    margin-bottom: 2px;
}
.cd-notif-bubble__body {
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

/* ── Stats ── */
.cd-stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.cd-stat-box {
    flex: 1;
    background: #fff;
    border: 1px solid #d4edda;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.cd-stat-box strong {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #315f1b;
    line-height: 1;
    margin-bottom: 4px;
}
.cd-stat-box span {
    font-size: 12px;
    color: #666;
}
.cd-stats-clubs {
    border-top: 1px solid #d4edda;
    padding-top: 12px;
}
.cd-stats-club-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
}
.cd-stats-club-row:last-child { border-bottom: none; }
.cd-stats-club-row strong { color: #315f1b; }

/* ── Historial ── */
.cd-historial { display: flex; flex-direction: column; gap: 10px; }
.cd-historial-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.cd-historial-item:last-child { border-bottom: none; }
.cd-historial-item__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.cd-historial-item__texto strong { font-size: 13px; color: #111; }
.cd-historial-item__texto span   { font-size: 12px; color: #666; }
.cd-historial-item__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.cd-badge {
    background: #eef7e8;
    color: #315f1b;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}
.cd-fecha { font-size: 11px; color: #999; }
.cd-empty-msg { color: #999; font-size: 13px; text-align: center; padding: 16px 0; }
.cd-help--warn { color: #856404; background: #fff3cd; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
/* ================================================================
   3DEDOS — PERSONAL CSS
   Agregar en panel.css
================================================================ */

/* ── Wrap general ──────────────────────────────────────────────── */
.cd-personal-wrap { max-width: 1200px; }

/* ── Header ────────────────────────────────────────────────────── */
.cd-personal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.cd-personal-header h1 {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--negro-suave);
    letter-spacing: -0.3px;
}
.cd-personal-header p {
    font-size: 14px;
    color: var(--gris-texto);
    margin: 0;
}
.cd-personal-header__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Filtros ───────────────────────────────────────────────────── */
.cd-personal-filtros {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 24px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
}
.cd-select-filtro {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: #333;
    cursor: pointer;
    min-width: 140px;
}
.cd-busqueda-wrap { flex: 1; min-width: 200px; position: relative; }
/* Estándar visual para CUALQUIER campo de búsqueda del sistema —
   borde verde + lupita, para que se distinga de un filtro común
   (select, fecha) de un vistazo, sin tener que leer el placeholder. */
.cd-input-busqueda,
.cd-filters .cd-input-busqueda,
.cd-filters input[type="text"].cd-input-busqueda {
    width: 100%;
    padding: 9px 14px 9px 38px !important;
    border: 1.5px solid var(--verde-claro, #72b53a) !important;
    border-radius: var(--radius, 8px);
    font-size: 14px;
    font-family: var(--font);
    color: var(--negro-suave);
    background-color: var(--blanco, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232d7a4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 16px 16px !important;
    box-sizing: border-box;
    outline: none;
    transition: var(--transition);
}
.cd-input-busqueda:focus,
.cd-filters .cd-input-busqueda:focus {
    border-color: var(--verde-medio, #4f9722) !important;
    box-shadow: 0 0 0 3px var(--verde-suave, #eef7e8) !important;
}
.cd-input-busqueda::placeholder { color: var(--gris-texto); }

.cd-vista-toggle { display: flex; gap: 2px; }
.cd-vista-btn {
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: all 0.15s;
}
.cd-vista-btn:first-child { border-radius: 8px 0 0 8px; }
.cd-vista-btn:last-child  { border-radius: 0 8px 8px 0; border-left: none; }
.cd-vista-btn.active { background: #315f1b; color: #fff; border-color: #315f1b; }

/* ── Empty state ───────────────────────────────────────────────── */
.cd-personal-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}
.cd-personal-empty span { display: flex; justify-content: center; margin-bottom: 12px; opacity: 0.55; }
.cd-personal-empty span svg { width: 40px; height: 40px; }
.cd-personal-empty p    { font-size: 16px; margin-bottom: 16px; }

/* ── TARJETAS ──────────────────────────────────────────────────── */
.cd-personal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
@media (max-width: 640px) {
    .cd-personal-grid { grid-template-columns: 1fr; }
}

.cd-persona-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.cd-persona-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.cd-persona-card__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.cd-persona-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #315f1b, #2a7a4f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}
.cd-persona-info { flex: 1; min-width: 0; }
.cd-persona-info strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-persona-detalle {
    display: block;
    font-size: 12px;
    color: #666;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-persona-badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.cd-badge-sector {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #f0f4f8;
    color: #445;
    font-weight: 500;
    white-space: nowrap;
}
.cd-badge-linea {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
}
.cd-linea--oro     { background: #fff8e1; color: #b8860b; }
.cd-linea--platino { background: #f0f4ff; color: #3730a3; }
.cd-linea--ambas   { background: #f0fdf4; color: #166534; }
.cd-linea--na,
.cd-linea--n\/a    { background: #f5f5f5; color: #888; }

.cd-persona-card__body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cd-persona-dato {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #444;
}
.cd-dato-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.cd-dato-mail {
    word-break: break-all;
    color: #315f1b;
}

.cd-persona-card__footer {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
}
.cd-btn-accion {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.cd-btn-accion--wa   { background: #25d366; color: #fff; }
.cd-btn-accion--wa:hover { background: #1da851; }
.cd-btn-accion--mail { background: #e8f4fd; color: #1a6eb3; }
.cd-btn-accion--mail:hover { background: #d0e8f8; }
.cd-btn-accion--edit { background: #f0f4f8; color: #334; }
.cd-btn-accion--edit:hover { background: #e4ecf5; }
.cd-btn-accion--del  { background: #fff5f5; color: #c0392b; margin-left: auto; }
.cd-btn-accion--del:hover { background: #ffe0de; }

/* ── TABLA ─────────────────────────────────────────────────────── */
.cd-personal-tabla-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    background: #fff;
}
.cd-tabla-personal {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cd-tabla-personal th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    background: #f8f9fa;
    color: #555;
    border-bottom: 1px solid #e8e8e8;
    white-space: nowrap;
}
.cd-tabla-personal td {
    padding: 11px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    vertical-align: middle;
}
.cd-tabla-personal tr:last-child td { border-bottom: none; }
.cd-tabla-personal tr:hover td { background: #fafafa; }
.cd-tabla-personal td strong { display: block; font-weight: 600; }
.cd-tabla-personal td small  { display: block; color: #888; font-size: 11px; }
.cd-wa-inline {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #25d366;
    color: #fff;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}
.cd-mail-link { color: #315f1b; text-decoration: none; }
.cd-mail-link:hover { text-decoration: underline; }
.cd-tabla-acciones { display: flex; gap: 4px; }
.cd-tabla-btn {
    padding: 5px 9px;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}
.cd-tabla-btn:hover     { background: #f5f5f5; }
.cd-tabla-btn--del:hover { background: #fff0f0; border-color: #ffcdd2; }

/* ── MODALES ───────────────────────────────────────────────────── */
.cd-modal--importador { max-width: 800px; }
.cd-modal--sm         { max-width: 400px; }

/* ── Formulario modal ──────────────────────────────────────────── */
.cd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cd-form-group--half { grid-column: span 1; }
@media (max-width: 500px) {
    .cd-form-grid { grid-template-columns: 1fr; }
    .cd-form-group--half { grid-column: span 1; }
}
/* Cualquier input/select/textarea suelto dentro de un modal, sin
   necesidad de ponerle una clase — así ningún campo se ve "pelado". */
.cd-modal-body input[type="text"],
.cd-modal-body input[type="number"],
.cd-modal-body input[type="date"],
.cd-modal-body input[type="email"],
.cd-modal-body input[type="tel"],
.cd-modal-body input[type="url"],
.cd-modal-body input[type="month"],
.cd-modal-body select,
.cd-modal-body textarea {
    padding: 10px 13px;
    border: 1.5px solid #e2e5e9;
    border-radius: 9px;
    font-size: 14px;
    font-family: inherit;
    background: #fafbfc;
    color: #1a1a1a;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.cd-modal-body input[type="text"]:focus,
.cd-modal-body input[type="number"]:focus,
.cd-modal-body input[type="date"]:focus,
.cd-modal-body input[type="email"]:focus,
.cd-modal-body input[type="tel"]:focus,
.cd-modal-body input[type="url"]:focus,
.cd-modal-body input[type="month"]:focus,
.cd-modal-body select:focus,
.cd-modal-body textarea:focus {
    outline: none;
    border-color: #315f1b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26,71,49,0.08);
}
.cd-modal-body select { cursor: pointer; }
.cd-modal-body textarea { resize: vertical; min-height: 72px; }
.cd-input:focus, .cd-select:focus {
    outline: none;
    border-color: #315f1b;
    box-shadow: 0 0 0 3px rgba(26,71,49,0.08);
}

/* ── Importador ────────────────────────────────────────────────── */
.cd-import-info {
    font-size: 13px;
    color: #555;
    background: #f8fdf9;
    border: 1px solid #d4edda;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    line-height: 1.6;
}
.cd-drop-zone {
    border: 2px dashed #ccc;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #888;
}
.cd-drop-zone:hover, .cd-drop-zone.dragging {
    border-color: #315f1b;
    background: #f0fdf4;
    color: #315f1b;
}
.cd-drop-zone span { font-size: 36px; display: block; margin-bottom: 8px; }
.cd-drop-zone p    { margin: 0 0 12px; font-size: 14px; }
.cd-import-cargando { text-align: center; padding: 20px; font-size: 15px; color: #666; }
.cd-import-resumen {
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #a8d5b8;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 14px;
    color: #315f1b;
}
.cd-import-tabla-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid #e8e8e8; max-height: 340px; overflow-y: auto; }
.cd-tabla-import { width: 100%; border-collapse: collapse; font-size: 12px; }
.cd-tabla-import th { padding: 8px 10px; background: #f5f5f5; font-weight: 600; border-bottom: 1px solid #ddd; white-space: nowrap; position: sticky; top: 0; }
.cd-tabla-import td { padding: 7px 10px; border-bottom: 1px solid #f0f0f0; }
.cd-tabla-import tr:hover td { background: #fafafa; }
.cd-import-ok { text-align: center; padding: 30px 20px; }
.cd-import-ok span { font-size: 48px; display: block; margin-bottom: 12px; }
.cd-import-ok h3   { font-size: 20px; margin: 0 0 8px; }
.cd-import-ok p    { color: #555; margin-bottom: 20px; }
.cd-import-error {
    padding: 20px;
    background: #fff5f5;
    border-radius: 8px;
    color: #c0392b;
    font-size: 14px;
}

/* ── Config sectores/puestos ───────────────────────────────────── */
.cd-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 700px) { .cd-config-grid { grid-template-columns: 1fr; } }
.cd-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 20px; }
.cd-card__title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cd-card__title { font-size: 16px; font-weight: 600; margin: 0; }
.cd-card__sub   { font-size: 13px; color: #888; margin: 0 0 16px; }
.cd-config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fafafa;
}
.cd-config-item__nombre { font-size: 14px; font-weight: 500; }
.cd-config-item__nombre small { font-size: 11px; color: #888; font-weight: 400; margin-left: 4px; }
.cd-config-item__actions { display: flex; gap: 6px; }
.cd-empty-msg { color: #999; font-size: 13px; text-align: center; padding: 20px 0; }

/* ── Mobile responsivo ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .cd-personal-header { flex-direction: column; }
    .cd-personal-filtros { flex-direction: column; align-items: stretch; }
    .cd-select-filtro, .cd-busqueda-wrap { width: 100%; }
    .cd-vista-toggle, .cd-btn--ghost { align-self: flex-start; }
    .cd-persona-card__footer { gap: 4px; }
    .cd-btn-accion { padding: 6px 10px; font-size: 11px; }
}

/* ── DRAWER PERSONAL ───────────────────────────────────────────── */
.cd-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9000;
    display: flex;
    justify-content: flex-end;
}
.cd-drawer {
    width: 420px;
    max-width: 100vw;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: drawerIn 0.22s ease;
}
@keyframes drawerIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
.cd-drawer-top {
    background: #315f1b;
    padding: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cd-drawer-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 600; color: #fff;
    flex-shrink: 0;
}
.cd-drawer-name { font-size: 16px; font-weight: 500; color: #fff; margin: 0 0 2px; }
.cd-drawer-sub  { font-size: 12px; color: rgba(255,255,255,0.6); margin: 0; }
.cd-drawer-close {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: none;
    color: #fff; cursor: pointer; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; flex-shrink: 0;
}
.cd-drawer-close:hover { background: rgba(255,255,255,0.25); }
.cd-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.cd-drawer-section { margin-bottom: 20px; }
.cd-drawer-section-label {
    font-size: 11px; font-weight: 500; color: #999;
    text-transform: uppercase; letter-spacing: 0.07em;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}
.cd-drawer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.cd-drawer-row--1 { grid-template-columns: 1fr; }
.cd-drawer-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.cd-drawer-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cd-drawer-field input,
.cd-drawer-field select,
.cd-drawer-field textarea { min-width: 0; max-width: 100%; }
.cd-drawer-label { font-size: 12px; color: #666; }
.cd-drawer-input {
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 7px;
    font-size: 13px;
    color: #111;
    background: #fafafa;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.cd-drawer-input:focus {
    outline: none;
    border-color: #315f1b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26,71,49,0.08);
}
.cd-drawer-footer {
    padding: 14px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: #fff;
}
@media (max-width: 480px) {
    .cd-drawer { width: 100vw; }
}
.cd-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.cd-sidebar__nav {
    flex: 1;
    overflow-y: auto;
}

.cd-sidebar__footer {
    flex-shrink: 0;
}
/* ================================================================
   3DEDOS — CONVENIOS CSS
   Agregar en panel.css
================================================================ */

.cd-conv-wrap { max-width: 1100px; }

/* ── Stats ──────────────────────────────────────────────────────── */
.cd-conv-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
@media (max-width: 640px) { .cd-conv-stats { grid-template-columns: repeat(2, 1fr); } }

.cd-conv-stat {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}
.cd-conv-stat strong {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: #315f1b;
    line-height: 1;
    margin-bottom: 4px;
}
.cd-conv-stat span { font-size: 12px; color: #888; }
.cd-conv-stat--warn  strong { color: #e67e22; }
.cd-conv-stat--ok    strong { color: #27ae60; }
.cd-conv-stat--money strong { color: #2980b9; font-size: 20px; }

/* ── Lista de convenios ─────────────────────────────────────────── */
.cd-conv-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cd-conv-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.cd-conv-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }

.cd-conv-card__main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px 12px;
}
.cd-conv-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cd-conv-card__info strong {
    font-size: 15px;
    font-weight: 600;
    color: #111;
}
.cd-conv-card__info span {
    font-size: 12px;
    color: #888;
}
.cd-conv-destino {
    font-size: 13px !important;
    color: #315f1b !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cd-conv-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.cd-conv-estado {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cd-conv-estado--vigente  { background: #eef7e8; color: #1a5c38; }
.cd-conv-estado--vencido  { background: #fff3e0; color: #e65100; }
.cd-conv-estado--cobrado  { background: #e3f2fd; color: #0d47a1; }
.cd-conv-estado--cancelado { background: #f5f5f5; color: #666; }

.cd-conv-porcentaje {
    font-size: 20px;
    font-weight: 700;
    color: #315f1b;
    line-height: 1;
}
.cd-conv-monto {
    font-size: 13px;
    font-weight: 600;
    color: #2980b9;
}

.cd-conv-card__detalle {
    padding: 0 20px 12px;
    border-top: 1px solid #f5f5f5;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cd-conv-fechas {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #555;
    flex-wrap: wrap;
    padding-top: 10px;
}
.cd-conv-fechas span { display: inline-flex; align-items: center; gap: 4px; }
.cd-conv-fechas strong { color: #111; }
.cd-conv-vencido { color: #e65100 !important; }

.cd-conv-clausulas-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    color: #888;
}
.cd-conv-clausulas-mini > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.cd-conv-clausula-tag {
    background: #f0f4f8;
    color: #334;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
}
.cd-conv-clausula-tag.cumplida {
    background: #eef7e8;
    color: #1a5c38;
}

.cd-conv-ia-badge {
    font-size: 11px;
    color: #666;
    background: #f8f0ff;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cd-conv-card__actions {
    display: flex;
    gap: 8px;
    padding: 10px 20px;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    align-items: center;
    flex-wrap: wrap;
}
.cd-conv-archivos-count {
    font-size: 12px;
    color: #888;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Drawer convenio ────────────────────────────────────────────── */
.cd-conv-clausula-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* ── Archivos ────────────────────────────────────────────────────── */
.cd-conv-archivo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f8f9fa;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}
.cd-conv-archivo-icon { font-size: 18px; flex-shrink: 0; }
.cd-conv-archivo-nombre {
    flex: 1;
    color: #315f1b;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cd-conv-archivo-nombre:hover { text-decoration: underline; }

/* ── Reporte IA ──────────────────────────────────────────────────── */
.cd-conv-ia-reporte {
    background: #f8f0ff;
    border: 1px solid #d8b4fe;
    border-radius: 10px;
    padding: 16px;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}
.cd-conv-ia-reporte p { margin: 0 0 10px; }
.cd-conv-ia-reporte p:last-child { margin: 0; }
/* ================================================================
/* ================================================================
   3DEDOS — INVENTARIO CSS COMPLETO
   Reemplaza el inventario.css anterior en panel.css
================================================================ */

.cd-inv-wrap { max-width: 1200px; }

/* ── Stats ──────────────────────────────────────────────────────── */
/* Portada de Inventario — tarjetas por categoría, misma idea que el
   resto del sistema (borde + hover verde), con un badge naranja si
   hay algo para revisar (en reparación, extraviado, o poco stock). */
.cd-inv-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.cd-inv-cat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: 14px;
    padding: 16px 14px;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}
.cd-inv-cat-card:hover { border-color: var(--verde-claro); box-shadow: 0 4px 14px rgba(26,71,49,0.10); }
.cd-inv-cat-card__icono {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--verde-suave, #eef7e8);
    color: var(--verde-oscuro);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 6px;
}
.cd-inv-cat-card strong { font-size: 14.5px; color: var(--negro-suave); }
.cd-inv-cat-card__sub { font-size: 12px; color: var(--gris-texto); }
.cd-inv-cat-card__alerta {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 600;
    background: #fff1e6; color: #b45309;
    padding: 3px 9px; border-radius: 20px;
    margin-top: 6px;
}

.cd-inv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
@media (max-width: 640px) { .cd-inv-stats { grid-template-columns: repeat(2, 1fr); } }

.cd-inv-stat {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radius);
    padding: 14px 16px;
    text-align: center;
}
.cd-inv-stat strong {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--verde-oscuro);
    line-height: 1;
    margin-bottom: 4px;
}
.cd-inv-stat span { font-size: 12px; color: var(--gris-texto); }
.cd-inv-stat--ok    strong { color: var(--verde-medio); }
.cd-inv-stat--warn  strong { color: #c75000; }
.cd-inv-stat--alert strong { color: #b91c1c; }
.cd-inv-stat--blue  strong { color: #0d47a1; }

/* ── Tabla consolidada ──────────────────────────────────────────── */
.cd-inv-tabla-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.cd-inv-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 600px;
}
.cd-inv-tabla th {
    padding: 11px 14px;
    background: #f8f9fa;
    font-weight: 600;
    color: #555;
    border-bottom: 2px solid #e8e8e8;
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cd-inv-tabla th:first-child { text-align: left; padding-left: 20px; }
.cd-inv-tabla td {
    padding: 11px 14px;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    vertical-align: middle;
    color: #333;
}
.cd-inv-tabla td:first-child { text-align: left; padding-left: 20px; }
.cd-inv-tabla td strong { display: block; font-weight: 600; color: #111; font-size: 14px; }
.cd-inv-tabla td small  { display: block; font-size: 11px; color: #999; margin-top: 1px; }
.cd-inv-tabla tbody tr:last-child td { border-bottom: none; }
.cd-inv-tabla tbody tr:hover td { background: #fafbfc; }

.cd-inv-cat-row td {
    background: #f0f4f0 !important;
    font-weight: 700;
    font-size: 11px;
    color: #2a5a38;
    padding: 7px 14px 7px 20px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #d8e8d8 !important;
}

/* ── Números de stock ───────────────────────────────────────────── */
.cd-inv-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    background: #f5f5f5;
    color: #aaa;
}
.cd-inv-num--ok    { background: #eef7e8; color: #1a5c38; }
.cd-inv-num--warn  { background: #fff3e0; color: #c75000; }
.cd-inv-num--alert { background: #fdecea; color: #b71c1c; }
.cd-inv-num--blue  { background: #e3f2fd; color: #0d47a1; }
.cd-inv-num--zero  { background: #f5f5f5; color: #ccc; font-weight: 400; }

/* ── Botón tabla ────────────────────────────────────────────────── */
.cd-inv-tabla .cd-tabla-btn {
    padding: 5px 10px;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
    color: #555;
}
.cd-inv-tabla .cd-tabla-btn:hover { background: #f0f4f8; border-color: #315f1b; color: #315f1b; }

/* ================================================================
   MODALES — Inventario
================================================================ */
.cd-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,20,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 16px;
    animation: cd-modal-fade-in 0.15s ease;
}
@keyframes cd-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cd-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(15,23,20,0.28);
    overflow: hidden;
    animation: cd-modal-pop-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cd-modal-pop-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cd-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid #eef0f0;
    flex-shrink: 0;
    background: #fff;
}
.cd-modal-header h3 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    color: #111;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cd-modal-close {
    background: #f5f5f5;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #666;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    line-height: 1;
    flex-shrink: 0;
}
.cd-modal-close:hover { background: #e8e8e8; color: #333; }
.cd-modal-body {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
}
.cd-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid #eef0f0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    background: #fbfbfb;
}
@media (max-width: 560px) {
    .cd-modal-overlay { padding: 0; align-items: flex-end; }
    .cd-modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        animation: cd-modal-slide-up 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    @keyframes cd-modal-slide-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* ── Formularios dentro de modales ──────────────────────────────── */
.cd-drawer-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}
.cd-drawer-label {
    font-size: 12px;
    font-weight: 500;
    color: #555;
}
.cd-drawer-input {
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fafafa;
    color: #111;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cd-drawer-input:focus {
    outline: none;
    border-color: #315f1b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26,71,49,0.08);
}
select.cd-drawer-input { cursor: pointer; }
textarea.cd-drawer-input { resize: vertical; min-height: 70px; }

.cd-drawer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.cd-drawer-row--1 { grid-template-columns: 1fr; }
.cd-drawer-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
    .cd-drawer-row,
    .cd-drawer-row--3 { grid-template-columns: 1fr; }
}

/* ── Texto descriptivo en modales ───────────────────────────────── */
.cd-modal-body > p {
    font-size: 13px;
    color: #666;
    margin: 0 0 16px;
    line-height: 1.5;
    background: #f8fdf9;
    border: 1px solid #d4edda;
    border-radius: 8px;
    padding: 10px 14px;
}

/* ── Config: lista de items ─────────────────────────────────────── */
.cd-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 600px) { .cd-config-grid { grid-template-columns: 1fr; } }

.cd-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 18px;
}
.cd-card__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.cd-card__title { font-size: 15px; font-weight: 600; margin: 0; color: #111; }

.cd-config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin-bottom: 6px;
    background: #fafafa;
    transition: background 0.15s;
}
.cd-config-item:hover { background: #f5f5f5; }
.cd-config-item__nombre { font-size: 13px; font-weight: 500; color: #222; }
.cd-config-item__nombre small { font-size: 11px; color: #888; font-weight: 400; display: block; margin-top: 1px; }
.cd-config-item__actions { display: flex; gap: 5px; }

/* ── Separador entre secciones del form ─────────────────────────── */
.cd-form-sep {
    height: 1px;
    background: #f0f0f0;
    margin: 16px 0;
}

/* ── Historial ──────────────────────────────────────────────────── */
.cd-hist-grupo-titulo {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 20px 6px;
    margin: 0;
}
.cd-hist-grupo:first-of-type .cd-hist-grupo-titulo,
.cd-hist-grupo-titulo:first-child { padding-top: 10px; }

.cd-hist-item {
    display: flex;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid #f5f5f5;
    align-items: flex-start;
}
.cd-hist-grupo .cd-hist-item:last-child { border-bottom: none; }
.cd-hist-hora {
    font-size: 11px;
    color: #999;
    min-width: 36px;
    flex-shrink: 0;
    padding-top: 3px;
}
.cd-hist-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.cd-hist-tipo { font-size: 13px; font-weight: 600; color: #222; }
.cd-hist-nota { font-size: 12px; color: #888; margin-top: 2px; }
.cd-hist-usuario { font-size: 11px; color: #bbb; flex-shrink: 0; margin-left: auto; padding-top: 3px; }

/* ================================================================
   RECUENTO PROFESOR — Mobile first
================================================================ */
.cd-inv-recuento-info {
    background: #f0f4ff;
    border: 1px solid #c7d4f0;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 16px;
    color: #2c3e70;
    margin-bottom: 20px;
    line-height: 1.5;
}

.cd-inv-recuento-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}
@media (max-width: 640px) { .cd-inv-recuento-lista { grid-template-columns: 1fr; } }

.cd-inv-recuento-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.cd-inv-recuento-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

.cd-inv-recuento-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f5f5f5;
}
.cd-inv-recuento-icon { font-size: 30px; flex-shrink: 0; }
.cd-inv-recuento-card__header strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    margin-bottom: 2px;
}
.cd-inv-recuento-card__header span { font-size: 12px; color: #999; }

.cd-inv-recuento-estados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.cd-inv-estado-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
}
.cd-inv-estado-field label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.02em;
}
.cd-inv-estado--ok    { background: #f0fdf4; border-color: #bbf7d0; }
.cd-inv-estado--ok    label { color: #166534; }
.cd-inv-estado--warn  { background: #fffbeb; border-color: #fde68a; }
.cd-inv-estado--warn  label { color: #92400e; }
.cd-inv-estado--alert { background: #fef2f2; border-color: #fecaca; }
.cd-inv-estado--alert label { color: #991b1b; }
.cd-inv-estado--baja  { background: #f9fafb; border-color: #e5e7eb; }
.cd-inv-estado--baja  label { color: #6b7280; }

.cd-inv-num-input {
    width: 100%;
    padding: 8px 6px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    background: #fff;
    box-sizing: border-box;
    color: #111;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cd-inv-num-input:focus {
    outline: none;
    border-color: #315f1b;
    box-shadow: 0 0 0 3px rgba(26,71,49,0.1);
}

.cd-inv-recuento-nota { margin-top: 4px; }
.cd-inv-recuento-nota .cd-drawer-input {
    font-size: 13px;
    padding: 8px 10px;
    background: #fafafa;
}

.cd-inv-btn-guardar {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #315f1b, #2a7a4f);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    font-family: inherit;
}
.cd-inv-btn-guardar:hover   { opacity: 0.9; transform: translateY(-1px); }
.cd-inv-btn-guardar:active  { transform: translateY(0); }
.cd-inv-btn-guardar:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.cd-inv-btn-guardar.ok {
    background: #27ae60;
}

/* ── Empty state inventario ─────────────────────────────────────── */
.cd-inv-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}
.cd-inv-empty span { font-size: 52px; display: block; margin-bottom: 14px; }
.cd-inv-empty p    { font-size: 16px; margin-bottom: 20px; }

/* ── Responsive modales en mobile ───────────────────────────────── */
@media (max-width: 600px) {
    .cd-modal-overlay { padding: 0; align-items: flex-end; }
    .cd-modal {
        border-radius: 18px 18px 0 0;
        max-height: 92vh;
    }
    .cd-modal-body { padding: 16px; }
    .cd-modal-header { padding: 16px; }
    .cd-modal-footer { padding: 12px 16px; }
}

/* ================================================================
   INVENTARIO — Vista tarjetas mobile / tabla desktop
================================================================ */
.cd-inv-tabla-wrap { display: none !important; }
/* Mostrar/ocultar según pantalla */
.cd-inv-solo-desktop { display: block; }
.cd-inv-solo-mobile  { display: none; }


/* ── Tarjetas mobile ────────────────────────────────────────────── */
.cd-inv-tarjetas {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-inv-cat-titulo {
    font-size: 11px;
    font-weight: 700;
    color: #2a5a38;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 10px 4px 4px;
    border-bottom: 2px solid #d4edda;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cd-inv-cat-titulo:first-child { margin-top: 0; }
.cd-inv-cat-titulo__icono { font-size: 14px; }

/* ── Lista unificada de productos (desktop y mobile por igual) ──── */
.cd-inv-lista { display: flex; flex-direction: column; gap: 8px; }

.cd-inv-producto {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.cd-inv-producto:hover { border-color: #c9ddd0; }

.cd-inv-producto__fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    flex-wrap: wrap;
}

.cd-inv-producto__info {
    min-width: 120px;
    flex: 1 1 160px;
}
.cd-inv-producto__info strong { display: block; font-weight: 600; color: #111; font-size: 14px; }
.cd-inv-producto__unidad { font-size: 11px; color: #999; }

.cd-inv-producto__nums {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cd-inv-num-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    background: #f3f4f6;
    font-size: 12px;
}
.cd-inv-num-chip strong { font-size: 13px; font-weight: 700; color: #374151; }
.cd-inv-num-chip span { display: inline-flex; align-items: center; gap: 3px; color: #6b7280; font-size: 11px; }

.cd-inv-num-chip--ok    { background: #eef7e8; }
.cd-inv-num-chip--ok    strong, .cd-inv-num-chip--ok    span { color: #1a5c38; }
.cd-inv-num-chip--warn  { background: #fff3e0; }
.cd-inv-num-chip--warn  strong, .cd-inv-num-chip--warn  span { color: #c75000; }
.cd-inv-num-chip--alert { background: #fdecea; }
.cd-inv-num-chip--alert strong, .cd-inv-num-chip--alert span { color: #b71c1c; }
.cd-inv-num-chip--blue  { background: #e3f2fd; }
.cd-inv-num-chip--blue  strong, .cd-inv-num-chip--blue  span { color: #0d47a1; }

/* ── Cuerpo de la tarjeta: barra de proporción + resumen prolijo ── */
.cd-inv-producto__cuerpo {
    padding: 0 16px 12px;
}
.cd-inv-barra {
    display: flex;
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    background: #f0f0f0;
    margin-bottom: 12px;
}
.cd-inv-barra__seg--ok    { background: #57b787; }
.cd-inv-barra__seg--warn  { background: #f0a83e; }
.cd-inv-barra__seg--alert { background: #e05b5b; }
.cd-inv-barra__seg--baja  { background: #b5b7bb; }
.cd-inv-barra__seg--blue  { background: #4a90d9; }

.cd-inv-resumen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
}
.cd-inv-resumen__item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}
.cd-inv-resumen__item span { color: #6b7280; }
.cd-inv-resumen__item strong { color: #1f2937; font-weight: 600; }
.cd-inv-resumen__item--ok    strong { color: #1a5c38; }
.cd-inv-resumen__item--warn  strong { color: #c75000; }
.cd-inv-resumen__item--alert strong { color: #b71c1c; }
.cd-inv-resumen__item--blue  strong { color: #0d47a1; }

/* Los chips de "dado de baja" / "extraviado" son botones (para poder
   tocarlos y ver dónde están) — se resetean para que se vean igual
   que los demás chips que sí son solo texto, con un pequeño feedback
   de que se puede interactuar. */
.cd-inv-resumen__item--clickable {
    background: none;
    border: none;
    padding: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.cd-inv-resumen__item--clickable span { display: inline-flex; align-items: center; gap: 2px; }
.cd-inv-resumen__item--clickable svg { transition: transform 0.15s; }
.cd-inv-resumen__item--clickable:hover span { text-decoration: underline; }

.cd-inv-ubicacion {
    display: none;
    background: #f9fafb;
    border: 1px solid #eef0f2;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 8px;
}
.cd-inv-ubicacion.cd-inv-ubicacion--abierta { display: block; }
.cd-inv-ubicacion__titulo {
    display: flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; color: #6b7280;
    margin: 0 0 6px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.cd-inv-ubicacion__fila {
    display: flex; justify-content: space-between;
    font-size: 13px; padding: 3px 0;
}
.cd-inv-ubicacion__fila strong { color: #1f2937; }

.cd-inv-producto__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
    font-size: 11.5px;
    color: #9ca3af;
}
.cd-inv-producto__footer-historial {
    background: none;
    border: none;
    padding: 0;
    color: #1a5c38;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.cd-inv-producto__footer-historial:hover { text-decoration: underline; }

/* ── Por división: siempre visible, sin necesidad de desplegar nada ── */
.cd-inv-pordivision-titulo {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 12px 0 6px;
}
.cd-inv-pordivision-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}
.cd-inv-pordivision-nombre {
    font-size: 13px;
    color: #374151;
    flex: 1 1 90px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cd-inv-pordivision-barra {
    flex: 2 1 auto;
    height: 5px;
    border-radius: 3px;
    background: #f0f0f0;
    display: block;
    overflow: hidden;
}
.cd-inv-pordivision-barra span {
    display: block;
    height: 100%;
    background: #57b787;
    border-radius: 3px;
}
.cd-inv-pordivision-num {
    font-size: 13px;
    color: #1f2937;
    min-width: 22px;
    text-align: right;
    flex-shrink: 0;
}

.cd-inv-tarjeta {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.cd-inv-tarjeta__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.cd-inv-tarjeta__header strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    margin-bottom: 2px;
}
.cd-inv-tarjeta__header span { font-size: 12px; color: #999; }
.cd-inv-tarjeta__hist {
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 15px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.cd-inv-tarjeta__hist:hover { background: #e8e8e8; }

.cd-inv-tarjeta__nums {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cd-inv-tarjeta__num {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    min-width: 70px;
    flex: 1;
}
.cd-inv-tarjeta__num strong {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 3px;
}
.cd-inv-tarjeta__num span {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
}
.cd-inv-tarjeta__num--ok    { background: #eef7e8; }
.cd-inv-tarjeta__num--ok    strong { color: #1a5c38; }
.cd-inv-tarjeta__num--ok    span   { color: #2a7a4f; }
.cd-inv-tarjeta__num--warn  { background: #fff3e0; }
.cd-inv-tarjeta__num--warn  strong { color: #c75000; }
.cd-inv-tarjeta__num--warn  span   { color: #c75000; }
.cd-inv-tarjeta__num--alert { background: #fdecea; }
.cd-inv-tarjeta__num--alert strong { color: #b71c1c; }
.cd-inv-tarjeta__num--alert span   { color: #b71c1c; }
.cd-inv-tarjeta__num--blue  { background: #e3f2fd; }
.cd-inv-tarjeta__num--blue  strong { color: #0d47a1; }
.cd-inv-tarjeta__num--blue  span   { color: #0d47a1; }

.cd-inv-tarjeta__divs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
}
.cd-inv-tarjeta__div-tag {
    background: #f0f4f8;
    color: #445;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
}
.cd-inv-tarjeta__div-tag strong { color: #315f1b; font-weight: 700; }

/* ── Pestañas del portal de familias ─────────────────────────────── */
.cd-portal-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 8px 4px 8px;
    margin-bottom: 18px;
    scrollbar-width: none;
}
.cd-portal-tabs::-webkit-scrollbar { display: none; }

.cd-portal-tab {
    flex-shrink: 0;
    background: #e3ede7;
    color: #2d5a41;
    border: 1.5px solid #cfe0d6;
    padding: 9px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cd-portal-tab:hover { background: #d3e5da; border-color: #b9d4c5; }
.cd-portal-tab.active {
    background: var(--verde-oscuro, #315f1b);
    color: #fff;
    border-color: var(--verde-oscuro, #315f1b);
}

@media (min-width: 700px) {
    .cd-portal-tabs { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════
   TEMA GLOBAL DE SWEETALERT2 — se aplica a TODOS los diálogos del
   sistema (pausar jugador, bloquear acceso, eliminar, confirmaciones,
   etc.), pensado primero para mobile.
   ══════════════════════════════════════════════════════════════════ */
.swal2-popup {
    font-family: var(--font, system-ui, sans-serif) !important;
    border-radius: 20px !important;
    padding: 28px 22px 22px !important;
    width: min(92vw, 380px) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18) !important;
}

.swal2-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--negro-suave, #1f2937) !important;
    padding: 0 !important;
    margin: 4px 0 6px !important;
}

.swal2-html-container {
    font-size: 14px !important;
    color: var(--gris-texto, #6b7280) !important;
    line-height: 1.5 !important;
    margin: 0 0 4px !important;
}

.swal2-icon {
    margin: 6px auto 12px !important;
    width: 60px !important;
    height: 60px !important;
}
.swal2-icon.swal2-icon-text { font-size: 2.2em !important; }

/* Input / select cuando el diálogo pide un dato (ej: motivo de pausa) */
.swal2-input, .swal2-select, .swal2-textarea {
    font-family: var(--font, system-ui, sans-serif) !important;
    border: 1.5px solid var(--gris-borde, #e5e7eb) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}
.swal2-input:focus, .swal2-select:focus, .swal2-textarea:focus {
    border-color: var(--verde-oscuro, #315f1b) !important;
    box-shadow: 0 0 0 3px rgba(26,71,49,0.12) !important;
}

.swal2-actions {
    width: 100%;
    margin-top: 20px !important;
    gap: 10px !important;
}

.swal2-styled {
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    box-shadow: none !important;
    transition: filter 0.15s ease, transform 0.1s ease !important;
}
.swal2-styled:hover { filter: brightness(0.94); }
.swal2-styled:active { transform: scale(0.98); }
.swal2-styled:focus { box-shadow: 0 0 0 3px rgba(26,71,49,0.18) !important; }

.swal2-confirm.swal2-styled {
    background: var(--verde-oscuro, #315f1b) !important;
}
.swal2-cancel.swal2-styled {
    background: var(--gris-claro, #f4f6f5) !important;
    color: var(--negro-suave, #1f2937) !important;
}
.swal2-deny.swal2-styled {
    background: #c0392b !important;
}

.swal2-timer-progress-bar { background: var(--verde-oscuro, #315f1b) !important; }

/* En mobile angosto, los botones se apilan en columna y ocupan todo el
   ancho — más fácil de tocar que dos botones chiquitos lado a lado. */
@media (max-width: 420px) {
    .swal2-actions {
        flex-direction: column-reverse;
    }
    .swal2-styled {
        width: 100%;
        margin: 0 !important;
    }
    .swal2-popup {
        padding: 24px 18px 18px !important;
    }
}

/* ── Input de precio (Precios) — sin flechitas, con $ prefijo ────── */
.cd-precio-input {
    display: inline-flex;
    align-items: center;
    max-width: 180px;
    border: 1.5px solid #e2e5e9;
    border-radius: 9px;
    background: #fafbfc;
    padding: 0 12px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.cd-precio-input:focus-within {
    border-color: #315f1b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26,71,49,0.08);
}
.cd-precio-input__prefijo {
    color: #6b7280;
    font-weight: 600;
    font-size: 14px;
    padding-right: 4px;
}
.cd-precio-input input[type="number"] {
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #1a1a1a;
    width: 100%;
    outline: none;
}
/* Ocultar las flechitas del spinner nativo del navegador */
.cd-precio-input input[type="number"]::-webkit-outer-spin-button,
.cd-precio-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cd-precio-input input[type="number"] {
    -moz-appearance: textfield;
}

/* SweetAlert2 siempre arriba de todo — sin esto, cualquier modal o
   drawer del sistema con z-index alto (el drawer de Convenios usa
   9000, el lightbox de fotos 999999, etc.) tapa el aviso de
   SweetAlert2 por detrás, porque su z-index por default (1060) es
   más bajo que el nuestro. Con esta regla, gane lo que gane en el
   resto del sistema, el aviso de SweetAlert2 siempre se ve encima. */
.swal2-container {
    z-index: 999999999 !important;
}

/* Chips de categoría — Tienda del Portal de Familias */
.cd-chip-categoria {
    flex-shrink: 0;
    background: var(--blanco);
    color: var(--negro-suave);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--gris-borde);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.cd-chip-categoria.activo {
    background: var(--verde-oscuro);
    color: #fff;
    border-color: var(--verde-oscuro);
}
/* 3dedos — acentos de marca */
:root { --td-orange:#d24a1f; --td-orange-soft:#fff0e9; }
.cd-btn--primary { box-shadow:0 8px 20px rgba(79,151,34,.16); }
.cd-nav-badge,.cd-topbar-action__badge { background:var(--td-orange)!important;color:#fff!important; }