/* Control Gitanes - hoja de estilo */
:root{
  --tinta:#1b1a22; --tinta-suave:#5c5a68; --tenue:#8b8896;
  --fondo:#f6f5f9; --papel:#ffffff; --linea:#e6e4ee;
  --acento:#6d3ec7; --acento-claro:#f1ebfd; --acento-oscuro:#57309e;
  --ok:#16794a; --ok-fondo:#e4f6ec; --alerta:#a4451c; --alerta-fondo:#fdeee5;
  --aviso:#8a6100; --aviso-fondo:#fdf3dd;
  --radio:12px; --sombra:0 1px 2px rgba(20,15,45,.06), 0 8px 24px rgba(20,15,45,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--fondo); color:var(--tinta); font-size:15px; line-height:1.5;
}
a{color:var(--acento); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------- Cabecera ---------------- */
.cabecera{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:var(--papel); border-bottom:1px solid var(--linea);
  padding:10px 22px; position:sticky; top:0; z-index:20;
}
.marca{display:flex; align-items:center; gap:9px; font-weight:700; color:var(--tinta); font-size:16px}
.marca:hover{text-decoration:none}
.marca-icono{display:block; width:30px; height:30px; object-fit:contain}
.nav{
  display:flex; gap:2px; flex-wrap:wrap; flex:1; overflow:hidden;
  transition:max-width .26s ease, opacity .18s ease;
  max-width:100%; opacity:1;
}
.nav-item{
  display:flex; align-items:center; gap:7px; padding:8px 12px; border-radius:9px;
  color:var(--tinta-suave); font-weight:500; font-size:14px;
}
.nav-item svg{width:17px; height:17px}
.nav-item:hover{background:var(--fondo); text-decoration:none; color:var(--tinta)}
.nav-item.activo{background:var(--acento-claro); color:var(--acento-oscuro)}
.usuario{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--tenue)}

