/* Estetica del boleto oficial de La Quiniela: papel blanco, textos en azul,
   rejilla en salmon con lineas rojas y bandas azules de cabecera.
   Los nombres de las variables se mantienen por compatibilidad con las plantillas. */
:root{
  --paper:#FFFFFF;        /* papel del boleto */
  --paper-dark:#DCE5ED;   /* fondo de pagina y barra de pestanas */
  --ink:#123A63;          /* azul oscuro de los textos */
  --green:#1D6FB8;        /* azul medio: seleccion y botones secundarios */
  --green-dark:#10365E;   /* azul oscuro de bandas y cabeceras */
  --red:#D8232A;          /* rojo Quiniela */
  --gold:#D8232A;         /* mismo rojo: numeros de partido y Pleno al 15 */
  --line:#EBB4AE;         /* salmon de las lineas de la rejilla */
  --white:#FFFFFF;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper-dark);
  background-image:repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(18,58,99,0.05) 40px);
  color:var(--ink);
  font-family:'Work Sans', system-ui, sans-serif;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:16px;
}
.app{
  width:100%;
  max-width:620px;
  align-self:flex-start;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:4px;
  box-shadow:0 6px 0 rgba(27,58,43,0.15), 0 12px 24px rgba(0,0,0,0.15);
  overflow:hidden;
}

/* ------------------------------------------------------------------ cabecera */
.ticket-header{
  background:var(--paper);
  color:var(--ink);
  padding:18px 20px 16px;
  text-align:center;
  position:relative;
  border-bottom:3px solid var(--red);
}
/* El cubo 1-X-2 del logo oficial, puesto por CSS para no tocar las plantillas. */
.ticket-header::before{
  content:"";
  display:block;
  width:52px;
  height:52px;
  margin:0 auto 6px;
  background:url("../img/logo.png") center/contain no-repeat;
}
.eyebrow{
  font-family:'Courier Prime', monospace;
  font-size:10.5px;
  letter-spacing:3px;
  color:#6E86A0;
  margin-bottom:2px;
}
.ticket-header h1{
  font-family:'Anton', sans-serif;
  font-size:38px;
  letter-spacing:2px;
  margin:0;
  line-height:1;
}
.ticket-header h1 a{color:inherit; text-decoration:none;}
/* Banda azul, como la de "SENCILLO-MULTIPLE / JORNADA" del boleto oficial. */
.jornada-label{
  margin-top:10px;
  font-family:'Work Sans', system-ui, sans-serif;
  font-weight:600;
  font-size:12.5px;
  background:var(--green);
  color:var(--white);
  display:inline-block;
  padding:5px 14px;
  border-radius:2px;
  letter-spacing:0.5px;
}
/* El acceso de admin ya no ocupa una pestana: vive discreto en la esquina. */
.admin-link{
  position:absolute;
  top:12px; right:12px;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:var(--ink);
  opacity:0.45;
  text-decoration:none;
  font-size:16px;
  line-height:1;
}
.admin-link:hover, .admin-link:focus{opacity:1; background:rgba(18,58,99,0.08);}

/* ------------------------------------------------------------------ pestanas */
.tabs{display:flex; border-bottom:2px solid var(--ink); background:var(--paper-dark);}
.tab{
  flex:1;
  padding:12px 6px;
  text-align:center;
  text-decoration:none;
  border-right:1px solid var(--line);
  font-weight:600;
  font-size:13px;
  color:var(--ink);
  opacity:0.55;
}
.tab:last-child{border-right:none;}
.tab.active{opacity:1; background:var(--paper); box-shadow:inset 0 -3px 0 var(--red);}

.panel{padding:18px 18px 24px;}
.panel h2{
  font-family:'Anton', sans-serif;
  font-size:20px;
  letter-spacing:1px;
  margin:0 0 12px;
  color:var(--green-dark);
}

