#alerta-registro {
    display: none;
    align-items: center;
    gap: .6rem;
    background: #fff0f0;
    border: 1.5px solid var(--rojo);
    color: var(--rojo);
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: .88rem;
    margin-bottom: 1rem;
}
#alerta-registro::before {
    content: '⚠';
    font-size: 1rem;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

:root {
      --rojo:    #D72B2B;
      --azul:    #1A3A8C;
      --azul2:   #0d2260;
      --verde:   #2E7D32;
      --verde-l: #E8F5E9;
      --naranja: #E87B1E;
      --amarillo:#F5C400;
      --gris:    #F4F5F7;
      --gris2:   #E8EAF0;
      --texto:   #1A1A2E;
      --sombra:  rgba(26,58,140,.10);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Barlow', sans-serif; background: var(--gris); color: var(--texto); min-height: 100vh; }

    /* ── STRIPE ── */
    .top-stripe { height: 5px; background: linear-gradient(90deg, var(--rojo) 0%, var(--naranja) 25%, var(--amarillo) 50%, var(--verde) 75%, var(--azul) 100%); }

    /* ── TOPBAR ── */
    .topbar { background: var(--azul); padding: .55rem 2rem; display: flex; justify-content: space-between; align-items: center; }
    .topbar-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
    .topbar-brand .t { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.1rem; color: #fff; letter-spacing: .04em; }
    .topbar-brand .s { font-size: 1.65rem; color: rgba(255,255,255,.5); letter-spacing: .08em; text-transform: uppercase; }
    .topbar-right { display: flex; align-items: center; gap: 1rem; }
    .topbar-user { display: flex; align-items: center; gap: .65rem; }
    .avatar { width: 36px; height: 36px; background: rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
    .uname { font-size: .82rem; color: rgba(255,255,255,.85); font-weight: 600; }
    .uci { font-size: .7rem; color: rgba(255,255,255,.45); }
    .btn-logout { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: .4rem .9rem; border-radius: 7px; cursor: pointer; text-decoration: none; transition: background .15s; }
    .btn-logout:hover { background: rgba(255,255,255,.2); }

    /* ── LAYOUT ── */
    .layout { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 45px); }

    /* ── SIDEBAR ── */
    .sidebar { background: var(--azul2); padding: 1.5rem 0; position: sticky; top: 0; height: calc(100vh - 45px); overflow-y: auto; }
    .sidebar-section { padding: 0 1rem; margin-bottom: 1.8rem; }
    .sidebar-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.3); padding: 0 .5rem; margin-bottom: .5rem; }
    .sidebar-item { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border-radius: 9px; text-decoration: none; color: rgba(255,255,255,.6); font-size: .88rem; font-weight: 500; transition: all .18s; margin-bottom: .15rem; cursor: pointer; border: none; background: none; width: 100%; }
    .sidebar-item:hover { background: rgba(255,255,255,.07); color: #fff; }
    .sidebar-item.active { background: var(--azul); color: #fff; }
    .sidebar-item .ico { font-size: 1rem; width: 20px; text-align: center; }

    /* ── MAIN ── */
    .main { padding: 0; overflow-y: auto; }

    /* Page header */
    .page-header { background: linear-gradient(135deg, var(--azul) 0%, var(--azul2) 100%); padding: 2rem 2rem 1.8rem; position: relative; overflow: hidden; }
    .page-header::after { content: ''; position: absolute; right: -50px; top: -50px; width: 250px; height: 250px; border: 45px solid rgba(255,255,255,.05); border-radius: 50%; pointer-events: none; }
    .page-header::before { content: ''; position: absolute; left: 40%; bottom: -30px; width: 160px; height: 160px; border: 30px solid rgba(255,255,255,.04); border-radius: 50%; pointer-events: none; }
    .page-header-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
    .page-header h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.9rem; color: #fff; letter-spacing: .02em; margin-bottom: .2rem; }
    .page-header .welcome { color: rgba(255,255,255,.65); font-size: .92rem; }
    .page-header .welcome strong { color: #fff; }
    .btn-add-inst { display: inline-flex; align-items: center; gap: .6rem; background: var(--amarillo); color: var(--texto); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; padding: .75rem 1.5rem; border-radius: 10px; border: none; cursor: pointer; transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 14px rgba(245,196,0,.4); white-space: nowrap; }
    .btn-add-inst:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(245,196,0,.5); }

    /* ── CONTENT ── */
    .content { padding: 1.8rem 2rem; }

    /* Stats */
    .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
    .stat-card { background: #fff; border-radius: 12px; padding: 1.1rem 1.2rem; box-shadow: 0 2px 10px var(--sombra); border-left: 4px solid var(--azul); display: flex; align-items: center; gap: .9rem; }
    .stat-card:nth-child(2) { border-left-color: var(--verde); }
    .stat-card:nth-child(3) { border-left-color: var(--naranja); }
    .stat-card:nth-child(4) { border-left-color: var(--rojo); }
    .stat-icon { font-size: 1.5rem; }
    .stat-val { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.6rem; color: var(--texto); line-height: 1; }
    .stat-label { font-size: .75rem; color: #888; margin-top: .1rem; }

    /* Section title */
    .section-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.15rem; letter-spacing: .05em; text-transform: uppercase; color: var(--azul); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
    .section-title::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--gris2), transparent); border-radius: 2px; }

    /* ── INSTITUTION CARDS ── */
    .inst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.2rem; margin-bottom: 2rem; }

    .inst-card { background: #fff; border-radius: 16px; box-shadow: 0 2px 14px var(--sombra); overflow: hidden; transition: transform .18s, box-shadow .18s; }
    .inst-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px var(--sombra); }

    .inst-card-header { background: linear-gradient(135deg, var(--azul), #2a5ab5); padding: 1.1rem 1.3rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
    .inst-card-header.verde { background: linear-gradient(135deg, var(--verde), #388e3c); }
    .inst-card-header.naranja { background: linear-gradient(135deg, #c06000, var(--naranja)); }
    .inst-card-header.rojo { background: linear-gradient(135deg, #a01010, var(--rojo)); }

    .inst-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.05rem; color: #fff; letter-spacing: .02em; line-height: 1.2; }
    .inst-meta { font-size: .75rem; color: rgba(255,255,255,.65); margin-top: .3rem; }

    .status-badge { flex-shrink: 0; border-radius: 20px; padding: .25rem .7rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
    .status-badge.completa  { background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.35); }
    .status-badge.pendiente { background: rgba(245,196,0,.25); color: var(--amarillo); border: 1px solid rgba(245,196,0,.4); }
    .status-badge.incompleta{ background: rgba(215,43,43,.25); color: #ffaaaa; border: 1px solid rgba(215,43,43,.4); }

    .inst-card-body { padding: 1.1rem 1.3rem; }

    .inst-detail-row { display: flex; align-items: center; gap: .5rem; font-size: .83rem; color: #666; margin-bottom: .45rem; }
    .inst-detail-row:last-child { margin-bottom: 0; }
    .inst-detail-row .ico { font-size: .9rem; width: 18px; text-align: center; flex-shrink: 0; }
    .inst-detail-row strong { color: var(--texto); }

    /* Progress bar */
    .progress-wrap { margin: .9rem 0 .3rem; }
    .progress-label { display: flex; justify-content: space-between; font-size: .75rem; color: #888; margin-bottom: .35rem; }
    .progress-bar { height: 6px; background: var(--gris2); border-radius: 3px; overflow: hidden; }
    .progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--verde), #66bb6a); transition: width .4s ease; }
    .progress-fill.amarillo { background: linear-gradient(90deg, #e65100, var(--naranja)); }
    .progress-fill.rojo { background: linear-gradient(90deg, #7f0000, var(--rojo)); }

    .inst-card-footer { padding: .85rem .5rem; border-top: 1px solid var(--gris2); display: flex; gap: .5rem; flex-wrap: wrap; }

    .btn-sm { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; border: none; cursor: pointer; text-decoration: none; transition: all .15s; }
    .btn-sm.primary { background: var(--azul); color: #fff; }
    .btn-sm.primary:hover { background: var(--azul2); }
    .btn-sm.outline { background: transparent; color: var(--azul); border: 1.5px solid var(--azul); }
    .btn-sm.outline:hover { background: var(--azul); color: #fff; }
    .btn-sm.danger { background: transparent; color: var(--rojo); border: 1.5px solid #ffcdd2; margin-left: auto; }
    .btn-sm.danger:hover { background: #ffebee; border-color: var(--rojo); }

    /* Empty state */
    .empty-state { text-align: center; padding: 3.5rem 2rem; background: #fff; border-radius: 16px; box-shadow: 0 2px 14px var(--sombra); }
    .empty-icon { font-size: 3.5rem; margin-bottom: 1rem; }
    .empty-state h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.5rem; color: var(--texto); margin-bottom: .5rem; }
    .empty-state p { color: #888; font-size: .92rem; max-width: 380px; margin: 0 auto 1.5rem; line-height: 1.6; }

    /* ── MODAL ── */
    .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); z-index: 200; align-items: center; justify-content: center; padding: 1.5rem; }
    .modal-overlay.open { display: flex; }
    .modal { background: #fff; border-radius: 20px; width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: slideUp .22s ease; }
    @keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

    .modal-header { background: linear-gradient(135deg, var(--azul), var(--azul2)); padding: 1.4rem 1.6rem; border-radius: 20px 20px 0 0; display: flex; align-items: center; justify-content: space-between; }
    .modal-header h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.3rem; color: #fff; letter-spacing: .03em; }
    .modal-header p { font-size: .78rem; color: rgba(255,255,255,.6); margin-top: .15rem; }
    .modal-close { background: rgba(255,255,255,.15); border: none; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; color: #fff; transition: background .15s; flex-shrink: 0; }
    .modal-close:hover { background: rgba(255,255,255,.28); }

    .modal-body { padding: 1.6rem; }
    .modal-footer { padding: 1rem 1.6rem 1.4rem; display: flex; gap: .8rem; }

    /* Form fields */
    .field { margin-bottom: 1.1rem; }
    .field label { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #555; margin-bottom: .38rem; }
    .field-wrap { position: relative; }
    .field-icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); font-size: 1rem; pointer-events: none; color: #bbb; }
    .field input, .field select { width: 100%; padding: .72rem .9rem .72rem 2.5rem; border: 2px solid #e8eaf0; border-radius: 10px; font-family: 'Barlow', sans-serif; font-size: .93rem; color: var(--texto); background: var(--gris); transition: border-color .18s, box-shadow .18s; outline: none; appearance: none; }
    .field input:focus, .field select:focus { border-color: var(--azul); background: #fff; box-shadow: 0 0 0 3px rgba(26,58,140,.1); }
    .field input::placeholder { color: #bbb; }
    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

    .divider-text { display: flex; align-items: center; gap: .8rem; color: #bbb; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin: 1.2rem 0; }
    .divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--gris2); }

    /* Search inst */
    .search-inst-wrap { position: relative; }
    .search-inst-wrap input { padding-left: 2.5rem; }
    .search-results { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 2px solid var(--azul); border-top: none; border-radius: 0 0 10px 10px; max-height: 200px; overflow-y: auto; z-index: 10; display: none; }
    .search-results.open { display: block; }
    .search-result-item { padding: .65rem 1rem; font-size: .88rem; cursor: pointer; border-bottom: 1px solid var(--gris2); transition: background .15s; }
    .search-result-item:last-child { border-bottom: none; }
    .search-result-item:hover { background: #f0f4ff; }
    .search-result-item .dept { font-size: .72rem; color: #999; margin-top: .1rem; }

    .btn-main { width: 100%; background: var(--azul); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: .07em; text-transform: uppercase; padding: .85rem; border-radius: 10px; border: none; cursor: pointer; transition: background .18s, transform .15s, box-shadow .15s; box-shadow: 0 4px 14px rgba(26,58,140,.3); display: flex; align-items: center; justify-content: center; gap: .6rem; }
    .btn-main:hover { background: var(--azul2); transform: translateY(-2px); }
    .btn-cancel { flex: 1; background: var(--gris); color: #666; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; padding: .8rem; border-radius: 10px; border: none; cursor: pointer; transition: background .15s; }
    .btn-cancel:hover { background: var(--gris2); }

    /* Alert */
    .alerta { display: none; align-items: center; gap: .6rem; border-radius: 8px; padding: .7rem 1rem; font-size: .86rem; margin-bottom: 1rem; }
    .alerta.error { background: #fff0f0; border: 1.5px solid var(--rojo); color: var(--rojo); }
    .alerta.error::before { content: '⚠'; font-size: 1rem; flex-shrink: 0; }
    .alerta.success { background: var(--verde-l); border: 1.5px solid #a5d6a7; color: var(--verde); }
    .alerta.success::before { content: '✓'; font-size: 1rem; flex-shrink: 0; }

    /* Responsive */
    @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .sidebar { display: none; } .stats-row { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 600px) { .content { padding: 1.2rem; } .stats-row { grid-template-columns: 1fr; } .page-header-inner { flex-direction: column; align-items: flex-start; } }


    .autocomplete-wrap { position: relative; }

.autocomplete-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 2px solid var(--azul);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(26,58,140,.15);
    max-height: 260px;
    overflow-y: auto;
    z-index: 50;
}
.autocomplete-dropdown.open { display: block; }

.ac-item {
    padding: .7rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--gris2);
    transition: background .12s;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.focused { background: #f0f4ff; }

.ac-item-nombre {
    font-weight: 600;
    font-size: .9rem;
    color: var(--texto);
}
.ac-item-nombre mark {
    background: #fff3cd;
    color: var(--texto);
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 700;
}
.ac-item-meta {
    font-size: .75rem;
    color: #999;
    margin-top: .15rem;
}

.ac-loading, .ac-empty {
    padding: .9rem 1rem;
    font-size: .85rem;
    color: #aaa;
    text-align: center;
}

/* Chip de selección */
.ac-selected-chip {
    display: none;
    align-items: center;
    gap: .6rem;
    background: var(--verde-l);
    border: 1.5px solid #a5d6a7;
    border-radius: 8px;
    padding: .55rem .9rem;
    margin-top: .5rem;
    font-size: .85rem;
    color: var(--verde);
}
.ac-selected-chip.visible { display: flex; }
.ac-selected-chip strong { color: var(--texto); }
.ac-chip-clear {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    transition: color .15s;
}
.ac-chip-clear:hover { color: var(--rojo); }

/* Breadcrumb */
.breadcrumb {
  background: #fff;
  border-bottom: 1px solid var(--gris2);
  padding: .7rem 2rem;
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; color: #999;
}
.breadcrumb a { color: var(--azul); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: #ccc; }


/* Page header */
    .page-header {
      background: linear-gradient(135deg, var(--azul) 0%, var(--azul2) 100%);
      padding: 2rem 2rem 1.6rem;
      position: relative;
      overflow: hidden;
    }
    .page-header::after {
      content: '';
      position: absolute;
      right: -40px; top: -40px;
      width: 220px; height: 220px;
      border: 40px solid rgba(255,255,255,.05);
      border-radius: 50%;
      pointer-events: none;
    }
    .page-header-inner {
      display: flex; justify-content: space-between; align-items: flex-end;
      position: relative; z-index: 1;
    }
    .page-header h1 {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900; font-size: 2rem;
      color: #fff; letter-spacing: .02em;
      margin-bottom: .2rem;
    }
    .page-header .subtitle {
      color: rgba(255,255,255,.65); font-size: .9rem;
    }
    .institution-badge {
      display: flex; align-items: center; gap: .7rem;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 12px;
      padding: .7rem 1.1rem;
    }
    .institution-badge .flag { font-size: 1.6rem; }
    .institution-badge .inst-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800; font-size: 1.1rem;
      color: #fff; letter-spacing: .03em;
    }
    .institution-badge .inst-code {
      font-size: .7rem; color: rgba(255,255,255,.5);
      letter-spacing: .08em; text-transform: uppercase;
    }




    /* Contenido */
    .content { padding: 1.8rem 2rem; }
 
    /* ── CARD ── */
    .card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 2px 16px var(--sombra);
      margin-bottom: 1.5rem;
      overflow: hidden;
    }
    .card-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.1rem 1.5rem;
      border-bottom: 1px solid var(--gris2);
    }
    .card-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800; font-size: 1.1rem;
      letter-spacing: .04em; text-transform: uppercase;
      color: var(--azul);
      display: flex; align-items: center; gap: .5rem;
    }
    .card-badge {
      background: var(--gris);
      border-radius: 6px;
      padding: .2rem .6rem;
      font-size: .72rem;
      color: #888;
      font-family: 'Barlow', sans-serif;
      font-weight: 600;
      letter-spacing: .04em;
    }
 
    /* ── TABLA DEPORTIVA ── */
    .sport-table { width: 100%; border-collapse: collapse; }
    .sport-table thead tr th {
      background: var(--azul);
      color: rgba(255,255,255,.85);
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: .75rem;
      letter-spacing: .08em; text-transform: uppercase;
      padding: .7rem .9rem;
      text-align: center;
      border-right: 1px solid rgba(255,255,255,.1);
    }
    .sport-table thead tr:first-child th.sport-col {
      text-align: left;
    }
    .sport-table thead tr th.group-atleta { background: #1e4aaa; }
    .sport-table thead tr th.group-tecnico { background: #163580; }
    .sport-table thead tr th.group-delegado { background: #0f2560; }
    .sport-table thead tr th.sport-col { background: var(--azul2); }
    .sport-table thead tr th.action-col { background: var(--azul2); }
 
    .sport-table tbody tr {
      border-bottom: 1px solid var(--gris2);
      transition: background .15s;
    }
    .sport-table tbody tr:last-child { border-bottom: none; }
    .sport-table tbody tr:hover { background: #f7f9ff; }
 
    .sport-table td {
      padding: .7rem .9rem;
      text-align: center;
      vertical-align: middle;
    }
    .sport-table td.sport-name {
      text-align: left;
      font-weight: 600;
      font-size: .92rem;
      color: var(--texto);
      padding-left: 1.2rem;
    }
    .sport-table td.sport-name .sport-icon {
      display: inline-block;
      margin-right: .4rem;
      font-size: .95rem;
    }
 
    /* Botón ojo */
    .btn-eye {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px;
      background: var(--verde);
      color: #fff;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: .9rem;
      transition: background .15s, transform .12s, box-shadow .15s;
      text-decoration: none;
      box-shadow: 0 2px 6px rgba(46,125,50,.3);
    }
    .btn-eye:hover {
      background: #1b5e20;
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(46,125,50,.4);
    }
    .btn-eye.disabled {
      background: var(--gris2);
      color: #bbb;
      cursor: not-allowed;
      box-shadow: none;
    }
    .btn-eye.disabled:hover { transform: none; }
 
    /* Botón lista */
    .btn-list {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px;
      background: rgba(26,58,140,.1);
      color: var(--azul);
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: .9rem;
      transition: all .15s;
      text-decoration: none;
    }
    .btn-list:hover { background: var(--azul); color: #fff; }
 
    /* Celda vacía */
    .cell-empty {
      color: #ddd;
      font-size: .75rem;
      letter-spacing: .05em;
    }
 
    /* ── TABLA MISIÓN ── */
    .mission-table { width: 100%; border-collapse: collapse; }
    .mission-table tbody tr {
      border-bottom: 1px solid var(--gris2);
      transition: background .15s;
    }
    .mission-table tbody tr:last-child { border-bottom: none; }
    .mission-table tbody tr:hover { background: #f7f9ff; }
    .mission-table td {
      padding: .85rem 1.2rem;
      vertical-align: middle;
    }
    .mission-role {
      display: flex; align-items: center; gap: .6rem;
      font-weight: 600; font-size: .92rem; color: var(--texto);
    }
    .mission-role .role-icon {
      width: 30px; height: 30px;
      background: var(--gris);
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: .85rem; flex-shrink: 0;
    }
    .mission-quota {
      text-align: center;
    }
    .quota-pill {
      display: inline-block;
      background: var(--gris);
      border: 1.5px solid var(--gris2);
      border-radius: 20px;
      padding: .25rem .8rem;
      font-size: .78rem;
      font-weight: 600;
      color: #777;
      letter-spacing: .04em;
    }
    .quota-pill.filled {
      background: var(--verde-l);
      border-color: #a5d6a7;
      color: var(--verde);
    }
    .mission-action { text-align: right; padding-right: 1.2rem; }
 
    /* Stats row */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .stat-card {
      background: #fff;
      border-radius: 12px;
      padding: 1.1rem 1.2rem;
      box-shadow: 0 2px 10px var(--sombra);
      border-left: 4px solid var(--azul);
      display: flex; align-items: center; gap: .9rem;
    }
    .stat-card:nth-child(2) { border-left-color: var(--verde); }
    .stat-card:nth-child(3) { border-left-color: var(--naranja); }
    .stat-card:nth-child(4) { border-left-color: var(--rojo); }
    .stat-icon { font-size: 1.5rem; }
    .stat-val {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900; font-size: 1.6rem;
      color: var(--texto); line-height: 1;
    }
    .stat-label { font-size: .75rem; color: #888; margin-top: .1rem; }
 
    /* Responsive */
    @media (max-width: 900px) {
      .layout { grid-template-columns: 1fr; }
      .sidebar { display: none; }
      .stats-row { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 600px) {
      .page-header-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
      .content { padding: 1.2rem; }
      .stats-row { grid-template-columns: 1fr; }
    }

    .sport-col.text-center{text-align: center !important;}

    .btn-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: transform .12s, box-shadow .15s, background .15s;
}
.btn-accion:hover:not(:disabled) {
    transform: scale(1.12);
}

/* ── AGREGAR — verde ── */
.btn-accion.agregar {
    background: var(--verde);
    color: #fff;
    box-shadow: 0 2px 8px rgba(46,125,50,.35);
}
.btn-accion.agregar:hover {
    background: #1b5e20;
    box-shadow: 0 4px 14px rgba(46,125,50,.45);
}

/* ── VER — azul ── */
.btn-accion.ver {
    background: var(--azul);
    color: #fff;
    box-shadow: 0 2px 8px rgba(26,58,140,.3);
}
.btn-accion.ver:hover {
    background: var(--azul2);
    box-shadow: 0 4px 14px rgba(26,58,140,.4);
}

/* ── COMPLETO — gris deshabilitado ── */
.btn-accion.completo {
    background: var(--gris2);
    color: #bbb;
    cursor: not-allowed;
    box-shadow: none;
}

.crop-ctrl {
    width: 38px; height: 38px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.crop-ctrl:hover { background: rgba(255,255,255,.22); }





/* MODAL ATLETAS */
/* ── MODAL ── */
#modal-atletas .modal { background: #fff; border-radius: 20px; width: 100%; max-width: 680px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: slideUp .22s ease; overflow: hidden; }
#modal-atletas @keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ── HEADER ── */
#modal-atletas .modal-header { background: linear-gradient(135deg, var(--azul), var(--azul2)); padding: 1.2rem 1.5rem; flex-shrink: 0; }
#modal-atletas .modal-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
#modal-atletas .modal-header h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.3rem; color: #fff; letter-spacing: .03em; line-height: 1.2; }
#modal-atletas .modal-header-meta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }
#modal-atletas .meta-chip { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: .22rem .75rem; font-size: .72rem; color: rgba(255,255,255,.8); letter-spacing: .05em; text-transform: uppercase; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; }
#modal-atletas .meta-chip.verde  { background: rgba(46,125,50,.35); border-color: rgba(46,125,50,.5); color: #a5d6a7; }
#modal-atletas .meta-chip.naranja{ background: rgba(232,123,30,.35); border-color: rgba(232,123,30,.5); color: #ffcc80; }
#modal-atletas .modal-close { background: rgba(255,255,255,.12); border: none; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; color: #fff; font-size: 1rem; flex-shrink: 0; transition: background .15s; }
#modal-atletas .modal-close:hover { background: rgba(255,255,255,.25); }

/* Progress cupo */
#modal-atletas .cupo-bar-wrap { display: flex; align-items: center; gap: .8rem; }
#modal-atletas .cupo-label { font-size: .78rem; color: rgba(255,255,255,.65); white-space: nowrap; }
#modal-atletas .cupo-label strong { color: #fff; }
#modal-atletas .cupo-bar { flex: 1; height: 6px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
#modal-atletas .cupo-fill { height: 100%; border-radius: 3px; background: #69f0ae; transition: width .4s ease; }
#modal-atletas .cupo-fill.lleno { background: #ff5252; }
#modal-atletas .cupo-fill.medio { background: var(--amarillo); }

/* ── CUERPO ── */
#modal-atletas .modal-body { flex: 1; overflow-y: auto; }

/* ── VISTA: LISTA ── */
#modal-atletas #vista-lista { display: block; }
#modal-atletas #vista-form  { display: none; }

#modal-atletas .lista-toolbar { padding: .9rem 1.4rem; border-bottom: 1px solid var(--gris2); display: flex; align-items: center; justify-content: space-between; gap: .8rem; background: var(--gris); }
#modal-atletas .lista-toolbar-left { font-size: .82rem; color: #888; }
#modal-atletas .lista-toolbar-left strong { color: var(--texto); }

#modal-atletas .btn-agregar-nuevo { display: inline-flex; align-items: center; gap: .45rem; background: var(--verde); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: .88rem; letter-spacing: .05em; text-transform: uppercase; padding: .5rem 1.1rem; border-radius: 8px; border: none; cursor: pointer; transition: background .15s, transform .12s; box-shadow: 0 2px 8px rgba(46,125,50,.3); }
#modal-atletas .btn-agregar-nuevo:hover { background: #1b5e20; transform: translateY(-1px); }
#modal-atletas .btn-agregar-nuevo:disabled { background: var(--gris2); color: #bbb; cursor: not-allowed; box-shadow: none; transform: none; }

/* Tabla de inscriptos */
#modal-atletas .inscriptos-table { width: 100%; border-collapse: collapse; }
#modal-atletas .inscriptos-table thead th { background: var(--azul); color: rgba(255,255,255,.85); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: .65rem 1rem; text-align: left; }
#modal-atletas .inscriptos-table thead th:last-child { text-align: center; }
#modal-atletas .inscriptos-table tbody tr { border-bottom: 1px solid var(--gris2); transition: background .12s; }
#modal-atletas .inscriptos-table tbody tr:last-child { border-bottom: none; }
#modal-atletas .inscriptos-table tbody tr:hover { background: #f7f9ff; }
#modal-atletas .inscriptos-table td { padding: .75rem 1rem; vertical-align: middle; font-size: .88rem; }

#modal-atletas .atleta-info { display: flex; align-items: center; gap: .75rem; }
#modal-atletas .atleta-foto { width: 38px; height: 38px; border-radius: 8px; background: var(--gris2); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 1.2rem; }
#modal-atletas .atleta-foto img { width: 100%; height: 100%; object-fit: cover; }
#modal-atletas .atleta-nombre { font-weight: 600; color: var(--texto); font-size: .9rem; }
#modal-atletas .atleta-ci { font-size: .75rem; color: #888; margin-top: .1rem; }

#modal-atletas .doc-chip { display: inline-flex; align-items: center; gap: .3rem; border-radius: 6px; padding: .2rem .55rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
#modal-atletas .doc-chip.ok  { background: var(--verde-l); color: var(--verde); }
#modal-atletas .doc-chip.pendiente { background: #fff8e1; color: #e65100; }

#modal-atletas .td-acciones { display: flex; align-items: center; justify-content: center; gap: .4rem; }
#modal-atletas .btn-tbl { width: 32px; height: 32px; border-radius: 7px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .14s; }
#modal-atletas .btn-tbl.editar { background: rgba(26,58,140,.1); color: var(--azul); }
#modal-atletas .btn-tbl.editar:hover { background: var(--azul); color: #fff; }
#modal-atletas .btn-tbl.quitar { background: rgba(215,43,43,.08); color: var(--rojo); }
#modal-atletas .btn-tbl.quitar:hover { background: var(--rojo); color: #fff; }

/* Empty state */
#modal-atletas .lista-empty { text-align: center; padding: 3rem 2rem; color: #aaa; }
#modal-atletas .lista-empty-icon { font-size: 2.5rem; margin-bottom: .8rem; }
#modal-atletas .lista-empty p { font-size: .9rem; line-height: 1.6; }

/* ── VISTA: FORMULARIO ── */
#modal-atletas .form-header { padding: .9rem 1.4rem; border-bottom: 1px solid var(--gris2); background: var(--gris); display: flex; align-items: center; gap: .8rem; }
#modal-atletas .btn-back { background: none; border: none; cursor: pointer; color: var(--azul); display: flex; align-items: center; gap: .35rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .88rem; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 6px; transition: background .14s; }
#modal-atletas .btn-back:hover { background: var(--gris2); }
#modal-atletas .form-header-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; color: var(--texto); letter-spacing: .03em; }

#modal-atletas .form-body { padding: 1.4rem; }

/* Upload foto */
#modal-atletas .upload-foto { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.4rem; }
#modal-atletas .foto-preview { width: 80px; height: 80px; border-radius: 12px; background: var(--gris2); border: 2px dashed #ccc; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; cursor: pointer; transition: border-color .15s; }
#modal-atletas .foto-preview:hover { border-color: var(--azul); }
#modal-atletas .foto-preview img { width: 100%; height: 100%; object-fit: cover; display: none; }
#modal-atletas .foto-preview-icon { color: #ccc; font-size: 1.8rem; }
#modal-atletas .foto-info p { font-size: .82rem; color: #888; line-height: 1.5; }
#modal-atletas .foto-info strong { color: var(--texto); font-size: .88rem; }
#modal-atletas .btn-upload { display: inline-flex; align-items: center; gap: .4rem; background: transparent; border: 1.5px solid var(--azul); color: var(--azul); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; padding: .4rem .9rem; border-radius: 7px; cursor: pointer; margin-top: .5rem; transition: all .14s; }
#modal-atletas .btn-upload:hover { background: var(--azul); color: #fff; }
#modal-atletas input[type="file"] { display: none; }

/* Fields */
#modal-atletas .field { margin-bottom: 1rem; }
#modal-atletas .field label { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: #555; margin-bottom: .35rem; }
#modal-atletas .field-wrap { position: relative; }
#modal-atletas .field-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); font-size: .95rem; pointer-events: none; color: #bbb; }
#modal-atletas .field input, .field select { width: 100%; padding: .7rem .85rem .7rem 2.4rem; border: 2px solid var(--gris2); border-radius: 9px; font-family: 'Barlow', sans-serif; font-size: .92rem; color: var(--texto); background: var(--gris); outline: none; transition: border-color .15s, box-shadow .15s; appearance: none; }
#modal-atletas .field input:focus, .field select:focus { border-color: var(--azul); background: #fff; box-shadow: 0 0 0 3px rgba(26,58,140,.1); }
#modal-atletas .field input::placeholder { color: #bbb; }
#modal-atletas .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

/* Upload doc */
#modal-atletas .doc-upload-area { border: 2px dashed var(--gris2); border-radius: 10px; padding: 1.1rem; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
#modal-atletas .doc-upload-area:hover { border-color: var(--azul); background: #f0f4ff; }
#modal-atletas .doc-upload-area p { font-size: .82rem; color: #aaa; margin-top: .3rem; }
#modal-atletas .doc-upload-area strong { font-size: .88rem; color: #666; }
#modal-atletas .doc-preview-nombre { display: none; align-items: center; gap: .5rem; background: var(--verde-l); border: 1.5px solid #a5d6a7; border-radius: 8px; padding: .5rem .85rem; font-size: .82rem; color: var(--verde); margin-top: .6rem; }
#modal-atletas .doc-preview-nombre.visible { display: flex; }

#modal-atletas .alerta { display: none; align-items: center; gap: .6rem; border-radius: 8px; padding: .65rem 1rem; font-size: .84rem; margin-bottom: 1rem; }
#modal-atletas .alerta.error { background: #fff0f0; border: 1.5px solid var(--rojo); color: var(--rojo); }
#modal-atletas .alerta.error::before { content: '⚠'; flex-shrink: 0; }

/* ── FOOTER ── */
#modal-atletas .modal-footer { padding: 1rem 1.4rem; border-top: 1px solid var(--gris2); display: flex; gap: .7rem; flex-shrink: 0; background: #fff; }
#modal-atletas .btn-cancel { flex: 1; background: var(--gris); color: #666; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; padding: .75rem; border-radius: 9px; border: none; cursor: pointer; transition: background .14s; }
#modal-atletas .btn-cancel:hover { background: var(--gris2); }
#modal-atletas .btn-guardar { flex: 2; background: var(--azul); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; padding: .75rem; border-radius: 9px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; box-shadow: 0 4px 14px rgba(26,58,140,.3); transition: background .15s, transform .12s; }
#modal-atletas .btn-guardar:hover { background: var(--azul2); transform: translateY(-1px); }
#modal-atletas @keyframes spin { to { transform: rotate(360deg); } }
#modal-atletas .spinning { animation: spin .8s linear infinite; }

/* Confirmar quitar (inline en lista) */
#modal-atletas .confirm-quitar { display: none; align-items: center; gap: .6rem; background: #fff0f0; border: 1.5px solid #ffcdd2; border-radius: 8px; padding: .5rem .85rem; font-size: .8rem; color: var(--rojo); }
#modal-atletas .confirm-quitar.visible { display: flex; }
#modal-atletas .confirm-quitar button { background: var(--rojo); color: #fff; border: none; border-radius: 6px; padding: .3rem .7rem; font-size: .75rem; font-weight: 700; cursor: pointer; }
#modal-atletas .confirm-quitar .cancelar { background: transparent; color: #aaa; border: 1px solid #ddd; }


#modal-cropper .btn-guardar { flex: 2; background: var(--azul); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; padding: .75rem; border-radius: 9px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; box-shadow: 0 4px 14px rgba(26,58,140,.3); transition: background .15s, transform .12s; }
#modal-cropper .btn-guardar:hover { background: var(--azul2); transform: translateY(-1px); }
#modal-cropper @keyframes spin { to { transform: rotate(360deg); } }
#modal-cropper .spinning { animation: spin .8s linear infinite; }


/* El modal no supera el alto de la pantalla */
#modal-cropper .modal {
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Solo el body scrollea si el contenido es muy alto */
#modal-cropper .modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* importante: sin esto flex no recorta correctamente */
}

.search-atleta-wrap {
    margin-bottom: 1.2rem;
}

.search-atleta-inner {
    display: flex;
    align-items: center;
    background: var(--gris);
    border: 2px solid var(--gris2);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}
.search-atleta-inner:focus-within {
    border-color: var(--azul);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26,58,140,.1);
}

.search-icon {
    padding: 0 .75rem;
    color: #bbb;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.search-atleta-inner input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Barlow', sans-serif;
    font-size: .93rem;
    color: var(--texto);
    padding: .75rem 0;
}
.search-atleta-inner input::placeholder { color: #bbb; }

.btn-buscar {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--azul);
    color: #fff;
    border: none;
    padding: 0 1.2rem;
    height: 100%;
    min-height: 44px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.btn-buscar:hover    { background: var(--azul2); }
.btn-buscar:disabled { background: var(--gris2); color: #bbb; cursor: not-allowed; }

/* ── Resultados ── */
.search-atleta-results { margin-top: .5rem; }

.search-result-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border: 1.5px solid var(--gris2);
    border-radius: 10px;
    padding: .8rem 1rem;
    margin-bottom: .5rem;
    transition: border-color .15s, box-shadow .15s;
    cursor: pointer;
}
.search-result-card:hover {
    border-color: var(--azul);
    box-shadow: 0 2px 12px var(--sombra);
}

.src-foto {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: var(--gris2);
    overflow: hidden;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}
.src-foto img { width: 100%; height: 100%; object-fit: cover; }

.src-info { flex: 1; }
.src-nombre {
    font-weight: 600;
    font-size: .92rem;
    color: var(--texto);
}
.src-meta {
    font-size: .75rem;
    color: #888;
    margin-top: .15rem;
}

.src-action {
    flex-shrink: 0;
}
.btn-seleccionar {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--verde);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: .4rem .85rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
}
.btn-seleccionar:hover { background: #1b5e20; }

/* Estados */
.search-estado {
    text-align: center;
    padding: 1.2rem;
    font-size: .85rem;
    color: #aaa;
    background: var(--gris);
    border-radius: 10px;
}
.search-estado.buscando { color: var(--azul); }
.search-estado.error    { color: var(--rojo); background: #fff0f0; }

.toast {
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    background: #fff;
    border-radius: 12px;
    padding: .85rem 1.2rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texto);
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    border-left: 4px solid var(--verde);
    z-index: 999;
    transform: translateX(120%);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    max-width: 320px;
}
.toast.visible   { transform: translateX(0); }
.toast.error     { border-left-color: var(--rojo); }
.toast.advertencia { border-left-color: var(--amarillo); }

#modal-atletas .btn-agregar-nuevo:disabled,
#modal-atletas .btn-agregar-nuevo.disabled {
    background: var(--gris2);
    color: #aaa;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    /* Rayado sutil para reforzar visualmente que no está disponible */
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(0,0,0,.04) 4px,
        rgba(0,0,0,.04) 8px
    );
}





/* ── STRIPE ── */
.top-stripe { height: 5px; background: linear-gradient(90deg, var(--rojo) 0%, var(--naranja) 25%, var(--amarillo) 50%, var(--verde) 75%, var(--azul) 100%); }

/* ── TOPBAR ── */
.topbar { background: var(--azul); padding: .55rem 2rem; display: flex; justify-content: space-between; align-items: center; }
.topbar-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.topbar-brand .t { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.1rem; color: #fff; letter-spacing: .04em; }
.topbar-brand .s { font-size: .65rem; color: rgba(255,255,255,.5); letter-spacing: .08em; text-transform: uppercase; }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.topbar-user { display: flex; align-items: center; gap: .65rem; }
.avatar-sm { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.uname { font-size: .82rem; color: rgba(255,255,255,.85); font-weight: 600; }
.uci { font-size: .7rem; color: rgba(255,255,255,.45); }
.btn-logout { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: .4rem .9rem; border-radius: 7px; cursor: pointer; text-decoration: none; transition: background .15s; }
.btn-logout:hover { background: rgba(255,255,255,.2); }

/* ── LAYOUT ── */
.layout { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 45px); }

/* ── SIDEBAR ── */
.sidebar { background: var(--azul2); padding: 1.5rem 0; position: sticky; top: 0; height: calc(100vh - 45px); overflow-y: auto; }
.sidebar-section { padding: 0 1rem; margin-bottom: 1.8rem; }
.sidebar-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.3); padding: 0 .5rem; margin-bottom: .5rem; }
.sidebar-item { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border-radius: 9px; text-decoration: none; color: rgba(255,255,255,.6); font-size: .88rem; font-weight: 500; transition: all .18s; margin-bottom: .15rem; }
.sidebar-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-item.active { background: var(--azul); color: #fff; }
.sidebar-item .ico { font-size: 1rem; width: 20px; text-align: center; }

/* ── MAIN ── */
.main { padding: 0; }

/* Page header */
.page-header { background: linear-gradient(135deg, var(--azul) 0%, var(--azul2) 100%); padding: 2rem 2rem 1.8rem; position: relative; overflow: hidden; }
.page-header::after { content: ''; position: absolute; right: -50px; top: -50px; width: 250px; height: 250px; border: 45px solid rgba(255,255,255,.05); border-radius: 50%; pointer-events: none; }
.page-header h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.9rem; color: #fff; letter-spacing: .02em; margin-bottom: .2rem; position: relative; z-index: 1; }
.page-header p { color: rgba(255,255,255,.6); font-size: .9rem; position: relative; z-index: 1; }

/* ── CONTENT ── */


/* ── CARD ── */
.card { background: #fff; border-radius: 16px; box-shadow: 0 2px 16px var(--sombra); margin-bottom: 1.4rem; overflow: hidden; }
.card-header { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--gris2); display: flex; align-items: center; justify-content: space-between; }
.card-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--azul); display: flex; align-items: center; gap: .5rem; }
.card-body { padding: 1.5rem; }

/* ── FOTO PERFIL ── */
.foto-perfil-wrap { display: flex; align-items: center; gap: 2rem; }
.foto-perfil-avatar { position: relative; flex-shrink: 0; }
.foto-perfil-circle { width: 110px; height: 110px; border-radius: 50%; background: var(--gris2); border: 4px solid var(--gris2); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 3rem; cursor: pointer; transition: border-color .18s; }
.foto-perfil-circle:hover { border-color: var(--azul); }
.foto-perfil-circle img { width: 100%; height: 100%; object-fit: cover; display: none; }
.foto-perfil-circle .placeholder { color: #bbb; font-size: 3rem; }
.foto-edit-badge { position: absolute; bottom: 4px; right: 4px; width: 30px; height: 30px; background: var(--azul); border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.foto-edit-badge:hover { background: var(--azul2); }
.foto-edit-badge svg { color: #fff; }
.foto-perfil-info h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.4rem; color: var(--texto); margin-bottom: .2rem; }
.foto-perfil-info .email { color: #888; font-size: .88rem; margin-bottom: .8rem; }
.foto-perfil-info .email span { color: var(--azul); font-weight: 600; }
.foto-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-foto { display: inline-flex; align-items: center; gap: .4rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; padding: .45rem .9rem; border-radius: 8px; border: none; cursor: pointer; transition: all .15s; }
.btn-foto.primary { background: var(--azul); color: #fff; }
.btn-foto.primary:hover { background: var(--azul2); }
.btn-foto.danger { background: transparent; color: var(--rojo); border: 1.5px solid #ffcdd2; }
.btn-foto.danger:hover { background: #ffebee; border-color: var(--rojo); }
.foto-hint { font-size: .75rem; color: #aaa; margin-top: .5rem; }

/* ── FIELDS ── */
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 0; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: #555; margin-bottom: .38rem; }
.field-wrap { position: relative; }
.field-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); font-size: .95rem; pointer-events: none; color: #bbb; }
.field input, .field select { width: 100%; padding: .72rem .9rem .72rem 2.4rem; border: 2px solid var(--gris2); border-radius: 9px; font-family: 'Barlow', sans-serif; font-size: .92rem; color: var(--texto); background: var(--gris); outline: none; transition: border-color .15s, box-shadow .15s; appearance: none; }
.field input:focus, .field select:focus { border-color: var(--azul); background: #fff; box-shadow: 0 0 0 3px rgba(26,58,140,.1); }
.field input::placeholder { color: #bbb; }
.field input:disabled { color: #aaa; cursor: not-allowed; background: #f0f0f0; }
.field-readonly { font-size: .72rem; color: #aaa; margin-top: .3rem; display: flex; align-items: center; gap: .3rem; }

/* ── CONTRASEÑA ── */
.pass-strength { height: 4px; border-radius: 2px; background: var(--gris2); margin-top: .4rem; overflow: hidden; }
.pass-strength-fill { height: 100%; border-radius: 2px; width: 0; transition: width .3s, background .3s; }
.pass-strength-label { font-size: .72rem; margin-top: .3rem; }
.toggle-pass { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #bbb; font-size: .9rem; padding: 0; transition: color .15s; }
.toggle-pass:hover { color: var(--azul); }

/* ── ALERTA ── */
.alerta { display: none; align-items: center; gap: .6rem; border-radius: 8px; padding: .7rem 1rem; font-size: .85rem; margin-bottom: 1rem; }
.alerta.error   { background: #fff0f0; border: 1.5px solid var(--rojo);  color: var(--rojo); }
.alerta.success { background: var(--verde-l); border: 1.5px solid #a5d6a7; color: var(--verde); }
.alerta.error::before   { content: '⚠'; flex-shrink: 0; }
.alerta.success::before { content: '✓'; flex-shrink: 0; }

/* ── BOTONES GUARDAR ── */
.card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--gris2); display: flex; justify-content: flex-end; gap: .7rem; background: var(--gris); }
.btn-guardar { display: inline-flex; align-items: center; gap: .5rem; background: var(--azul); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; padding: .72rem 1.8rem; border-radius: 9px; border: none; cursor: pointer; box-shadow: 0 4px 14px rgba(26,58,140,.3); transition: background .15s, transform .12s; }
.btn-guardar:hover { background: var(--azul2); transform: translateY(-1px); }
.btn-guardar.rojo { background: var(--rojo); box-shadow: 0 4px 14px rgba(215,43,43,.3); }
.btn-guardar.rojo:hover { background: #b71c1c; }
.btn-cancelar { background: var(--gris2); color: #666; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; padding: .7rem 1.4rem; border-radius: 9px; border: none; cursor: pointer; transition: background .15s; }
.btn-cancelar:hover { background: #d0d4de; }

/* ── SEPARADOR ── */
.divider { display: flex; align-items: center; gap: .8rem; color: #ddd; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin: .5rem 0 1.2rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--gris2); }

/* ── MODAL CROPPER ── */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 300; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 20px; width: 100%; max-width: 500px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.4); animation: slideUp .22s ease; }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.modal-header { background: linear-gradient(135deg, var(--azul), var(--azul2)); padding: 1.2rem 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; }
.modal-header h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.2rem; color: #fff; }
.modal-header p { font-size: .75rem; color: rgba(255,255,255,.6); margin-top: .2rem; }
.modal-close { background: rgba(255,255,255,.12); border: none; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; color: #fff; font-size: 1rem; flex-shrink: 0; transition: background .15s; }
.modal-close:hover { background: rgba(255,255,255,.25); }
#modal-cropper .modal-body { padding: 1.2rem; background: #1a1a2e; }
.crop-tips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.crop-tip { background: rgba(255,255,255,.08); border-radius: 6px; padding: .28rem .65rem; font-size: .7rem; color: rgba(255,255,255,.6); }
.crop-canvas { max-height: 340px; overflow: hidden; border-radius: 10px; background: #000; }
.crop-canvas img { max-width: 100%; display: block; }
.crop-controls { display: flex; justify-content: center; gap: .5rem; margin-top: .9rem; }
.crop-ctrl { width: 38px; height: 38px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.crop-ctrl:hover { background: rgba(255,255,255,.22); }
.modal-footer { padding: 1rem 1.4rem; display: flex; gap: .7rem; }
.btn-cancel { flex: 1; background: var(--gris); color: #666; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; padding: .72rem; border-radius: 9px; border: none; cursor: pointer; }
.btn-crop-ok { flex: 2; background: var(--azul); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: .95rem; letter-spacing: .07em; text-transform: uppercase; padding: .72rem; border-radius: 9px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; box-shadow: 0 4px 14px rgba(26,58,140,.3); }

/* Toast */
.toast { position: fixed; top: 1.2rem; right: 1.2rem; background: #fff; border-radius: 12px; padding: .85rem 1.2rem; display: flex; align-items: center; gap: .7rem; font-size: .9rem; font-weight: 600; color: var(--texto); box-shadow: 0 8px 30px rgba(0,0,0,.15); border-left: 4px solid var(--verde); z-index: 999; transform: translateX(140%); transition: transform .3s cubic-bezier(.34,1.56,.64,1); max-width: 320px; }
.toast.visible { transform: translateX(0); }
.toast.error { border-left-color: var(--rojo); }

@keyframes spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .sidebar { display: none; } .fields-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .content { padding: 1.2rem; } .foto-perfil-wrap { flex-direction: column; align-items: flex-start; } }




/* pagina colaboradores */

 /* ── MAIN ── */
#pageColaboradores .main { padding: 0; }
 
    /* Page header */
#pageColaboradores .page-header { background: linear-gradient(135deg, var(--azul) 0%, var(--azul2) 100%); padding: 2rem 2rem 1.8rem; position: relative; overflow: hidden; }
#pageColaboradores .page-header::after { content: ''; position: absolute; right: -50px; top: -50px; width: 250px; height: 250px; border: 45px solid rgba(255,255,255,.05); border-radius: 50%; pointer-events: none; }
#pageColaboradores .page-header-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
#pageColaboradores .page-header h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.9rem; color: #fff; letter-spacing: .02em; margin-bottom: .2rem; }
#pageColaboradores .page-header p { color: rgba(255,255,255,.6); font-size: .9rem; }
    
.btn-nuevo-colab { display: inline-flex; align-items: center; gap: .6rem; background: var(--amarillo); color: var(--texto); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; padding: .75rem 1.5rem; border-radius: 10px; border: none; cursor: pointer; box-shadow: 0 4px 14px rgba(245,196,0,.4); transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.btn-nuevo-colab:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(245,196,0,.5); }
/* Stats */
#pageColaboradores .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.8rem; }
#pageColaboradores .stat-card { background: #fff; border-radius: 12px; padding: 1.1rem 1.2rem; box-shadow: 0 2px 10px var(--sombra); border-left: 4px solid var(--azul); display: flex; align-items: center; gap: .9rem; }
#pageColaboradores .stat-card:nth-child(2) { border-left-color: var(--verde); }
#pageColaboradores .stat-card:nth-child(3) { border-left-color: var(--naranja); }
#pageColaboradores .stat-card:nth-child(4) { border-left-color: var(--rojo); }
#pageColaboradores .stat-icon { font-size: 1.5rem; }
#pageColaboradores .stat-val { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.6rem; color: var(--texto); line-height: 1; }
#pageColaboradores .stat-label { font-size: .75rem; color: #888; margin-top: .1rem; }

/* Section title */
#pageColaboradores .section-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: .05em; text-transform: uppercase; color: var(--azul); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
#pageColaboradores .section-title::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--gris2), transparent); border-radius: 2px; }

/* ── TABLA COLABORADORES ── */
#pageColaboradores .card { background: #fff; border-radius: 16px; box-shadow: 0 2px 16px var(--sombra); overflow: hidden; margin-bottom: 1.4rem; }

#pageColaboradores .card-toolbar { padding: .9rem 1.4rem; border-bottom: 1px solid var(--gris2); display: flex; align-items: center; gap: .8rem; background: var(--gris); flex-wrap: wrap; }
#pageColaboradores .search-wrap { display: flex; align-items: center; background: #fff; border: 2px solid var(--gris2); border-radius: 9px; overflow: hidden; flex: 1; min-width: 200px; transition: border-color .15s; }
#pageColaboradores .search-wrap:focus-within { border-color: var(--azul); }
#pageColaboradores .search-wrap span { padding: 0 .7rem; color: #bbb; display: flex; align-items: center; }
#pageColaboradores .search-wrap input { flex: 1; border: none; outline: none; font-family: 'Barlow', sans-serif; font-size: .88rem; padding: .55rem 0; background: transparent; color: var(--texto); }
#pageColaboradores .search-wrap input::placeholder { color: #bbb; }

#pageColaboradores .filter-select { border: 2px solid var(--gris2); border-radius: 9px; padding: .52rem .85rem; font-family: 'Barlow', sans-serif; font-size: .85rem; color: var(--texto); background: #fff; outline: none; cursor: pointer; transition: border-color .15s; appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; }
#pageColaboradores .filter-select:focus { border-color: var(--azul); }

/* Tabla */
#pageColaboradores .colab-table { width: 100%; border-collapse: collapse; }
#pageColaboradores .colab-table thead th { background: var(--azul); color: rgba(255,255,255,.85); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: .7rem 1.1rem; text-align: left; }
#pageColaboradores .colab-table thead th:last-child { text-align: center; }
#pageColaboradores .colab-table tbody tr { border-bottom: 1px solid var(--gris2); transition: background .12s; }
#pageColaboradores .colab-table tbody tr:last-child { border-bottom: none; }
#pageColaboradores .colab-table tbody tr:hover { background: #f7f9ff; }
#pageColaboradores .colab-table td { padding: .85rem 1.1rem; vertical-align: middle; font-size: .88rem; }

/* Colaborador info */
#pageColaboradores .colab-info { display: flex; align-items: center; gap: .8rem; }
#pageColaboradores .colab-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gris2); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; border: 2px solid var(--gris2); }
#pageColaboradores .colab-avatar img { width: 100%; height: 100%; object-fit: cover; }
#pageColaboradores .colab-nombre { font-weight: 600; font-size: .92rem; color: var(--texto); }
#pageColaboradores .colab-email { font-size: .75rem; color: #888; margin-top: .1rem; }
#pageColaboradores .colab-ci { font-size: .75rem; color: #aaa; }

/* Deportes chips */
#pageColaboradores .deportes-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
#pageColaboradores .deporte-chip { background: rgba(26,58,140,.08); color: var(--azul); border: 1px solid rgba(26,58,140,.15); border-radius: 20px; padding: .18rem .65rem; font-size: .72rem; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .04em; white-space: nowrap; }
#pageColaboradores .deporte-chip.mas { background: var(--gris2); color: #888; border-color: var(--gris2); cursor: pointer; }
#pageColaboradores .deporte-chip.mas:hover { background: var(--azul); color: #fff; border-color: var(--azul); }

/* Estado badge */
#pageColaboradores .estado-badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 20px; padding: .28rem .8rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
#pageColaboradores .estado-badge.activo   { background: var(--verde-l); color: var(--verde); border: 1px solid #a5d6a7; }
#pageColaboradores .estado-badge.inactivo { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
#pageColaboradores .estado-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Acciones */
#pageColaboradores .td-acciones { display: flex; align-items: center; justify-content: center; gap: .4rem; }
#pageColaboradores .btn-tbl { width: 32px; height: 32px; border-radius: 7px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .14s; }
#pageColaboradores .btn-tbl.editar  { background: rgba(26,58,140,.1); color: var(--azul); }
#pageColaboradores .btn-tbl.editar:hover  { background: var(--azul); color: #fff; }
#pageColaboradores .btn-tbl.toggle  { background: rgba(46,125,50,.1); color: var(--verde); }
#pageColaboradores .btn-tbl.toggle:hover  { background: var(--verde); color: #fff; }
#pageColaboradores .btn-tbl.toggle.off { background: rgba(232,123,30,.1); color: var(--naranja); }
#pageColaboradores .btn-tbl.toggle.off:hover { background: var(--naranja); color: #fff; }
#pageColaboradores .btn-tbl.quitar  { background: rgba(215,43,43,.08); color: var(--rojo); }
#pageColaboradores .btn-tbl.quitar:hover  { background: var(--rojo); color: #fff; }

/* Empty */
#pageColaboradores .table-empty { text-align: center; padding: 3.5rem 2rem; color: #aaa; }
#pageColaboradores .table-empty-icon { font-size: 2.8rem; margin-bottom: .8rem; }
#pageColaboradores .table-empty p { font-size: .9rem; line-height: 1.6; }

/* ── MODAL ── */
#pageColaboradores .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); z-index: 200; align-items: center; justify-content: center; padding: 1rem; }
#pageColaboradores .modal-overlay.open { display: flex; }
#pageColaboradores .modal { background: #fff; border-radius: 20px; width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: slideUp .22s ease; overflow: hidden; }
#pageColaboradores @keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

#pageColaboradores .modal-header { background: linear-gradient(135deg, var(--azul), var(--azul2)); padding: 1.2rem 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; }
#pageColaboradores .modal-header h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.25rem; color: #fff; letter-spacing: .03em; }
#pageColaboradores .modal-header p { font-size: .75rem; color: rgba(255,255,255,.6); margin-top: .2rem; }
#pageColaboradores .modal-close { background: rgba(255,255,255,.12); border: none; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; color: #fff; font-size: 1rem; flex-shrink: 0; transition: background .15s; }
#pageColaboradores .modal-close:hover { background: rgba(255,255,255,.25); }

#pageColaboradores .modal-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
#pageColaboradores .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--gris2); display: flex; gap: .7rem; flex-shrink: 0; background: #fff; }

/* Búsqueda de usuario */
#pageColaboradores .search-usuario-wrap { position: relative; margin-bottom: 1.2rem; }
#pageColaboradores .search-usuario-inner { display: flex; align-items: center; background: var(--gris); border: 2px solid var(--gris2); border-radius: 10px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
#pageColaboradores .search-usuario-inner:focus-within { border-color: var(--azul); background: #fff; box-shadow: 0 0 0 3px rgba(26,58,140,.1); }
#pageColaboradores .search-usuario-inner span { padding: 0 .85rem; color: #bbb; display: flex; align-items: center; flex-shrink: 0; }
#pageColaboradores .search-usuario-inner input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Barlow', sans-serif; font-size: .92rem; color: var(--texto); padding: .72rem 0; }
#pageColaboradores .search-usuario-inner input::placeholder { color: #bbb; }
#pageColaboradores .btn-buscar-usr { background: var(--azul); color: #fff; border: none; padding: 0 1.1rem; height: 44px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .15s; display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
#pageColaboradores .btn-buscar-usr:hover { background: var(--azul2); }

/* Resultado de búsqueda */
#pageColaboradores .user-result { display: none; align-items: center; gap: .9rem; background: var(--verde-l); border: 1.5px solid #a5d6a7; border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1.2rem; }
#pageColaboradores .user-result.visible { display: flex; }
#pageColaboradores .user-result-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--verde); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1rem; }
#pageColaboradores .user-result-info .nombre { font-weight: 700; font-size: .95rem; color: var(--texto); }
#pageColaboradores .user-result-info .meta { font-size: .78rem; color: #666; margin-top: .15rem; }
#pageColaboradores .user-result-clear { margin-left: auto; background: none; border: none; cursor: pointer; color: #aaa; font-size: 1rem; transition: color .14s; }
#pageColaboradores .user-result-clear:hover { color: var(--rojo); }

/* Deportes selector */
#pageColaboradores .deportes-selector-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #555; margin-bottom: .6rem; display: block; }
#pageColaboradores .deportes-checkboxes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
#pageColaboradores .deporte-check-item { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; background: var(--gris); border: 1.5px solid var(--gris2); border-radius: 9px; cursor: pointer; transition: all .15s; }
#pageColaboradores .deporte-check-item:hover { border-color: var(--azul); background: #f0f4ff; }
#pageColaboradores .deporte-check-item input[type="checkbox"] { display: none; }
#pageColaboradores .deporte-check-item.checked { background: rgba(26,58,140,.08); border-color: var(--azul); }
#pageColaboradores .check-icon { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #ccc; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; background: #fff; }
#pageColaboradores .deporte-check-item.checked .check-icon { background: var(--azul); border-color: var(--azul); }
#pageColaboradores .check-icon svg { display: none; }
#pageColaboradores .deporte-check-item.checked .check-icon svg { display: block; }
#pageColaboradores .deporte-check-nombre { font-size: .88rem; font-weight: 500; color: var(--texto); }
#pageColaboradores .deporte-check-item.checked .deporte-check-nombre { color: var(--azul); font-weight: 600; }

/* Alerta */
#pageColaboradores .alerta { display: none; align-items: center; gap: .6rem; border-radius: 8px; padding: .7rem 1rem; font-size: .85rem; margin-bottom: 1rem; }
#pageColaboradores .alerta.error { background: #fff0f0; border: 1.5px solid var(--rojo); color: var(--rojo); }
#pageColaboradores .alerta.error::before { content: '⚠'; flex-shrink: 0; }

/* Botones */
#pageColaboradores .btn-guardar { flex: 2; background: var(--azul); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; padding: .78rem; border-radius: 9px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; box-shadow: 0 4px 14px rgba(26,58,140,.3); transition: background .15s, transform .12s; }
#pageColaboradores .btn-guardar:hover { background: var(--azul2); transform: translateY(-1px); }
#pageColaboradores .btn-cancel { flex: 1; background: var(--gris); color: #666; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; padding: .75rem; border-radius: 9px; border: none; cursor: pointer; transition: background .14s; }
#pageColaboradores .btn-cancel:hover { background: var(--gris2); }

/* Divider */
#pageColaboradores .divider { display: flex; align-items: center; gap: .8rem; color: #ccc; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin: 1.2rem 0; }
#pageColaboradores .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--gris2); }

/* Info box */
#pageColaboradores .info-box { background: #e8f0fe; border: 1px solid #c5d3f5; border-radius: 10px; padding: .85rem 1rem; font-size: .82rem; color: #1a3a8c; line-height: 1.55; margin-bottom: 1.2rem; display: flex; gap: .6rem; }

/* Toast */
#pageColaboradores .toast { position: fixed; top: 1.2rem; right: 1.2rem; background: #fff; border-radius: 12px; padding: .85rem 1.2rem; display: flex; align-items: center; gap: .7rem; font-size: .9rem; font-weight: 600; color: var(--texto); box-shadow: 0 8px 30px rgba(0,0,0,.15); border-left: 4px solid var(--verde); z-index: 999; transform: translateX(140%); transition: transform .3s cubic-bezier(.34,1.56,.64,1); max-width: 320px; }
#pageColaboradores .toast.visible { transform: translateX(0); }
#pageColaboradores .toast.error { border-left-color: var(--rojo); }

#pageColaboradores @keyframes spin { to { transform: rotate(360deg); } }

/* Responsive */
#pageColaboradores @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .sidebar { display: none; } .stats-row { grid-template-columns: 1fr 1fr; } }
#pageColaboradores @media (max-width: 600px) { .content { padding: 1.2rem; } .stats-row { grid-template-columns: 1fr; } .deportes-checkboxes { grid-template-columns: 1fr; } }














/* Modal */
#modal-colab .modal-overlay { display: flex; position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); z-index: 200; align-items: center; justify-content: center; padding: 1rem; }
#modal-colab .modal { background: #fff; border-radius: 20px; width: 100%; max-width: 580px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; }
#modal-colab .modal-header { background: linear-gradient(135deg, var(--azul), var(--azul2)); padding: 1.2rem 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; }
#modal-colab .modal-header h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.25rem; color: #fff; letter-spacing: .03em; }
#modal-colab .modal-header p { font-size: .75rem; color: rgba(255,255,255,.6); margin-top: .2rem; }
#modal-colab .modal-close { background: rgba(255,255,255,.12); border: none; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; color: #fff; font-size: 1rem; flex-shrink: 0; }
#modal-colab .modal-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
#modal-colab .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--gris2); display: flex; gap: .7rem; flex-shrink: 0; }

/* Tabs */
#modal-colab .modal-tabs { display: flex; background: var(--gris); border-radius: 10px; padding: 3px; gap: 3px; margin-bottom: 1.4rem; }
#modal-colab .modal-tab { flex: 1; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; padding: .55rem; border-radius: 8px; border: none; background: transparent; color: #999; cursor: pointer; transition: all .2s; }
#modal-colab .modal-tab.active { background: var(--azul); color: #fff; box-shadow: 0 2px 10px rgba(26,58,140,.3); }

/* Vista */
#modal-colab .tab-vista { display: none; }
#modal-colab .tab-vista.active { display: block; }

/* Fields */
#modal-colab .field { margin-bottom: 1rem; }
#modal-colab .field label { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: #555; margin-bottom: .38rem; }
#modal-colab .field-wrap { position: relative; }
#modal-colab .field-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); font-size: .95rem; pointer-events: none; color: #bbb; }
#modal-colab .field input { width: 100%; padding: .72rem .9rem .72rem 2.4rem; border: 2px solid var(--gris2); border-radius: 9px; font-family: 'Barlow', sans-serif; font-size: .92rem; color: var(--texto); background: var(--gris); outline: none; transition: border-color .15s, box-shadow .15s; }
#modal-colab .field input:focus { border-color: var(--azul); background: #fff; box-shadow: 0 0 0 3px rgba(26,58,140,.1); }
#modal-colab .field input::placeholder { color: #bbb; }
#modal-colab .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
#modal-colab .toggle-pass { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #bbb; font-size: .9rem; padding: 0; transition: color .15s; }
#modal-colab .toggle-pass:hover { color: var(--azul); }

/* Pass strength */
#modal-colab .pass-strength { height: 4px; border-radius: 2px; background: var(--gris2); margin-top: .4rem; overflow: hidden; }
#modal-colab .pass-strength-fill { height: 100%; border-radius: 2px; width: 0; transition: width .3s, background .3s; }
#modal-colab .pass-strength-label { font-size: .72rem; margin-top: .25rem; }

/* Divider */
#modal-colab .divider { display: flex; align-items: center; gap: .8rem; color: #ccc; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin: 1.2rem 0; }
#modal-colab .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--gris2); }

/* Info box */
#modal-colab .info-box { background: #e8f0fe; border: 1px solid #c5d3f5; border-radius: 10px; padding: .85rem 1rem; font-size: .82rem; color: #1a3a8c; line-height: 1.55; margin-bottom: 1.2rem; display: flex; gap: .6rem; }

/* ── CHECKBOXES DEPORTES — FIX ── */
#modal-colab .deportes-selector-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #555; margin-bottom: .6rem; display: block; }
#modal-colab .deportes-checkboxes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

.deporte-check-item {
display: flex;
align-items: center;
gap: .6rem;
padding: .6rem .85rem;
background: var(--gris);
border: 1.5px solid var(--gris2);
border-radius: 9px;
cursor: pointer;
transition: all .15s;
user-select: none;
#modal-colab }
#modal-colab .deporte-check-item:hover { border-color: var(--azul); background: #f0f4ff; }
#modal-colab .deporte-check-item.checked { background: rgba(26,58,140,.08); border-color: var(--azul); }

/* Ocultar el checkbox nativo */
.deporte-check-item input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
#modal-colab }

/* Checkbox visual custom */
.check-box-visual {
width: 20px; height: 20px;
border-radius: 5px;
border: 2px solid #ccc;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .15s;
#modal-colab }
.deporte-check-item.checked .check-box-visual {
background: var(--azul);
border-color: var(--azul);
#modal-colab }
#modal-colab .check-box-visual svg { display: none; }
#modal-colab .deporte-check-item.checked .check-box-visual svg { display: block; }

#modal-colab .deporte-check-nombre { font-size: .88rem; font-weight: 500; color: var(--texto); }
#modal-colab .deporte-check-item.checked .deporte-check-nombre { color: var(--azul); font-weight: 600; }

/* Alerta */
#modal-colab .alerta { display: none; align-items: center; gap: .6rem; border-radius: 8px; padding: .7rem 1rem; font-size: .85rem; margin-bottom: 1rem; }
#modal-colab .alerta.error { background: #fff0f0; border: 1.5px solid var(--rojo); color: var(--rojo); }
#modal-colab .alerta.error::before { content: '⚠'; flex-shrink: 0; }

/* Botones */
#modal-colab .btn-guardar { flex: 2; background: var(--azul); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; padding: .78rem; border-radius: 9px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; box-shadow: 0 4px 14px rgba(26,58,140,.3); transition: background .15s; }
#modal-colab .btn-guardar:hover { background: var(--azul2); }
#modal-colab .btn-cancel { flex: 1; background: var(--gris); color: #666; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; padding: .75rem; border-radius: 9px; border: none; cursor: pointer; }
#modal-colab .btn-cancel:hover { background: var(--gris2); }

#modal-colab @keyframes spin { to { transform: rotate(360deg); } }







/* ── RADIO GROUP ── */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

/* Ocultar input nativo */
.radio-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Label contenedor */
.radio-item {
    display: inline-flex !important;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    background: var(--blanco, #fff);
    border: 1px solid var(--gris2);
    border-radius: 9px;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 400;
    color: var(--texto);
    white-space: nowrap;
    user-select: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

/* Hover */
.radio-item:hover {
    border-color: var(--azul);
    background: #eef3fc;
    color: var(--azul);
}

/* Seleccionado */
.radio-item.checked {
    background: #eef3fc;
    border-color: var(--azul);
    border-width: 1.5px;
    color: var(--azul);
    font-weight: 500;
    box-shadow: 0 0 0 3px rgba(24, 95, 165, .12);
}

/* ── Círculo visual ── */
.radio-visual {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--gris2);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .2s ease, background .2s ease;
}

/* Punto interno via ::after */
.radio-visual::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    transform: scale(0);
    transition: background .2s ease, transform .2s ease;
}

/* Círculo seleccionado */
.radio-item.checked .radio-visual {
    border-color: var(--azul);
    background: #eef3fc;
}

.radio-item.checked .radio-visual::after {
    background: var(--azul);
    transform: scale(1);
}
.hidden{display: none !important;}

.d-none{display: none;}



/* ── UPLOAD DOC — misma base que upload-foto ── */
.upload-doc {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.doc-preview {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: var(--gris);
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .15s, background .15s;
    overflow: hidden;
    flex-direction: column;
    gap: .3rem;
    cursor: pointer;
}
.doc-preview:hover { border-color: var(--azul); background: #f0f4ff; }

/* Icono por defecto */
.doc-preview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Preview cuando hay archivo */
.doc-nombre-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .3rem;
    text-align: center;
}
.doc-nombre-preview svg { color: var(--azul); flex-shrink: 0; }
.doc-nombre-preview span {
    font-size: .6rem;
    color: var(--azul);
    font-weight: 600;
    word-break: break-all;
    line-height: 1.2;
    max-width: 70px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Estado con archivo cargado */
.doc-preview.tiene-archivo {
    border-style: solid;
    border-color: var(--azul);
    background: rgba(26,58,140,.06);
}

.doc-info { flex: 1; }
.doc-info strong { font-size: .9rem; color: var(--texto); display: block; margin-bottom: .25rem; }
.doc-info p { font-size: .78rem; color: #aaa; margin-bottom: .5rem; line-height: 1.4; }

/* Botón quitar — rojo suave */
.btn-quitar-doc {
    background: transparent !important;
    color: var(--rojo) !important;
    border: 1.5px solid #ffcdd2 !important;
    margin-left: .4rem;
}
.btn-quitar-doc:hover {
    background: #ffebee !important;
    border-color: var(--rojo) !important;
}


/* ── DOCUMENTOS ── */
    .docs-section { background: #fff; }

    .docs-tabs {
      display: flex;
      gap: .5rem;
      margin-bottom: 1.8rem;
      flex-wrap: wrap;
    }
    .tab-btn {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: .88rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: .5rem 1.2rem;
      border-radius: 8px;
      border: 2px solid #e0e0e0;
      background: transparent;
      color: #666;
      cursor: pointer;
      transition: all .18s;
    }
    .tab-btn.active, .tab-btn:hover {
      background: var(--azul);
      border-color: var(--azul);
      color: #fff;
    }

    .docs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
    }
    .doc-card {
      display: flex;
      align-items: center;
      gap: 1rem;
      background: var(--gris);
      border: 1.5px solid #e0e4ee;
      border-radius: 12px;
      padding: 1rem 1.2rem;
      text-decoration: none;
      color: var(--texto);
      transition: all .18s;
      position: relative;
      overflow: hidden;
    }
    .doc-card::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 4px;
      background: var(--azul);
    }
    .doc-card.escolar::before { background: var(--verde); }
    .doc-card.estudiantil::before { background: var(--naranja); }
    .doc-card.arbitraje::before { background: var(--rojo); }
    .doc-card.planilla::before { background: var(--amarillo); }
    .doc-card:hover {
      background: #fff;
      border-color: var(--azul);
      box-shadow: 0 4px 18px var(--sombra);
      transform: translateX(4px);
    }
    .doc-icon {
      width: 44px; height: 44px;
      background: var(--azul);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 1.2rem;
    }
    .doc-card.escolar .doc-icon { background: var(--verde); }
    .doc-card.estudiantil .doc-icon { background: var(--naranja); }
    .doc-card.arbitraje .doc-icon { background: var(--rojo); }
    .doc-card.planilla .doc-icon { background: #b8860b; }
    .doc-info .doc-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: .01em;
      line-height: 1.2;
    }
    .doc-info .doc-meta {
      font-size: .75rem;
      color: #888;
      margin-top: .2rem;
    }
    .doc-download {
      margin-left: auto;
      font-size: 1.1rem;
      color: #bbb;
    }
    .doc-card:hover .doc-download { color: var(--azul); }

    /* hidden tabs */
    .tab-content { display: none; }
    .tab-content.active { display: grid; }

    .info-box { background: #e8f0fe; border: 1px solid #c5d3f5; border-radius: 10px; padding: .85rem 1rem; font-size: .82rem; color: #1a3a8c; line-height: 1.55; margin-bottom: 1.2rem; display: flex; gap: .6rem; }

    

    .col3{
        grid-template-columns: repeat(3, 1fr);
        margin-bottom: 20px;
    }