/* ---------------- Boto per plegar el menu ---------------- */
.plega-menu{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:0 0 auto; margin-left:2px;
  background:var(--papel); border:1px solid var(--linea); border-radius:9px;
  color:var(--tinta-suave); cursor:pointer; padding:0;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.plega-menu:hover{background:var(--acento-claro); border-color:var(--acento-claro); color:var(--acento-oscuro)}
.plega-menu:focus-visible{outline:2px solid var(--acento); outline-offset:2px}
.plega-menu svg{width:18px; height:18px; transition:transform .26s ease}
.visualment-ocult{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Menu plegat: la barra de pestanyes desapareix i la fletxa gira */
.menu-plegat .nav{
  max-width:0; opacity:0; flex:0 0 0; flex-wrap:nowrap; pointer-events:none;
}
.menu-plegat .usuario{margin-left:auto}
.menu-plegat .plega-menu svg{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  .nav, .plega-menu svg{transition:none}
}

.contenido{max-width:1240px; margin:0 auto; padding:26px 22px 70px}
.contenido-libre{max-width:400px; margin:9vh auto; padding:0 20px}

/* ---------------- Tipografia ---------------- */
h1{font-size:24px; margin:0 0 4px; letter-spacing:-.01em}
h2{font-size:17px; margin:0 0 12px}
h3{font-size:14px; margin:0 0 8px; text-transform:uppercase; letter-spacing:.06em; color:var(--tenue)}
.sub{color:var(--tenue); font-size:14px; margin:0 0 20px}
.vacio{color:#b8b5c2}

.encabezado-pagina{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.acciones{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ---------------- Tarjetas ---------------- */
.tarjeta{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:20px; margin-bottom:18px}
.tarjeta.compacta{padding:14px 16px}
.tarjeta h2{margin-top:0}

.cifras{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:22px}
.cifra{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); padding:16px 18px; box-shadow:var(--sombra)}
.cifra .n{font-size:28px; font-weight:700; letter-spacing:-.02em; display:block; line-height:1.15}
.cifra .t{color:var(--tenue); font-size:13px}
.cifra.acento .n{color:var(--acento)}
.cifra.alerta .n{color:var(--alerta)}
.cifra.ok .n{color:var(--ok)}

/* ---------------- Tablas ---------------- */
.tabla-envoltorio{overflow-x:auto; background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra)}
table{width:100%; border-collapse:collapse; font-size:14px}
th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--tenue); font-weight:600; padding:11px 14px; border-bottom:1px solid var(--linea);
  background:#fbfafd; white-space:nowrap;
}
td{padding:10px 14px; border-bottom:1px solid #f1eff6; vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fbfaff}
td.num, th.num{text-align:right; white-space:nowrap}
.tabla-vacia{padding:38px 20px; text-align:center; color:var(--tenue)}

/* ---------------- Distintivos ---------------- */
.pill{
  display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px;
  font-weight:600; background:#f0eef7; color:var(--tinta-suave); white-space:nowrap;
}
.pill-ok{background:var(--ok-fondo); color:var(--ok)}
.pill-no{background:#f0eef7; color:var(--tenue)}
.pill-alerta{background:var(--alerta-fondo); color:var(--alerta)}
.pill-aviso{background:var(--aviso-fondo); color:var(--aviso)}
.pill-acento{background:var(--acento-claro); color:var(--acento-oscuro)}
/* Costat del quadre: esquerra i dreta de la formacio, vist des de dalt */
.pill-costat-izq{background:#e8f0fd; color:#1f4f9c}
.pill-costat-der{background:#fdf0e4; color:#8a5210}

/* -------- Planol dels quadres: les dues fileres vistes des de dalt -------- */
.canvi-vista{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.canvi-vista .sub{margin:0 0 0 6px}
.planol{margin-bottom:18px}
.planol-ajuntament{
  text-align:center; font-weight:700; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--acento-oscuro); background:var(--acento-claro);
  border-radius:999px; padding:8px 14px; margin-bottom:14px;
}
.planol-fileres{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.planol-filera{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:14px;
}
.planol-filera h2{
  display:flex; align-items:center; gap:9px; margin:0 0 12px; font-size:15px; font-weight:600;
}
.planol-filera h2 .sub{margin:0}
.planol-peu{margin-top:12px}
.quadre-fitxa{
  display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center;
  border:1px solid var(--linea); border-radius:10px; padding:9px 11px; margin-bottom:8px;
}
.quadre-fitxa:last-child{margin-bottom:0}
.quadre-fitxa:hover{border-color:var(--acento-claro); background:#fbfaff}
.quadre-inactiu{opacity:.6}
.quadre-codi{font-size:16px; font-weight:700}
.quadre-codi a{color:var(--tinta)}
.quadre-cos{min-width:0}
.quadre-paquet{font-size:13px; margin-bottom:5px}
.quadre-posicions{display:flex; gap:4px; flex-wrap:wrap}
.quadre-posicions .pill{padding:2px 7px; min-width:24px; text-align:center}
.quadre-nota{margin-top:4px; color:var(--tenue)}
.quadre-gent{text-align:center; min-width:42px; line-height:1.15}
.quadre-gent a{font-size:17px; font-weight:700}
.quadre-gent small{display:block; font-size:10px; color:var(--tenue)}
@media (max-width:820px){ .planol-fileres{grid-template-columns:1fr} }
.punto{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:-1px}

/* ---------------- Botones ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:9px;
  border:1px solid var(--linea); background:var(--papel); color:var(--tinta);
  font-size:14px; font-weight:500; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.btn:hover{background:var(--fondo); text-decoration:none}
.btn-principal{background:var(--acento); border-color:var(--acento); color:#fff}
.btn-principal:hover{background:var(--acento-oscuro); border-color:var(--acento-oscuro)}
.btn-peligro{color:var(--alerta); border-color:#f0d4c6}
.btn-peligro:hover{background:var(--alerta-fondo)}
.btn-plano{border-color:transparent; background:transparent; padding:6px 10px; color:var(--tinta-suave)}
.btn-plano:hover{background:var(--fondo)}
.btn-mini{padding:4px 10px; font-size:13px}

/* ---------------- Formularios ---------------- */
fieldset{border:1px solid var(--linea); border-radius:var(--radio); padding:16px 18px 6px; margin:0 0 18px}
legend{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--tenue); font-weight:600; padding:0 6px}
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px}
.campo{display:flex; flex-direction:column; gap:5px; margin-bottom:12px}
.campo.ancho{grid-column:1/-1}
label{font-size:13px; font-weight:600; color:var(--tinta-suave)}
.req{color:var(--alerta)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea{
  width:100%; padding:8px 11px; border:1px solid var(--linea); border-radius:9px;
  font-family:inherit; font-size:14px; background:var(--papel); color:var(--tinta);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento-claro); border-color:var(--acento)}
textarea{resize:vertical}
small{color:var(--tenue); font-size:12px}
.check{display:inline-flex; align-items:center; gap:7px; font-weight:500; cursor:pointer}
.check input{width:auto; margin:0}
.opciones{display:flex; flex-wrap:wrap; gap:12px}
.filtros{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px}
.filtros .campo{margin-bottom:0; min-width:150px}
.filtros .campo.crece{flex:1; min-width:210px}

/* ---------------- Avisos ---------------- */
.aviso{padding:11px 15px; border-radius:10px; margin-bottom:16px; font-size:14px; border:1px solid transparent}
.aviso-ok{background:var(--ok-fondo); color:var(--ok); border-color:#c5e9d5}
.aviso-error{background:var(--alerta-fondo); color:var(--alerta); border-color:#f3d6c7}
.aviso-info{background:var(--acento-claro); color:var(--acento-oscuro); border-color:#e0d3fa}
.aviso-aviso{background:var(--aviso-fondo); color:var(--aviso); border-color:#f0e2bb}

/* ---------------- Login ---------------- */
.caja-login{background:var(--papel); border:1px solid var(--linea); border-radius:16px; padding:30px; box-shadow:var(--sombra)}
.caja-login h1{text-align:center; margin-bottom:22px}
.caja-login .btn{width:100%; justify-content:center; margin-top:6px}
.logo-grande{display:block; width:110px; height:auto; margin:0 auto 10px}

/* ---------------- Asistencia ---------------- */
.lista-asistencia{list-style:none; margin:0; padding:0}
.fila-asistencia{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:9px 14px; border-bottom:1px solid #f1eff6; flex-wrap:wrap;
}
.fila-asistencia:last-child{border-bottom:none}
.fila-asistencia .quien{font-weight:500}
.fila-asistencia .quien small{display:block; font-weight:400}
.grupo-radio{display:flex; gap:0; border:1px solid var(--linea); border-radius:9px; overflow:hidden}
.grupo-radio label{
  padding:6px 13px; font-size:13px; cursor:pointer; background:var(--papel);
  border-right:1px solid var(--linea); color:var(--tinta-suave); font-weight:500; margin:0;
}
.grupo-radio label:last-child{border-right:none}
.grupo-radio input{display:none}
.grupo-radio input:checked + span{font-weight:700}
.grupo-radio label:has(input:checked){background:var(--acento-claro); color:var(--acento-oscuro)}
.grupo-radio label.v-presente:has(input:checked){background:var(--ok-fondo); color:var(--ok)}
.grupo-radio label.v-ausente:has(input:checked){background:var(--alerta-fondo); color:var(--alerta)}
.grupo-radio label.v-justificado:has(input:checked){background:var(--aviso-fondo); color:var(--aviso)}

.barra-fija{
  position:sticky; bottom:0; background:var(--papel); border-top:1px solid var(--linea);
  padding:12px 16px; display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; border-radius:0 0 var(--radio) var(--radio); z-index:10;
}

/* ---------------- Barras de progreso ---------------- */
.barra{height:7px; background:#eeecf4; border-radius:4px; overflow:hidden; min-width:70px}
.barra span{display:block; height:100%; background:var(--acento); border-radius:4px}
.barra.ok span{background:var(--ok)}
.barra.baja span{background:var(--alerta)}

.pestanas{display:flex; gap:4px; border-bottom:1px solid var(--linea); margin-bottom:18px; flex-wrap:wrap}
.pestana{padding:9px 15px; color:var(--tinta-suave); font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px}
.pestana:hover{text-decoration:none; color:var(--tinta)}
.pestana.activa{color:var(--acento-oscuro); border-bottom-color:var(--acento)}

.dos-columnas{display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start}
@media (max-width:900px){ .dos-columnas{grid-template-columns:1fr} }
.linea-datos{display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid #f4f2f8; font-size:14px}
.linea-datos:last-child{border-bottom:none}
.linea-datos .et{color:var(--tenue)}
.linea-datos .va{text-align:right; font-weight:500}

/* ---------------- Selector de color ---------------- */
.selector-color{display:flex; gap:8px; align-items:center}
.selector-color input[type=color]{
  width:46px; height:38px; padding:3px; flex:none; cursor:pointer;
  border:1px solid var(--linea); border-radius:9px; background:var(--papel);
}
.selector-color input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.selector-color input[type=color]::-webkit-color-swatch{border:none; border-radius:6px}
.selector-color input[type=color]::-moz-color-swatch{border:none; border-radius:6px}
.codi-color{font-family:Consolas,monospace; text-transform:lowercase}
.paleta{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.mostra{
  width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.12);
  padding:0; cursor:pointer; box-shadow:0 1px 2px rgba(20,15,45,.12);
}
.mostra:hover{transform:scale(1.15); border-color:rgba(0,0,0,.3)}
.mostra:focus-visible{outline:2px solid var(--acento); outline-offset:2px}

/* ---------------- Importacio ---------------- */
.pasos{margin:0; padding-left:20px; color:var(--tinta-suave)}
.pasos li{margin-bottom:8px}
.coincidencia-ok{color:var(--ok); font-weight:600}
.coincidencia-duda{color:var(--aviso); font-weight:600}
.sel-parella{min-width:190px; font-size:13px; padding:5px 8px}
input[type=file]{
  width:100%; padding:9px 11px; border:1px dashed var(--linea); border-radius:9px;
  background:var(--fondo); font-family:inherit; font-size:14px; cursor:pointer;
}
td .pill{margin-right:3px}

/* ---------------- Edicio rapida al llistat ---------------- */
.cel-editable{position:relative; white-space:nowrap}
.cel-editable .valor{margin-right:2px}
.editar-cel{
  display:inline-block; width:20px; height:20px; line-height:19px; text-align:center;
  border-radius:5px; color:var(--tenue); font-size:12px; opacity:.35;
  text-decoration:none; vertical-align:middle;
}
tr:hover .editar-cel{opacity:.8}
.editar-cel:hover{background:var(--acento-claro); color:var(--acento-oscuro); opacity:1; text-decoration:none}
.cel-editable.editant{background:var(--acento-claro)}
.cel-editable.desant{opacity:.5}
.cel-editable.desat{background:var(--ok-fondo); transition:background .6s}
.sel-cel{min-width:170px; max-width:230px; font-size:13px; padding:4px 8px}

/* ---- Quadrat 2x2 de la formació d'una dansa ---- */
.quadre-mini{display:inline-grid; grid-template-columns:repeat(2,20px); grid-gap:3px; vertical-align:middle}
.quadre-mini.gran{grid-template-columns:repeat(2,34px); grid-gap:5px}
.quadre-mini .casella{display:flex; align-items:center; justify-content:center;
  height:20px; border-radius:5px; background:var(--acento-claro); color:var(--acento-oscuro);
  font-size:12px; font-weight:600; border:1px solid #e0d3fa}
.quadre-mini.gran .casella{height:34px; font-size:15px}
.quadre-mini .casella.buida{background:#f4f2f8; color:#b6b2c4; border-style:dashed}
.quadre-mini .casella.repetida{background:var(--alerta-fondo); color:var(--alerta); border-color:#f3d6c7}

.quadre-editor{margin-top:14px}
.quadre-caselles{display:grid; grid-template-columns:repeat(2,minmax(120px,160px)); gap:12px}
.casella-camp label{display:block; font-size:12px; color:var(--tenue); margin-bottom:4px}
.casella-camp select{width:100%; text-align:center; font-size:18px; font-weight:600; padding:10px}
.casella-camp select.repetida{border-color:var(--alerta); background:var(--alerta-fondo); color:var(--alerta)}

tr.fila-activa > td{background:var(--acento-claro)}

/* ---------------- Selector de temporada (cabecera) ---------------- */
.selector-temporada{display:flex; align-items:center; gap:6px}
.selector-temporada label{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--tenue);
}
.selector-temporada select{
  padding:5px 8px; font-size:13px; font-weight:600; min-width:104px;
  border-radius:8px; background:var(--acento-claro); color:var(--acento-oscuro);
  border:1px solid transparent;
}
.selector-temporada select:focus{border-color:var(--acento)}