/* -------------------------------------------------------------------- avisos */
.flash{
  padding:10px 12px;
  border-radius:3px;
  font-size:13.5px;
  font-weight:600;
  margin-bottom:12px;
  border-left:4px solid;
}
.flash.ok{background:#E3EEF9; border-color:var(--green); color:var(--green-dark);}
.flash.error{background:#FBE4E2; border-color:var(--red); color:var(--red);}
.hint{font-size:11.5px; opacity:0.7; margin:-4px 0 12px; line-height:1.4;}
.empty-state{text-align:center; padding:24px 10px; opacity:0.6; font-size:13.5px;}
.errores{background:#FBE4E2; border-left:4px solid var(--red); padding:10px 12px 10px 26px;
  margin:0 0 14px; border-radius:3px; font-size:13px; color:var(--red);}
.errores li{margin:2px 0;}

/* ----------------------------------------------------------------- formulario */
label.field-label{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--green-dark);
  margin-bottom:6px;
}
textarea,
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], select{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--line);
  border-radius:3px;
  background:var(--white);
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:15px;
  color:var(--ink);
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--green); outline-offset:1px;}
textarea{font-family:'Courier Prime', monospace; font-size:13px; line-height:1.5; resize:vertical;}
.campo{margin-bottom:14px;}
.fila-doble{display:grid; grid-template-columns:1fr 1fr; gap:10px;}

/* --------------------------------------------------------------------- boleto */
.ticket-grid{border:1.5px solid var(--red); border-radius:3px; overflow:hidden; margin-bottom:14px;}
.match-row{
  display:grid;
  grid-template-columns:22px 1fr auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  background:var(--white);
}
.match-row:nth-child(even){background:#FDEEEC;}
.match-row:last-child{border-bottom:none;}
.match-num{font-family:'Courier Prime', monospace; font-weight:700; font-size:13px;
  color:var(--gold); text-align:center;}
.match-teams{font-size:13.5px; font-weight:500; line-height:1.25;}
.pick-group{display:flex; gap:4px;}
.pick-input{position:absolute; opacity:0; width:0; height:0;}
.pick-btn{
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--red);
  border-radius:2px;
  background:var(--white);
  font-family:'Courier Prime', monospace;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  color:var(--red);
  user-select:none;
}
.pick-input:checked + .pick-btn{background:var(--green); color:var(--white); border-color:var(--green-dark);}
.pick-input:focus-visible + .pick-btn{outline:2px solid var(--gold); outline-offset:1px;}
.pick-input:disabled + .pick-btn{cursor:default; opacity:0.85;}

.pleno-row{
  border:1.5px solid var(--red);
  border-radius:3px;
  background:#FDEEEC;
  padding:12px;
  margin-bottom:16px;
}
.pleno-title{font-family:'Courier Prime', monospace; font-weight:700; font-size:12px;
  letter-spacing:1px; color:var(--gold); margin-bottom:6px;}
.pleno-teams{font-size:13.5px; font-weight:600; margin-bottom:10px;}
.pleno-lado{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap;}
.pleno-lado:last-child{margin-bottom:0;}
.pleno-equipo{font-size:12.5px; font-weight:600; min-width:96px;}

/* --------------------------------------------------------------------- botones */
.primary-btn{
  width:100%;
  padding:13px;
  background:var(--red);
  color:var(--white);
  border:none;
  border-radius:3px;
  font-family:'Anton', sans-serif;
  font-size:16px;
  letter-spacing:1.5px;
  cursor:pointer;
}
.primary-btn:active{transform:translateY(1px);}
.secondary-btn{
  width:100%;
  padding:10px;
  background:var(--green);
  color:var(--white);
  border:none;
  border-radius:3px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  margin-top:6px;
}
.ghost-btn{
  padding:7px 10px;
  background:none;
  border:1.5px solid var(--line);
  border-radius:3px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
}
.ghost-btn:hover{border-color:var(--ink);}
.botonera{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.botonera form{margin:0;}

/* ---------------------------------------------------------------- tablas */
table.ranking{width:100%; border-collapse:collapse; font-size:13.5px;}
table.ranking th{
  text-align:left;
  font-family:'Courier Prime', monospace;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--green-dark);
  border-bottom:2px solid var(--ink);
  padding:6px 4px;
}
table.ranking td{padding:8px 4px; border-bottom:1px solid var(--line);}
table.ranking tbody tr:first-child td{font-weight:700;}
.rank-pos{font-family:'Courier Prime', monospace; color:var(--gold); font-weight:700; width:24px;}
.rank-pts{text-align:right; font-family:'Courier Prime', monospace; font-weight:700;
  color:var(--green-dark);}
