/* campos.css — los campos de formulario y los botones de acción, IGUALES en todas las pantallas.

   Lo cargan lista.html (reglas, configuración, asistencia, perfil) y dashboard.html (rangos y
   filtros). Antes cada pantalla —y dentro de lista.html cada sección— tenía su propia receta: el
   campo de hora de Configuración salía nativo y descuadrado porque la regla de campos no incluía
   type=time, las contraseñas tampoco, los números tampoco… y dashboard.html llevaba fondos #fff
   fijos que en oscuro cegaban. Aquí hay UNA receta, la del selector de hora del modo oscuro
   automático, que es la que Miguel dijo que le gustaba: etiqueta pequeña encima, campo de 15px con
   fondo opaco que contrasta con la tarjeta, borde fino y esquinas de 10px.

   Depende de las variables del tema de la página que la carga:
     --fondo --ficha --ficha-op --linea --tinta --tinta-sua --azul --azul-hond --rojo --verde --ambar
   dashboard.html las tiene con otros nombres y las alias en su propio <style>.

   Nada de colores fijos: todo sale de las variables, así que el modo oscuro y la marca de cada
   instalación (que sobreescribe --azul en caliente) llegan solos. */

:root {
	--campo-radio: 10px;
	--campo-alto: 40px;
	--campo-fondo: var(--fondo);
	--campo-foco: rgba(38, 152, 208, .18);
	--campo-mal: rgba(192, 57, 43, .15);
}

/* ------------------------------------------------------------ el campo con su etiqueta encima */
.campo { display: block; margin: 10px 0 0; min-width: 0; }
.campo:first-child { margin-top: 0; }
/* La etiqueta encima. También dentro de los pares, donde el span cuelga de un <label> intermedio. */
.campo > span, .campo label > span {
	display: block; font-size: 12.5px; font-weight: 500; color: var(--tinta-sua); margin-bottom: 4px;
}

