/* =========================================================================
   COLMENA · Design System overrides
   Compact spacing, higher contrast, thinner elegant typography.
   Tuned for 720p HD (1280x720) while scaling up gracefully.
   ========================================================================= */

/* ---------- Tipografía base (Inter light + tight tracking) ---------- */
html {
    font-size: 14px; /* antes 16px; reduce escala global */
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    font-weight: 300;              /* más delgada y elegante */
    letter-spacing: -0.005em;
    color: #0f172a;                /* slate-900 */
    background-color: #e2e8f0;     /* slate-200: canvas oscuro para que las tarjetas resalten */
    background-image: url("../img/img-side.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Títulos: más densos visualmente pero no tan pesados */
h1, h2, h3, h4, h5, h6,
.card-title {
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* Reducir tamaños grandes que rompen la grilla en 720p */
h1, .text-4xl { font-size: 1.75rem !important; }
h2, .text-3xl { font-size: 1.375rem !important; }
h3, .text-2xl { font-size: 1.125rem !important; }
.text-xl      { font-size: 1rem    !important; }
.text-lg      { font-size: 0.95rem !important; }

/* Stats más compactos */
.stat-value { font-size: 1.5rem !important; font-weight: 700 !important; }
.stat-title { font-size: 0.7rem !important; letter-spacing: 0.02em; text-transform: uppercase; }
.stat-desc  { font-size: 0.7rem !important; }

/* ---------- Contraste mejorado (texto y acentos) ---------- */
body { color: #0f172a; }

.text-gray-400 { color: #475569 !important; } /* slate-600 */
.text-gray-500 { color: #1e293b !important; } /* slate-800 */
.text-gray-600 { color: #0f172a !important; } /* slate-900 */
.text-gray-700 { color: #020617 !important; } /* slate-950 */

.text-lime-600 { color: #365314 !important; } /* lime-900 */
.text-lime-700 { color: #1a2e05 !important; }

/* Opacidades pálidas subidas un escalón */
.opacity-50 { opacity: 0.75 !important; }
.opacity-60 { opacity: 0.82 !important; }
.opacity-70 { opacity: 0.9  !important; }
.opacity-80 { opacity: 0.95 !important; }

/* ---------- Header / navbar compacto (manteniendo colores originales) ---------- */
header.navbar {
    min-height: 3rem !important;
    padding: 0.25rem 0.75rem !important;
}

header.navbar a,
header.navbar .menu li > a {
    padding: 0.35rem 0.6rem !important;
    border-radius: 0.4rem;
}

/* Logo Colmena dentro del navbar: un pelín más chico */
header.navbar .h-10 { height: 2rem !important; }

/* ---------- Cards / contenedores: menos padding, mejor borde ---------- */
.card {
    border-radius: 0.5rem;
}

.card-body {
    padding: 0.85rem 1rem !important;
}

.card.shadow,
.card.shadow-md,
.card.shadow-lg,
.card.shadow-xl {
    border: 1px solid #cbd5e1; /* slate-300 visible */
}

/* Sombras más presentes para separar del canvas gris */
[data-theme] .shadow,
.shadow {
    box-shadow: 0 1px 2px 0 rgb(2 6 23 / 0.12), 0 1px 3px 0 rgb(2 6 23 / 0.08) !important;
}
[data-theme] .shadow-md,
.shadow-md {
    box-shadow: 0 4px 8px -2px rgb(2 6 23 / 0.18), 0 2px 4px -2px rgb(2 6 23 / 0.1) !important;
}
[data-theme] .shadow-lg,
.shadow-lg {
    box-shadow: 0 12px 20px -6px rgb(2 6 23 / 0.22), 0 4px 8px -4px rgb(2 6 23 / 0.14) !important;
}
[data-theme] .shadow-xl,
.shadow-xl {
    box-shadow: 0 20px 28px -8px rgb(2 6 23 / 0.28), 0 8px 12px -6px rgb(2 6 23 / 0.18) !important;
}

/* ---------- Main: menos aire vertical ---------- */
main.flex-1 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* ---------- Spacing utilities globales (más compactos) ---------- */
/* Paddings verticales */
.py-2  { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-3  { padding-top: 0.4rem  !important; padding-bottom: 0.4rem  !important; }
.py-4  { padding-top: 0.5rem  !important; padding-bottom: 0.5rem  !important; }
.py-6  { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-8  { padding-top: 1rem    !important; padding-bottom: 1rem    !important; }
.py-10 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.py-12 { padding-top: 1.5rem  !important; padding-bottom: 1.5rem  !important; }
.py-16 { padding-top: 2rem    !important; padding-bottom: 2rem    !important; }
.py-20 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
.py-32 { padding-top: 3rem    !important; padding-bottom: 3rem    !important; }

/* Paddings horizontales */
.px-2 { padding-left: 0.35rem !important; padding-right: 0.35rem !important; }
.px-3 { padding-left: 0.5rem  !important; padding-right: 0.5rem  !important; }
.px-4 { padding-left: 0.65rem !important; padding-right: 0.65rem !important; }
.px-6 { padding-left: 0.9rem  !important; padding-right: 0.9rem  !important; }
.px-8 { padding-left: 1.1rem  !important; padding-right: 1.1rem  !important; }

/* Paddings generales */
.p-2 { padding: 0.35rem !important; }
.p-3 { padding: 0.5rem  !important; }
.p-4 { padding: 0.65rem !important; }
.p-5 { padding: 0.75rem !important; }
.p-6 { padding: 0.9rem  !important; }
.p-8 { padding: 1.1rem  !important; }

/* Márgenes verticales compactos */
.mb-2  { margin-bottom: 0.3rem !important; }
.mb-3  { margin-bottom: 0.4rem !important; }
.mb-4  { margin-bottom: 0.55rem !important; }
.mb-6  { margin-bottom: 0.8rem !important; }
.mb-8  { margin-bottom: 1rem   !important; }
.mb-12 { margin-bottom: 1.5rem !important; }

.mt-2  { margin-top: 0.3rem !important; }
.mt-3  { margin-top: 0.4rem !important; }
.mt-4  { margin-top: 0.55rem !important; }
.mt-6  { margin-top: 0.8rem !important; }
.mt-8  { margin-top: 1rem   !important; }
.mt-12 { margin-top: 1.5rem !important; }

.my-2 { margin-top: 0.3rem  !important; margin-bottom: 0.3rem  !important; }
.my-4 { margin-top: 0.55rem !important; margin-bottom: 0.55rem !important; }
.my-6 { margin-top: 0.8rem  !important; margin-bottom: 0.8rem  !important; }
.my-8 { margin-top: 1rem    !important; margin-bottom: 1rem    !important; }

/* Gaps */
.gap-2 { gap: 0.35rem !important; }
.gap-3 { gap: 0.5rem  !important; }
.gap-4 { gap: 0.65rem !important; }
.gap-6 { gap: 0.85rem !important; }
.gap-8 { gap: 1rem    !important; }

/* Space-y */
.space-y-2 > * + * { margin-top: 0.35rem !important; }
.space-y-3 > * + * { margin-top: 0.5rem  !important; }
.space-y-4 > * + * { margin-top: 0.65rem !important; }
.space-y-6 > * + * { margin-top: 0.85rem !important; }
.space-y-8 > * + * { margin-top: 1rem    !important; }

/* ---------- Botones: más compactos y con acentos fuertes ---------- */
.btn {
    min-height: 2rem !important;
    height: auto !important;
    padding: 0.35rem 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    text-transform: none;
}

.btn-sm { min-height: 1.65rem !important; padding: 0.2rem 0.6rem !important; font-size: 0.78rem !important; }
.btn-xs { min-height: 1.3rem  !important; padding: 0.1rem 0.45rem !important; font-size: 0.7rem !important; }
.btn-lg { min-height: 2.5rem  !important; padding: 0.55rem 1.25rem !important; font-size: 0.95rem !important; }

.btn-primary {
    background-color: #4d7c0f !important; /* lime-700 */
    border-color: #3f6212 !important;
    color: #f7fee7 !important;
}
.btn-primary:hover {
    background-color: #365314 !important; /* lime-900 */
    border-color: #1a2e05 !important;
}

.btn-secondary {
    background-color: #0f172a !important; /* slate-900 */
    border-color: #0b1220 !important;
    color: #e2e8f0 !important;
}
.btn-secondary:hover {
    background-color: #020617 !important;
    border-color: #000 !important;
}

/* ---------- Inputs: borde definido y padding reducido ---------- */
.input, .select, .textarea {
    min-height: 2rem !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.85rem !important;
    border-radius: 0.4rem !important;
}

.input-bordered,
.select-bordered,
.textarea-bordered,
[data-theme] .input-bordered,
[data-theme] .select-bordered,
[data-theme] .textarea-bordered {
    border-color: #64748b !important; /* slate-500 */
    background-color: #ffffff !important;
    color: #0f172a !important;
}

.input-bordered:focus,
.select-bordered:focus,
.textarea-bordered:focus {
    outline: 2px solid #4d7c0f !important; /* lime-700 */
    outline-offset: 1px;
    border-color: #4d7c0f !important;
}

/* Labels más delgados */
.form-control {
    margin-bottom: 0.4rem !important;
}
.form-control .label {
    padding: 0.15rem 0 !important;
}
.form-control .label-text {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: #0f172a !important;
}

/* ---------- Tablas: filas más apretadas, headers con contraste ---------- */
.table :where(th, td) {
    padding: 0.4rem 0.55rem !important;
    font-size: 0.82rem !important;
}

.table thead th {
    background-color: #0b1220 !important;
    color: #d9f99d !important; /* lime-200 sobre fondo oscuro */
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.72rem !important;
}

[data-theme] thead.bg-lime-50,
[data-theme] .bg-lime-50 {
    background-color: #d9f99d !important;
}
[data-theme] thead.bg-lime-50 th {
    color: #1a2e05 !important;
    font-weight: 600;
    background-color: #bef264 !important;
}

[data-theme] .table-zebra tbody tr:nth-child(even) td {
    background-color: #eef2f7 !important;
}

[data-theme] .border-base-200 { border-color: #cbd5e1 !important; }
[data-theme] .border-base-300 { border-color: #64748b !important; }

/* ---------- Badges, alerts, stats ---------- */
.badge {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    height: auto !important;
}

[data-theme] .badge-ghost {
    background-color: #cbd5e1 !important; /* slate-300 */
    color: #0f172a !important;
}

.alert {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    min-height: auto !important;
    border-radius: 0.4rem !important;
}

.stat {
    padding: 0.65rem 0.8rem !important;
}

[data-theme] .stat-title {
    color: #334155 !important;
    opacity: 1 !important;
}

/* ---------- Divider más sutil ---------- */
.divider {
    margin: 0.35rem 0 !important;
}
.divider:before,
.divider:after {
    background-color: #cbd5e1 !important;
    height: 1px !important;
}

/* ---------- Menu / dropdowns ---------- */
/* Solo elementos interactivos; NO afectar `menu-title` ni divs de info */
.menu :where(li > a, li > button, li > summary, li > .logout-form) {
    padding: 0.3rem 0.55rem !important;
    border-radius: 0.35rem !important;
}

.dropdown-content {
    font-size: 0.85rem;
    overflow: hidden; /* evita que texto largo se escape del recuadro */
}

/* Menú de usuario: más ancho para que no se corte el email */
.dropdown-content.w-52 {
    width: 17rem !important;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
    padding: 0.15rem 0 !important;
    font-size: 0.78rem !important;
}
.breadcrumbs a { padding: 0 !important; }

/* ---------- Modales ---------- */
.modal-box {
    padding: 0.9rem !important;
    border-radius: 0.5rem !important;
}

/* ---------- Hero / landing sections: reducir aire ---------- */
section.relative.w-full.py-20,
section.relative.w-full.py-32,
section.py-16,
section.py-20 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

/* ---------- Container helpers ---------- */
.container { max-width: 100% !important; }

/* ---------- Footer: más bajo y oscuro ---------- */
footer.footer {
    padding: 0.6rem 0.9rem !important;
    margin-top: 1.25rem !important;
    background: #0b1220 !important;
    color: #e2e8f0 !important;
    border-top: 1px solid #65a30d !important;
}
footer.footer a { color: #bef264 !important; }
footer.footer .opacity-70 { opacity: 0.85 !important; color: #94a3b8 !important; }

/* ---------- Scrollbar fino y oscuro ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #64748b #e2e8f0;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: #e2e8f0; }
*::-webkit-scrollbar-thumb { background: #64748b; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ---------- Logout button styles (conservados) ---------- */
.logout-form { display: contents; }
.logout-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    transition: background-color 0.2s;
}
.logout-btn:hover { background-color: hsl(var(--b2)); }

.dark body { color-scheme: dark; }

/* =========================================================================
   RESPONSIVE: pantallas medianas y pequeñas — aún más compactas
   ========================================================================= */

/* HD 720p y tablets (≤1366px) */
@media (max-width: 1366px) {
    html { font-size: 13px; }
    main.flex-1 {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
    }
    .card-body { padding: 0.7rem 0.85rem !important; }
}

/* Tablets (≤1024px) */
@media (max-width: 1024px) {
    html { font-size: 12.5px; }
}

/* Móvil grande (≤768px) */
@media (max-width: 768px) {
    html { font-size: 12px; }
    body { background-attachment: scroll; }

    header.navbar { padding: 0.2rem 0.5rem !important; }
    header.navbar .h-10 { height: 1.75rem !important; }

    .card-body { padding: 0.55rem !important; }
    .stat { padding: 0.55rem 0.65rem !important; }
    .stat-value { font-size: 1.25rem !important; }
}

/* Móvil (≤480px) */
@media (max-width: 480px) {
    html { font-size: 12px; }
    body { background-image: none; }

    .card-body { padding: 0.4rem !important; }
    .py-2, .py-3, .py-4, .py-6, .py-8, .py-10, .py-12 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    .px-2, .px-3, .px-4, .px-6, .px-8 {
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
    }
    .p-4, .p-6, .p-8 { padding: 0.4rem !important; }
    .btn    { padding: 0.3rem 0.65rem !important; }
    .btn-sm { padding: 0.2rem 0.5rem  !important; }
    .stat   { padding: 0.5rem 0.45rem !important; }
    .input, .select, .textarea { padding: 0.3rem 0.45rem !important; }
}

/* =========================================================================
   ESTILOS PARA FICHA DE IMPRESIÓN DEL JUGADOR (player-sheet.html)
   (Conservados para preservar impresión correcta)
   ========================================================================= */

@media print {
    .player-sheet body { margin: 0; }
    .player-sheet .no-print { display: none !important; }
    .player-sheet .page { page-break-after: always; }
}

.player-sheet body {
    margin: 10px;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 12pt;
    background: white;
}

.player-sheet .page {
    width: 210mm;
    min-height: 297mm;
    box-sizing: border-box;
    margin: 0 auto;
    background: white;
    padding: 15mm;
}

.player-sheet .header {
    display: flex;
    align-items: center;
    margin-bottom: 10mm;
}

.player-sheet .logo { width: 40mm; margin-right: 10mm; }
.player-sheet .logo img { max-width: 100%; height: auto; }

.player-sheet .texts { flex: 1; text-align: center; }
.player-sheet .texts h1 { margin: 0; font-size: 16pt; font-weight: bold; color: #4a7c59; }
.player-sheet .texts h2 { margin: 2mm 0 0; font-size: 12pt; }
.player-sheet .texts h3 { margin: 1mm 0 0; font-size: 10pt; text-transform: uppercase; }

.player-sheet .title {
    margin: 8mm 0;
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    text-decoration: underline;
}

.player-sheet .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5mm 0;
}

.player-sheet .category { display: flex; gap: 10mm; }
.player-sheet .category span { display: flex; align-items: center; gap: 2mm; }

.player-sheet .checkbox {
    width: 5mm; height: 5mm;
    border: 1px solid #000;
    display: inline-block;
}
.player-sheet .checkbox.checked::after {
    content: "✓";
    display: block;
    text-align: center;
    line-height: 5mm;
}

.player-sheet .section { margin: 6mm 0; }
.player-sheet .section h4 {
    margin: 0 0 3mm;
    font-size: 12pt;
    font-weight: bold;
    color: #4a7c59;
}

.player-sheet .fields {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10mm;
}

.player-sheet .labels {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.player-sheet .field-label { margin-bottom: 5mm; }
.player-sheet .field-label strong { display: inline-block; width: 35mm; }

.player-sheet .field-value {
    border-bottom: 1px solid #000;
    display: inline-block;
    min-width: 70mm;
    padding-bottom: 1mm;
    font-weight: bold;
}

.player-sheet .box {
    border: 2px solid #4a7c59;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10pt;
}

.player-sheet .photo {
    width: 35mm; height: 45mm;
    overflow: hidden;
    background: #f5f5f5;
}
.player-sheet .photo img { width: 100%; height: 100%; object-fit: cover; }

.player-sheet .copy-id {
    margin-top: 5mm;
    border: 2px solid #4a7c59;
    width: 100%;
    height: 60mm;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10pt;
    background: #f5f5f5;
    overflow: hidden;
}
.player-sheet .copy-id img { max-width: 100%; max-height: 100%; object-fit: contain; }

.player-sheet .club-info {
    display: flex;
    align-items: center;
    gap: 5mm;
    margin: 6mm 0;
}
.player-sheet .club-info strong { white-space: nowrap; }
.player-sheet .club-info .value {
    border-bottom: 1px solid #000;
    padding-bottom: 1mm;
    font-weight: bold;
}
.player-sheet .club-info .club { flex: 1; min-width: 60mm; }
.player-sheet .club-info .num  { width: 25mm; text-align: center; font-size: 14pt; }

.player-sheet .footer-line {
    display: flex;
    align-items: center;
    gap: 5mm;
    margin: 8mm 0;
}

.player-sheet .recal-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6mm;
}
.player-sheet .recal-table th,
.player-sheet .recal-table td {
    border: 1px solid #000;
    padding: 2mm;
    text-align: center;
    font-size: 10pt;
}
.player-sheet .recal-table th {
    background-color: #4a7c59;
    color: white;
    font-weight: bold;
}
.player-sheet .recal-table tbody tr:nth-child(even) { background-color: #f5f5f5; }

.player-sheet .status-badge {
    display: inline-block;
    padding: 2mm 4mm;
    border-radius: 3mm;
    font-size: 10pt;
    font-weight: bold;
    margin-left: 5mm;
}
.player-sheet .status-badge.aprobado  { background: #d4f4dd; color: #2e7d32; border: 1px solid #2e7d32; }
.player-sheet .status-badge.pendiente { background: #fff3cd; color: #856404; border: 1px solid #856404; }
.player-sheet .status-badge.rechazado { background: #f8d7da; color: #721c24; border: 1px solid #721c24; }

.player-sheet .print-actions {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 5px;
}

.player-sheet .btn-print {
    background: #4a7c59;
    color: white;
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    font-size: 14pt;
    cursor: pointer;
    margin: 0 10px;
}
.player-sheet .btn-print:hover { background: #3d6649; }

.player-sheet .firma-line {
    border-top: 1px solid #000;
    margin-top: 3mm;
    padding-top: 1mm;
    text-align: center;
    font-size: 9pt;
    min-height: 15mm;
}

.player-sheet .signature-box {
    display: flex;
    justify-content: space-around;
    margin-top: 10mm;
    gap: 10mm;
}

.player-sheet .signature {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.player-sheet .signature .line {
    border-top: 1px solid #000;
    width: 100%;
    margin-bottom: 2mm;
    min-height: 20mm;
}

.player-sheet .signature .label { font-size: 9pt; font-weight: bold; }

/* =========================================================================
   ESTILOS PARA CARNET DE JUGADOR (id-player-season.html)
   (Conservados)
   ========================================================================= */

@media print {
    .id-player-season body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        margin: 0;
        padding: 0;
    }
    .id-player-season .no-print { display: none !important; }
    .id-player-season .print-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    .id-player-season .carnet-wrapper { page-break-inside: avoid; }
}

.id-player-season .carnet-container {
    width: 100mm;
    height: 150mm;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.id-player-season .text-with-outline {
    text-shadow:
        -1px -1px 0 white,
        1px -1px 0 white,
        -1px 1px 0 white,
        1px 1px 0 white,
        0 0 3px rgba(255,255,255,0.8);
}