/* estilo.css — una sola hoja para las dos páginas.
   La consulta se diseña para 360 px de ancho, bajo sol y con guantes puestos:
   texto grande, contraste alto, blancos de al menos 48 px. */

:root {
  color-scheme: light;

  --brand:   #0f6e56;
  --brand-d: #0a4c3b;
  --tinta:   #16211d;
  --suave:   #5a6b64;
  --linea:   #d6ded9;
  --fondo:   #f4f6f4;
  --papel:   #ffffff;

  /* Bloques de veredicto: fondo sólido y texto blanco. Probado en exterior;
     un fondo pastel con texto oscuro no se lee al sol. */
  --ok:      #12704f;
  --mal:     #ab2626;
  --duda:    #8a5a0c;
  --info:    #1f5f8b;
}

* { box-sizing: border-box; }

/* Sin esto, cualquier regla de display —.modos usa flex— le gana al atributo
   hidden y el elemento sigue visible. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--brand-d); }

/* ============================ Consulta (index.html) ============================ */

.cancha { max-width: 520px; margin: 0 auto; min-height: 100vh; background: var(--papel); }

.barra {
  background: var(--brand);
  color: #fff;
  padding: 14px 18px calc(14px + env(safe-area-inset-top));
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.barra .marca { font-weight: 700; letter-spacing: .3px; }
.barra .sub { font-size: 13px; opacity: .85; }

.cuerpo { padding: 18px; }

.campo { margin-bottom: 18px; }
.campo > label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 7px;
}

/* 16px como mínimo: con menos, Safari en iOS hace zoom al enfocar el campo
   y el delegado queda con la página descuadrada en plena revisión. */
.control {
  width: 100%;
  height: 54px;
  padding: 0 14px;
  font-size: 20px;
  font-family: inherit;
  border: 2px solid var(--linea);
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta);
}
.control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,110,86,.16); }
input.control { letter-spacing: .5px; font-variant-numeric: tabular-nums; }
select.control { appearance: none; background-image: none; }

.error { color: var(--mal); font-size: 14px; font-weight: 600; margin: 7px 0 0; }

/* Elegir el partido: solo aparece en la versión que habla con el Worker, donde
   el teléfono se baja los dos planteles en vez de la asociación entera. */
.titulo-paso { font-size: 20px; margin: 0 0 4px; }

.partido-cargado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 20px;
  background: #f0f7f4;
  border: 1px solid var(--linea);
  border-radius: 10px;
}
.partido-cargado .quienes { flex: 1; font-weight: 700; font-size: 15px; color: var(--brand-d); }

.guardado {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
}
.guardado b { display: block; font-size: 15px; color: var(--tinta); }
.guardado span { display: block; font-size: 13px; color: var(--suave); margin-top: 2px; }

.boton {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font: 600 18px/1 inherit;
  cursor: pointer;
}
.boton:active { background: var(--brand-d); }
.boton[disabled] { opacity: .5; }

.boton-plano {
  background: none;
  border: 1px solid var(--linea);
  border-radius: 8px;
  color: var(--suave);
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
}

/* Veredicto */
.veredicto { margin-top: 22px; border-radius: 12px; overflow: hidden; }
.veredicto .titulo {
  padding: 18px;
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.15;
}
.veredicto--ok   .titulo { background: var(--ok); }
.veredicto--mal  .titulo { background: var(--mal); }
.veredicto--duda .titulo { background: var(--duda); }

.veredicto .detalle { background: var(--papel); border: 1px solid var(--linea); border-top: 0; padding: 16px 18px; }
.veredicto .persona { font-size: 20px; font-weight: 700; margin: 0 0 2px; }
.veredicto .club { color: var(--suave); margin: 0 0 12px; }
.veredicto .rutmostrado { font-variant-numeric: tabular-nums; color: var(--suave); font-size: 14px; margin: 0 0 12px; }

.motivo {
  border-left: 4px solid var(--mal);
  background: #fdf2f2;
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
  font-weight: 600;
}

