:root{
    --azul:#1b3a63;
    --azul-osc:#102544;
    --azul-claro:#e7edf5;
    --acento:#c98a2b;
    --acento-claro:#fbeed9;
    --rojo:#a53d3d;
    --rojo-claro:#f8e6e6;
    --gris:#f4f3ef;
    --texto:#26261f;
    --texto-sec:#5c5c54;
    --borde:#dcdad2;
    --blanco:#ffffff;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
    background:var(--gris);
    color:var(--texto);
    padding:0 0 60px;
  }
  header{
    background:linear-gradient(135deg,var(--azul) 0%,var(--azul-osc) 100%);
    color:#fff;
    padding:28px 20px 40px;
    text-align:center;
  }
  header .logo-header{
    width:76px;
    height:76px;
    border-radius:50%;
    object-fit:cover;
    background:#fff;
    padding:4px;
    margin-bottom:10px;
  }
  header h1{
    margin:0 0 4px;
    font-size:24px;
    letter-spacing:0.5px;
  }
  header p{
    margin:2px 0;
    opacity:0.85;
    font-size:13.5px;
  }
  .contenedor{
    max-width:960px;
    margin:-24px auto 0;
    padding:0 16px;
  }
  .tarjeta{
    background:var(--blanco);
    border:1px solid var(--borde);
    border-radius:12px;
    padding:20px 22px;
    margin-bottom:20px;
    box-shadow:0 2px 6px rgba(0,0,0,0.04);
  }
  .tarjeta h2{
    margin:0 0 14px;
    font-size:17px;
    color:var(--azul-osc);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .info-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:12px;
  }
  .info-box{
    background:var(--azul-claro);
    border-radius:10px;
    padding:14px 16px;
  }
  .info-box .etiqueta{
    font-size:12px;
    color:var(--texto-sec);
    text-transform:uppercase;
    letter-spacing:0.5px;
  }
  .info-box .valor{
    font-size:19px;
    font-weight:600;
    color:var(--azul-osc);
    margin-top:4px;
  }
  .info-box .valor.chico{font-size:15px;}

  .fila-uniformes{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:16px;
    align-items:start;
  }
  .uniforme-box{
    text-align:center;
  }
  .uniforme-box img{
    width:100%;
    max-width:220px;
    border-radius:10px;
    border:1px solid var(--borde);
    background:#fafafa;
  }
  .uniforme-box .etiqueta-uni{
    margin-top:8px;
    font-size:13px;
    font-weight:600;
    color:var(--azul-osc);
  }
  .uniforme-box .estado-uni{
    font-size:12px;
    margin-top:2px;
  }
  .uniforme-pendiente-caja{
    border:1px dashed var(--borde);
    border-radius:10px;
    max-width:220px;
    margin:0 auto;
    aspect-ratio:832/1248;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--texto-sec);
    font-size:12.5px;
    padding:10px;
  }

  .checklist-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  @media (max-width:600px){
    .checklist-col{grid-template-columns:1fr;}
    .fila-uniformes{grid-template-columns:1fr 1fr;}
    header{padding:22px 14px 32px;}
    header .logo-header{width:64px; height:64px;}
    header h1{font-size:20px;}
    header p{font-size:12.5px;}
    .contenedor{padding:0 10px;}
    .tarjeta{padding:16px 14px;}
    .tarjeta h2{font-size:15.5px;}
    .info-box .valor{font-size:17px;}
    .agregar-fila{flex-direction:column;}
    .agregar-fila button{width:100%;}
    .subir-foto{width:100%; justify-content:center;}
    .check-item{font-size:13.5px;}
  }
  @media (max-width:420px){
    .fila-uniformes{grid-template-columns:1fr;}
    header .logo-header{width:56px; height:56px;}
    header h1{font-size:18px;}
    .info-grid{grid-template-columns:1fr 1fr;}
    .resumen-barra{flex-direction:column; align-items:stretch;}
    .pill{text-align:center;}
  }
  .check-lista{
    list-style:none;
    padding:0;
    margin:0;
  }
  .check-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:9px 10px;
    border-radius:8px;
    margin-bottom:6px;
    background:var(--gris);
    font-size:14px;
  }
  .check-item.hecho{
    background:var(--azul-claro);
  }
  .check-item input{
    width:17px;
    height:17px;
    accent-color:var(--azul);
    flex-shrink:0;
    margin-top:2px;
  }
  .check-item .texto-item{
    flex:1;
  }
  .check-item .texto-item .fecha-item{
    display:block;
    font-size:11.5px;
    color:var(--texto-sec);
    margin-top:2px;
  }
  .check-item.hecho .texto-item{
    text-decoration:line-through;
    color:var(--texto-sec);
  }
  .check-item .borrar{
    cursor:pointer;
    color:var(--rojo);
    font-size:16px;
    opacity:0.5;
    padding:0 4px;
  }
  .check-item .borrar:hover{opacity:1;}
  .agregar-fila{
    display:flex;
    gap:8px;
    margin-top:10px;
  }
  .agregar-fila input{
    flex:1;
    padding:8px 10px;
    border:1px solid var(--borde);
    border-radius:8px;
    font-size:14px;
  }
  .agregar-fila button{
    background:var(--azul);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:8px 14px;
    cursor:pointer;
    font-size:14px;
  }
  .agregar-fila button:hover{background:var(--azul-osc);}

  table{
    width:100%;
    min-width:640px;
    border-collapse:collapse;
    font-size:13.5px;
  }
  th,td{
    padding:9px 8px;
    text-align:left;
    border-bottom:1px solid var(--borde);
    vertical-align:middle;
  }
  th{
    background:var(--azul-claro);
    color:var(--azul-osc);
    font-weight:600;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.3px;
  }
  td input[type="number"]{
    width:80px;
    padding:6px 8px;
    border:1px solid var(--borde);
    border-radius:6px;
    font-size:13.5px;
  }
  .falta-ok{color:var(--azul-osc); font-weight:600;}
  .falta-pendiente{color:var(--rojo); font-weight:600;}
  .doc-check{
    width:18px;
    height:18px;
    accent-color:var(--azul);
    cursor:pointer;
  }
  .nombre-completo{
    display:block;
    font-size:11.5px;
    color:var(--texto-sec);
    margin-top:1px;
  }
  .jersey-badge{
    display:inline-block;
    background:var(--acento-claro);
    color:#7a5313;
    font-size:11px;
    font-weight:600;
    padding:1px 6px;
    border-radius:10px;
    margin-left:6px;
  }
  .tabla-scroll{
    overflow-x:auto;
  }
  .resumen-barra{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:16px;
    font-size:13px;
  }
  .pill{
    padding:6px 12px;
    border-radius:20px;
    background:var(--acento-claro);
    color:#7a5313;
    font-weight:600;
  }
  .pill.rojo{background:var(--rojo-claro); color:var(--rojo);}
  .pill.verde{background:var(--azul-claro); color:var(--azul-osc);}

  .galeria-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:10px;
    margin-top:12px;
  }
  .foto-item{
    position:relative;
    aspect-ratio:1/1;
    border-radius:8px;
    overflow:hidden;
    border:1px solid var(--borde);
  }
  .foto-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .foto-item .quitar{
    position:absolute;
    top:4px;
    right:4px;
    background:rgba(0,0,0,0.55);
    color:#fff;
    border:none;
    border-radius:50%;
    width:22px;
    height:22px;
    cursor:pointer;
    font-size:13px;
    line-height:1;
  }
  .subir-foto{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--azul);
    color:#fff;
    padding:9px 16px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    margin-top:10px;
  }
  .subir-foto:hover{background:var(--azul-osc);}
  .subir-foto input{display:none;}
  .vacio{
    color:var(--texto-sec);
    font-size:13px;
    font-style:italic;
    padding:10px 0;
  }
  .nota{
    font-size:12px;
    color:var(--texto-sec);
    margin-top:10px;
  }