/* Identidad visual de Cantera. Estos estilos complementan la base existente. */
:root {
    --bg: #f0f4ed;
    --ink: #18382d;
    --muted: #596d60;
    --green: #226345;
    --deep: #103c30;
    --lime: #c4f375;
    --line: #dde6d8;
    --radius: 18px;
}

/* Navegación: contraste fuerte y una selección fácil de reconocer. */
.sidebar {
    background: linear-gradient(165deg, #123f32, #092d25);
    border-right: 0;
    overflow-y: auto;
}
.brand { color: #fff; }
.brand-symbol { background: var(--lime); color: var(--deep); }
.brand-sub { color: #b6cdbb; }
.nav-label { color: #9db8a7; font-size: 10px; }
.nav-link { color: #d1e0d4; font-size: 13px; padding-block: 13px; }
.nav-link:hover { background: #ffffff12; color: #fff; }
.nav-link.active { background: var(--lime); color: #163c25; box-shadow: 0 6px 20px #0002; }
.nav-link.active:after { background: #2c5d32; }
.sidebar-note { color: #c9e0bd; }
.sidebar-note small { color: #a3bcac; white-space: normal; }
.topbar { background: #ffffffd9; }
.topbar-label, .topbar-date { font-size: 13px; color: #647565; }
.avatar { background: #e5efd9; color: #35582f; }

/* Tipografía y botones: el contenido importante gana tamaño. */
h1 { font-size: clamp(30px, 2.8vw, 42px); letter-spacing: -1.6px; }
.eyebrow { font-size: 10px; color: #52704f; letter-spacing: 1.8px; }
.subtitle { font-size: 14px; color: #5c7061; }
.button { min-height: 46px; border-radius: 10px; font-size: 13px; padding: 12px 19px; }
.primary { box-shadow: 0 5px 12px #194e3417; }
.primary:hover { background: #164f36; }
.light { background: var(--lime); }
.text-link, .actions a { font-size: 12px; color: #28653c; }
.back-link { font-size: 13px; color: #41623e; }

/* Portada: una cancha ilustrada con CSS, sin imágenes externas. */
.hero {
    min-height: 310px;
    background: radial-gradient(ellipse at 90% 15%, #397554 0, transparent 54%), #103c30;
    border: 1px solid #2b5e45;
    box-shadow: 0 12px 28px #153d3010;
}
.hero h2 { font-size: clamp(28px, 2.5vw, 38px); max-width: 560px; }
.hero p { font-size: 14px; color: #c3d8c7; }
.hero-tag { color: #d7efbc; font-size: 10px; border-color: #ffffff36; }
.hero .button { min-height: 43px; font-size: 12px; }
.pitch-art { opacity: 1; }
.pitch-outline { border-color: #aed98b70; background-color: #83b1600d; }
.pitch-mid, .pitch-circle, .pitch-box { border-color: #b8df9460; }
.pitch-caption { color: #cfdfb5; font-size: 9px; }
.pitch-player { width: 44px; height: 44px; font-size: 13px; }

/* Indicadores con colores propios y cifras reales de la base de datos. */
.stat-card { position: relative; overflow: hidden; border-radius: 15px; padding: 22px; }
.stat-card:before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: #84b84a; }
.stat-card:nth-child(2):before { background: #609bad; }
.stat-card:nth-child(3):before { background: #c9a550; }
.stat-card:nth-child(4):before { background: #9b83b8; }
.stat-card:nth-child(2) .stat-icon { color: #407489; background: #eaf3f6; }
.stat-card:nth-child(3) .stat-icon { color: #957329; background: #faf3df; }
.stat-card:nth-child(4) .stat-icon { color: #7c5b96; background: #f2ebf7; }
.stat-top { font-size: 13px; color: #55694f; }
.stat-card > strong { font-size: 40px; }
.stat-card > small { font-size: 11px; color: #5f7355; }
.stat-icon { width: 38px; height: 38px; }

/* Accesos a las tareas frecuentes. */
.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 0 0 26px; }
.quick-action { display: flex; align-items: center; gap: 13px; border: 1px solid #d6e2cb; border-radius: 13px; padding: 17px; background: #e8f0df; transition: background .15s; }
.quick-action:hover { background: #dceacb; }
.quick-action > .icon { width: 24px; height: 24px; color: #4f7435; }
.quick-action strong { display: block; font-size: 13px; }
.quick-action small { margin-top: 3px; font-size: 11px; color: #647453; }
.quick-action .arrow { margin-left: auto; color: #537a3b; }

/* Listas, fotografías, formularios y fichas. */
.panel { box-shadow: 0 4px 18px #17382204; }
.panel-heading h2 { font-size: 18px; }
.panel-heading .eyebrow { font-size: 9px; }
thead { background: #edf3e6; color: #536647; }
th { font-size: 11px; font-weight: 650; padding-block: 14px; }
td { font-size: 13px; padding-block: 18px; }
td small { font-size: 11px; color: #65765d; }
.person strong { font-size: 13px; }
.player-photo, .photo-placeholder { width: 44px; height: 44px; border-radius: 13px; }
.photo-placeholder { font-size: 13px; background: #e4eed9; color: #426632; }
.badge { font-size: 11px; padding: 5px 9px; border-radius: 6px; }
.badge.neutral { color: #56674a; }
.score { font-size: 22px; }
.rank.first { background: #f4e6ab; color: #745811; }
.schedule-row strong { font-size: 13px; }
.schedule-row small { font-size: 11px; color: #617357; }
.date-tile { background: #e8f0dd; min-width: 54px; }
.date-tile strong { font-size: 22px; }
.date-tile small { font-size: 9px; }
.panel-footer { font-size: 12px; color: #446b32; background: #f0f5e9; }
.incident-summary strong { font-size: 12px; }
.incident-summary small { font-size: 11px; color: #67765e; }
.team-card { position: relative; border-top: 5px solid #739b4c; background: linear-gradient(140deg, #f3f8e9, #fff 60%); }
.team-card:nth-child(3n+2) { border-top-color: #5b8fa5; background: linear-gradient(140deg, #edf5f7, #fff 60%); }
.team-card:nth-child(3n+3) { border-top-color: #c4a352; background: linear-gradient(140deg, #faf4e5, #fff 60%); }
.team-card h2 { font-size: 22px; }
.team-card p { font-size: 13px; }
.team-emblem { width: 70px; height: 76px; border-radius: 18px; }
.team-emblem .icon { width: 40px; height: 40px; }
.entity-form label, .filter-bar label { font-size: 13px; }
.entity-form div[id$=_help] { font-size: 12px; color: #5c7050; }
.entity-form input:not([type=hidden]), .entity-form select, .entity-form textarea, .filter-bar input, .filter-bar select { min-height: 48px; background: #fcfdf9; }
.form-panel { border-top: 5px solid #9ac16d; }
.upload-section { background: #f3f8eb; }
.player-profile { background: linear-gradient(115deg, #edf5e3, #fff 70%); }
.profile-total { padding: 12px 25px; border-radius: 14px; background: #e7f0dd; }
.profile-incident p { font-size: 13px; }
.report-context { color: #566f48; }
.report-footnote, .site-footer { color: #5c7152; }

@media (max-width: 1200px) {
    .quick-action { padding: 14px; gap: 10px; }
    .quick-action small { font-size: 10px; }
    .hero h2 { font-size: 31px; }
    .hero p { font-size: 13px; }
}
@media (max-width: 950px) {
    .nav-link { font-size: 12px; }
    .quick-actions { grid-template-columns: 1fr; gap: 9px; }
    .quick-action { padding: 13px 17px; }
    .quick-action small { font-size: 11px; }
}
@media (max-width: 700px) {
    .topbar-label { font-size: 10px; }
    .topbar-date { font-size: 11px; }
    .hero { min-height: 310px; padding: 26px 22px; }
    .hero h2 { font-size: 29px; }
    .hero p { font-size: 13px; }
    .pitch-art { opacity: .3; }
    .subtitle { font-size: 13px; }
    .stat-card { padding: 17px; }
    .stat-top { font-size: 11px; }
    .stat-icon { width: 29px; height: 29px; }
    .stat-card > strong { font-size: 34px; }
    .stat-card > small { font-size: 10px; }
    .panel-heading h2 { font-size: 16px; }
    .ranking-panel .table-scroll table { min-width: 0; table-layout: fixed; }
    .ranking-panel table th:nth-child(3), .ranking-panel table td:nth-child(3) { display: none; }
    .ranking-panel table th:first-child, .ranking-panel table td:first-child { width: 45px; padding-inline: 10px; }
    .ranking-panel table th:last-child, .ranking-panel table td:last-child { width: 52px; padding-inline: 10px; }
    .ranking-panel table th:nth-child(2), .ranking-panel table td:nth-child(2) { padding-inline: 6px; }
    .ranking-panel .person { min-width: 0; gap: 8px; }
    .ranking-panel .person strong { font-size: 11px; overflow-wrap: anywhere; }
    .ranking-panel .player-photo { width: 31px; height: 31px; }
    .profile-total { padding: 12px 18px; }
}
@media print {
    .quick-actions { display: none; }
    .panel { box-shadow: none; border-radius: 0; }
    th, td { font-size: 11px; padding: 9px; }
    .badge { font-size: 10px; }
}

/* Acceso público y administración */
.session-controls {padding:16px 20px;display:grid;gap:12px;}
.session-label {font-size:.8rem;color:#c9e0d5;overflow-wrap:anywhere;}
.session-controls form {margin:0;}
.login-panel {max-width:560px;margin:40px auto;padding:32px;}
.login-panel form {display:grid;gap:12px;margin:24px 0;}
.login-panel input {width:100%;min-width:0;padding:12px;border:1px solid #bccdc5;border-radius:10px;font:inherit;box-sizing:border-box;}
@media(max-width:600px){.login-panel{margin:12px 0;padding:22px;}}