/* Una sanción vigente cuando no se eligió serie: la serie manda, porque es lo
   que el delegado tiene que comparar con el partido que está dirigiendo. */
.motivo--serie { border-left-color: var(--duda); background: #fdf6e8; margin-bottom: 8px; }
.motivo--serie b { display: block; font-size: 18px; letter-spacing: .3px; }
.motivo--serie span { display: block; font-weight: 400; font-size: 14.5px; margin-top: 2px; }

.explica { margin: 0 0 10px; color: var(--suave); font-size: 14.5px; }

.campo > label small { font-weight: 400; color: var(--suave); }
.ayuda { margin: 7px 0 0; color: var(--suave); font-size: 13.5px; line-height: 1.45; }
.aviso-otra {
  border-left: 4px solid var(--info);
  background: #eef5fa;
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 15px;
}
.aviso-doble {
  border-left: 4px solid var(--duda);
  background: #fdf6e8;
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 15px;
  margin-top: 10px;
}

.legal {
  margin: 22px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--linea);
  border-radius: 8px;
  color: var(--suave);
  font-size: 13.5px;
}
.legal strong { color: var(--tinta); }

.pie {
  padding: 16px 18px calc(24px + env(safe-area-inset-bottom));
  color: var(--suave);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--linea);
  margin-top: 22px;
}
.pie .crece { flex: 1; }

