/* Formulario de hora y pista: el aspecto de la maqueta aprobada el 3-nov-2026 (docs/maqueta-horas-casa de futbito-app),
   colores Rojillos de la web de la liga. */
:root{
  --rojo:#E0241C; --rojo-osc:#9B120D; --oro:#C8960C; --tinta:#1f1a19; --suave:#5d5554;
  --linea:#e6dedc; --fondo:#f3f1f1; --tarjeta:#ffffff; --ok:#1d7a3a;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo);color:var(--tinta);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
button,input,select,textarea{font:inherit}
[hidden]{display:none!important}
main{max-width:460px;margin:0 auto;padding:20px 16px 48px}

.cab{background:var(--tarjeta);border-radius:10px 10px 0 0;padding:14px 18px;border-bottom:4px solid var(--rojo);display:flex;align-items:center;gap:12px}
.cab img{height:34px;width:auto}
.cab .liga{font-size:13px;color:var(--suave);line-height:1.25;flex:1;min-width:0}
.idioma{background:transparent;border:1.5px solid var(--rojo);color:var(--rojo-osc);border-radius:999px;padding:4px 11px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.idioma:hover{background:#fff6f5}
.idioma:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.cuerpo{background:var(--tarjeta);border-radius:0 0 10px 10px;padding:20px 18px 22px;box-shadow:0 1px 0 var(--linea)}
.pie{font-size:13px;color:var(--suave);padding:12px 4px 0;margin:0}

h1{font-size:23px;line-height:1.2;margin:0 0 4px}
.sub{color:var(--suave);margin:0 0 18px}
.aviso-prueba{margin:0 0 16px;padding:10px 12px;border-radius:10px;background:#FBF3DE;color:#7A5A00;font-weight:700;font-size:14px}

.partido{border:2px solid var(--rojo);border-radius:10px;padding:14px 16px;margin:0 0 22px}
.partido .fecha{font-weight:700;color:var(--rojo-osc)}
.partido .eq{font-size:19px;font-weight:700;margin:6px 0 2px}
.partido .eq small{display:block;font-size:15px;font-weight:400;color:var(--suave)}
.partido .cat{font-size:14px;color:var(--suave);margin-top:6px}
.chip-casa{display:inline-block;background:var(--rojo);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;vertical-align:2px;margin-left:6px}

.campo{margin:0 0 18px}
label.et,legend.et{display:block;font-weight:700;margin:0 0 6px;padding:0}
.ayuda{font-size:14px;color:var(--suave);margin:4px 0 0}
input[type=time],input[type=text],textarea{width:100%;border:1.5px solid #cfc6c4;border-radius:10px;padding:11px 12px;background:#fff;color:var(--tinta)}
input[type=time]{max-width:180px;font-size:20px;font-weight:700}
textarea{min-height:78px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--rojo);box-shadow:0 0 0 3px rgba(224,36,28,.18)}
fieldset{border:0;margin:0 0 18px;padding:0}
.opc{display:flex;gap:10px;align-items:flex-start;border:1.5px solid #cfc6c4;border-radius:10px;padding:11px 12px;margin:0 0 8px;cursor:pointer}
.opc:has(input:checked){border-color:var(--rojo);background:#fff6f5}
.opc input{margin-top:3px;accent-color:var(--rojo)}
.opc b{display:block}
.opc span{font-size:14px;color:var(--suave)}
.otra{display:none;margin:4px 0 0 0;padding:12px;border-left:3px solid var(--rojo);background:#faf8f8;border-radius:0 10px 10px 0}
.otra.visible{display:block}
.otra .campo{margin-bottom:12px}
.ts{margin:0 0 18px;min-height:65px}
.boton{display:block;width:100%;background:var(--rojo);color:#fff;border:0;border-radius:10px;padding:14px 16px;font-weight:700;font-size:17px;cursor:pointer;text-align:center;text-decoration:none}
.boton:hover{background:var(--rojo-osc)}
.boton:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.boton[disabled]{opacity:.55;cursor:wait}
.nota{font-size:14px;color:var(--suave);margin:14px 0 0}
.error{display:none;color:var(--rojo-osc);font-size:14px;font-weight:700;margin:6px 0 0}
.error.visible{display:block}

.hecho{text-align:center;padding:6px 0 4px}
.hecho .circ{width:58px;height:58px;border-radius:50%;background:var(--ok);margin:0 auto 12px;position:relative}
.hecho .circ:after{content:"";position:absolute;left:21px;top:11px;width:13px;height:25px;border:solid #fff;border-width:0 4px 4px 0;transform:rotate(45deg)}
.resumen{border:1px solid var(--linea);border-radius:10px;padding:12px 14px;margin:16px 0;text-align:left}
.resumen div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px dashed var(--linea)}
.resumen div:last-child{border-bottom:0}
.resumen dt{color:var(--suave)}
.resumen dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
.centro{text-align:center}
.enlace{display:inline-block;margin-top:12px;color:var(--rojo-osc);font-weight:700}
@media (prefers-reduced-motion:no-preference){.cuerpo>section:not([hidden]),#f:not([hidden]){animation:entra .18s ease-out}@keyframes entra{from{opacity:.4}to{opacity:1}}}