/* TODOS los tipos de texto, no una lista cerrada: la lista cerrada es justo lo que dejó fuera a
   time, password, number y tel. Los que no son de texto (checkbox, radio, range, color, file) se
   excluyen explícitamente y tienen su regla más abajo. */
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.campo select,
.campo textarea,
.campo-suelto {
	display: block; width: 100%; min-height: var(--campo-alto); box-sizing: border-box;
	padding: 8px 12px; margin: 0;
	font: inherit; font-size: 15px; line-height: 1.3; color: var(--tinta);
	background: var(--campo-fondo);
	border: 1px solid var(--linea); border-radius: var(--campo-radio);
	outline: none; -webkit-appearance: none; appearance: none;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.campo textarea { min-height: 76px; resize: vertical; line-height: 1.4; }

/* El desplegable con su flecha propia: la nativa cambia con cada navegador y en oscuro se pierde.
   La flecha es un SVG en línea que toma el color del texto atenuado vía currentColor no se puede
   (es una imagen), así que va en un gris medio que funciona sobre los dos fondos. */
.campo select {
	padding-right: 38px; cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%238A9099' d='M7.4 9.3 12 13.9l4.6-4.6 1.4 1.4-6 6-6-6z'/></svg>");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.campo select:disabled { cursor: default; }

/* Fecha y hora: cifras tabulares para que no bailen, y el icono nativo del selector visible también
   en oscuro (Chrome lo pinta negro; se invierte). */
.campo input[type="date"], .campo input[type="time"], .campo input[type="datetime-local"] {
	font-variant-numeric: tabular-nums; letter-spacing: .3px;
}
.campo input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
html[data-tema="oscuro"] .campo input::-webkit-calendar-picker-indicator { filter: invert(.85); }
@media (prefers-color-scheme: dark) {
	html:not([data-tema="claro"]) .campo input::-webkit-calendar-picker-indicator { filter: invert(.85); }
}
/* Números: sin las flechitas, que en una tablet son un blanco imposible y descuadran la altura. */
.campo input[type="number"] { -moz-appearance: textfield; }
.campo input[type="number"]::-webkit-outer-spin-button,
.campo input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Foco: el borde toma el color de la marca y un halo suave. Sin outline nativo, que corta las
   esquinas redondeadas. */
.campo input:focus, .campo select:focus, .campo textarea:focus, .campo-suelto:focus {
	border-color: var(--azul); box-shadow: 0 0 0 3px var(--campo-foco); background: var(--ficha-op);
}
.campo input::placeholder, .campo textarea::placeholder, .campo-suelto::placeholder {
	color: var(--tinta-sua); opacity: .7;
}
.campo input:disabled, .campo select:disabled, .campo textarea:disabled { opacity: .55; }
.campo input:read-only:not([type="date"]):not([type="time"]) { background: var(--ficha); }

/* Lo que está mal se ve en el campo, no solo en un texto de abajo. SOLO en campos: suelta, «.mal» pintaba un
   recuadro rojo con sombra en cualquier cosa con esa clase (el «Sin comunicación» de Cámaras y Sonido). */
input.mal, select.mal, textarea.mal { border-color: var(--rojo) !important; box-shadow: 0 0 0 3px var(--campo-mal) !important; }
.bien { color: var(--verde); }

/* Dos campos en fila, con su etiqueta cada uno. En móvil bajan a una columna: dos campos de 150px
   con sus etiquetas de dos líneas eran ilegibles. */
.campo.doble { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo.doble > label { display: block; min-width: 0; margin: 0; }
.campo.triple { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.campo.triple > label { display: block; min-width: 0; margin: 0; }
@media (max-width: 560px) {
	.campo.doble, .campo.triple { grid-template-columns: 1fr; }
}

/* Selector de color: cuadrado con el mismo borde y radio, al lado de su hex. */
.campo input[type="color"] {
	width: 44px; height: var(--campo-alto); padding: 3px; margin: 0; cursor: pointer;
	border: 1px solid var(--linea); border-radius: var(--campo-radio); background: var(--campo-fondo);
}
.campo input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.campo input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.campo.color { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: end; }
.campo.color > label { display: block; min-width: 0; margin: 0; }

/* Casillas: el color de la marca en vez del azul del sistema, y el texto pegado a su casilla. */
.interruptores, .acepta, .campo input[type="checkbox"], .campo input[type="radio"] { accent-color: var(--azul); }
.interruptores { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 4px; }
.interruptores label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
.interruptores input, .acepta input { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; cursor: pointer; }
.acepta { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; margin: 12px 0 4px; cursor: pointer; }
.acepta input { margin-top: 1px; }

/* Texto de ayuda bajo el campo. */
.ayuda { font-size: 12px; color: var(--tinta-sua); margin-top: 4px; line-height: 1.4; }
.ayuda b { color: var(--tinta); }

/* ------------------------------------------------------------ los botones de acción
   Tres familias, en cualquier pie (.pie de las ventanas, .pie-form de las tarjetas):
     normal   fondo de tarjeta, borde fino   -> cancelar, actualizar, buscar…
     .si      azul de la marca, letra blanca -> la acción principal
     .peligro rojo, letra blanca             -> lo que no se deshace (borrar, desvincular, apagar)
   Misma altura que un campo (40px) para que un botón junto a un campo quede alineado. */
.pie, .pie-form { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.pie button, .pie-form button, .boton {
	min-height: var(--campo-alto); padding: 9px 18px; margin: 0;
	border-radius: var(--campo-radio); border: 1px solid var(--linea);
	background: var(--ficha-op); color: var(--tinta);
	font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	transition: border-color .15s, background-color .15s, box-shadow .15s, transform .05s;
}
.pie button:hover, .pie-form button:hover, .boton:hover { border-color: var(--azul); }
.pie button:active, .pie-form button:active, .boton:active { transform: translateY(1px); }
.pie button:focus-visible, .pie-form button:focus-visible, .boton:focus-visible {
	outline: none; box-shadow: 0 0 0 3px var(--campo-foco);
}
.pie button.si, .pie-form button.si, .boton.si {
	background: var(--azul); border-color: var(--azul); color: #fff;
}
.pie button.si:hover, .pie-form button.si:hover, .boton.si:hover { filter: brightness(1.06); }
.pie button.peligro, .pie-form button.peligro, .boton.peligro {
	background: var(--rojo); border-color: var(--rojo); color: #fff;
}
.pie button:disabled, .pie-form button:disabled, .boton:disabled {
	opacity: .55; cursor: default; transform: none; filter: none;
}
/* Todos del mismo ancho: para pies con dos acciones equivalentes (Actualizar / Desvincular). */
.pie-form.iguales button, .pie.iguales button { flex: 1 1 0; min-width: 150px; }

/* ------------------------------------------------------------ el buscador de una lista */
input[type="search"].buscar, .campo-suelto[type="search"] { margin-bottom: 8px; }

/* ------------------------------------------------------------ dashboard.html
   Sus campos no van dentro de .campo: se les da la misma receta por el cuerpo. */
.dash-campos .rango input, .dash-campos select, .dash-campos .buscar {
	min-height: 36px; box-sizing: border-box; padding: 6px 12px;
	font: inherit; font-size: 14px; color: var(--tinta);
	background: var(--campo-fondo); border: 1px solid var(--linea); border-radius: var(--campo-radio);
	outline: none; transition: border-color .15s, box-shadow .15s;
}
.dash-campos select {
	-webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%238A9099' d='M7.4 9.3 12 13.9l4.6-4.6 1.4 1.4-6 6-6-6z'/></svg>");
	background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.dash-campos .rango input:focus, .dash-campos select:focus, .dash-campos .buscar:focus {
	border-color: var(--azul); box-shadow: 0 0 0 3px var(--campo-foco);
}