.cinta {
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.cinta--sinred { background: #fdf6e8; color: #6b4708; border-bottom: 1px solid #f0e0bd; }
.cinta--error  { background: #fdf2f2; color: #8c1f1f; border-bottom: 1px solid #f0c9c9; }

/* ============================ Administración (admin.html) ============================ */

.panel { max-width: 1240px; margin: 0 auto; padding: 22px 20px 60px; }
.panel h1 { font-size: 24px; margin: 0 0 4px; }
.panel .lead { color: var(--suave); margin: 0 0 22px; max-width: 78ch; }

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
}
.tarjeta h2 { font-size: 17px; margin: 0 0 12px; }

/* Selector de trabajo: cargar anuarios o cargar un boletín. Son dos tareas con
   ritmos distintos —una al año, la otra cada quincena— y mezclarlas confunde. */
.modos { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.modo {
  flex: 1 1 300px;
  text-align: left;
  font: inherit;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  display: block;
}
.modo:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(15,110,86,.08); }
.modo .que { display: block; font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.modo .cuando { display: block; color: var(--brand-d); font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.modo .desc { display: block; color: var(--suave); font-size: 14px; line-height: 1.5; }
.modo .destino { display: block; margin-top: 12px; font-size: 13px; color: var(--suave); }

.cabecera-modo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--linea);
}
.cabecera-modo .titulo { font-size: 17px; font-weight: 600; }
.cabecera-modo .crece { flex: 1; }

.zona {
  border: 2px dashed var(--linea);
  border-radius: 12px;
  padding: 34px 20px;
  text-align: center;
  color: var(--suave);
  background: var(--papel);
  cursor: pointer;
}
.zona.encima { border-color: var(--brand); background: #f0f7f4; color: var(--brand-d); }
.zona strong { display: block; color: var(--tinta); font-size: 17px; margin-bottom: 4px; }

.archivos { list-style: none; margin: 16px 0 0; padding: 0; }
.archivos li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--linea);
  flex-wrap: wrap;
}
.archivos .nom { flex: 1; min-width: 220px; }
.archivos .nom small { display: block; color: var(--suave); font-size: 13px; margin-top: 2px; }

.marca-tipo {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e7efec;
  color: var(--brand-d);
}
.marca-tipo--audiencia { background: #eaf0f6; color: #1c4f74; }
.marca-tipo--desconocido { background: #fdf2f2; color: #8c1f1f; }

.mini {
  height: 32px;
  padding: 0 8px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--linea);
  border-radius: 6px;
}

.numeros { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.numero {
  flex: 1 1 130px;
  border: 1px solid var(--linea);
  border-radius: 9px;
  padding: 12px 14px;
  background: var(--papel);
}
.numero .v { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numero .k { font-size: 12.5px; color: var(--suave); margin-top: 3px; }
.numero--ok  .v { color: var(--ok); }
.numero--mal .v { color: var(--mal); }
.numero--duda .v { color: var(--duda); }

.pestanas { display: flex; gap: 4px; border-bottom: 2px solid var(--linea); margin-bottom: 16px; flex-wrap: wrap; }
.pestanas button {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--suave);
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.pestanas button.activa { color: var(--brand-d); border-bottom-color: var(--brand); }

.rueda { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.datos { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.datos th, table.datos td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
table.datos th { position: sticky; top: 0; background: #eef2f0; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); }
table.datos td.num { font-variant-numeric: tabular-nums; }
table.datos tr.problema td { background: #fdf5f5; }
table.datos td.alerta { color: var(--mal); font-weight: 600; white-space: normal; min-width: 220px; }
table.datos td.alerta--aviso { color: var(--suave); font-weight: 400; }

/* A qué jugador del registro queda amarrada la sanción. Se muestra pero no se
   exporta: es para revisar antes de escribir. */
table.datos td.asociada { color: var(--brand-d); font-weight: 600; }
table.datos th:last-child, table.datos td:last-child { border-left: 2px solid var(--linea); }

.nota { border-left: 4px solid var(--info); background: #eef5fa; padding: 12px 14px; border-radius: 0 8px 8px 0; margin: 0 0 16px; font-size: 14.5px; }
.nota--mal  { border-left-color: var(--mal);  background: #fdf2f2; }
.nota--duda { border-left-color: var(--duda); background: #fdf6e8; }
.nota p { margin: 6px 0 0; }

/* Fila de envío a la planilla. Va antes que la de copiar, porque cuando el
   script está instalado escribir es el camino normal y copiar el de respaldo. */
.envio {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #f4f8f6;
}
.envio label { font-size: 14px; font-weight: 600; }
.envio .mini { height: 40px; }
.envio .boton { width: auto; padding: 0 20px; min-height: 40px; font-size: 15px; }
.envio .pista { flex: 1 1 100%; }

.pista--ok  { color: var(--ok);  font-weight: 600; }
.pista--mal { color: var(--mal); font-weight: 600; }

.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.acciones .boton { width: auto; padding: 0 20px; min-height: 44px; font-size: 15px; }
.acciones .pista { color: var(--suave); font-size: 13px; }

/* Último recurso cuando el navegador no deja copiar solo: el contenido a la
   vista, seleccionado, para un Ctrl+C a mano. */
textarea.salida {
  width: 100%;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 10px;
  background: #f7f9f8;
  color: var(--tinta);
  white-space: pre;
  overflow: auto;
  resize: vertical;
}

/* Recuadro para copiar a mano cuando el navegador bloquea el portapapeles.
   Monoespaciado y sin ajuste de línea, para que se vean las columnas. */
.salida {
  width: 100%;
  font: 12px/1.5 Consolas, "SF Mono", Menlo, monospace;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f7f9f8;
  color: var(--tinta);
  white-space: pre;
  overflow: auto;
  resize: vertical;
}
.salida:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,110,86,.16); }

details.sobras { margin-top: 14px; }
details.sobras summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--suave); }
details.sobras pre {
  background: #f7f9f8;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.6;
  margin: 10px 0 0;
}

/* Las sanciones que el administrador tiene que mover a mano cada jornada. */
.pendientes { list-style: none; margin: 0; padding: 0; }
.pendientes li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--linea);
}
.pendientes .quien { flex: 1; min-width: 220px; }
.pendientes .quien b { display: block; font-size: 15px; }
.pendientes .quien small { display: block; color: var(--suave); font-size: 13px; margin-top: 2px; }
.pendientes .cuenta {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--duda);
  min-width: 80px;
}

.vacio { color: var(--suave); text-align: center; padding: 34px 10px; }

@media (max-width: 640px) {
  .panel { padding: 16px 14px 50px; }
  .numero { flex-basis: 100px; }
}