.rank-sec{text-align:right; font-size:12px; opacity:0.65;}

.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:12px;}
table.matriz{border-collapse:collapse; font-size:12px; min-width:100%;}
table.matriz th, table.matriz td{
  border:1px solid var(--line);
  padding:5px 6px;
  text-align:center;
  white-space:nowrap;
}
table.matriz th{
  background:var(--paper-dark);
  font-family:'Courier Prime', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
table.matriz th.jugador, table.matriz td.jugador{text-align:left; font-weight:600;
  position:sticky; left:0; background:var(--paper); z-index:1;}
table.matriz td.acierto{background:#D7E7F7; font-weight:700; color:var(--green-dark);}
table.matriz td.fallo{opacity:0.45;}
table.matriz td.oficial{background:var(--green-dark); color:var(--paper); font-weight:700;}
table.matriz .doble{font-size:10.5px; letter-spacing:-0.5px;}

/* ---------------------------------------------------------------- distintivos */
.badge{
  display:inline-block;
  font-family:'Courier Prime', monospace;
  font-size:10.5px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:10px;
  border:1px solid currentColor;
}
.badge.abierta{color:var(--green);}
.badge.cerrada{color:var(--gold);}
.badge.escrutada{color:var(--green-dark); background:#DCE8F5;}
.badge.borrador{color:var(--red);}
.badge.pleno{color:var(--red); background:#FDEEEC; border-color:var(--red);}

.lista-simple{list-style:none; margin:0; padding:0; font-size:13.5px;}
.lista-simple li{padding:7px 2px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; gap:10px;}
.lista-simple li:last-child{border-bottom:none;}
.lista-simple .cuando{font-size:11.5px; opacity:0.6; font-family:'Courier Prime', monospace;}

/* --------------------------------------------------------------------- admin */
.admin-section{margin-bottom:26px;}
.admin-section h3{
  font-family:'Anton', sans-serif;
  font-size:16px;
  letter-spacing:1px;
  margin:0 0 10px;
  color:var(--green-dark);
  border-bottom:1.5px solid var(--line);
  padding-bottom:5px;
}
.config-row{display:grid; grid-template-columns:20px 1fr 1fr; gap:6px; margin-bottom:6px;
  align-items:center;}
.config-num{font-family:'Courier Prime', monospace; font-size:12px; text-align:center;
  color:var(--gold);}
.config-row input{padding:7px 8px; font-size:12.5px;}
.result-row{display:grid; grid-template-columns:20px 1fr auto; gap:6px; align-items:center;
  margin-bottom:6px;}
.result-row .pick-btn{width:26px; height:26px; font-size:11px;}
.result-label{font-size:12px; font-weight:500;}

/* ----------------------------------------------------------------------- pie */
.pie{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  background:var(--paper-dark);
  border-top:1px solid var(--line);
  font-size:12px;
}
.pie a{color:var(--green-dark); font-weight:600;}
.centrado{text-align:center;}

/* --------------------------------------------------------------------- login */
.login-body .app{max-width:380px;}

@media (max-width:420px){
  body{padding:8px;}
  .ticket-header h1{font-size:32px;}
  .match-teams{font-size:12.5px;}
  .pick-btn{width:28px; height:28px;}
}