/* Selector y calendario propios (controles.js). El elemento nativo queda oculto y un botón con el mismo aspecto que un campo toma su lugar. */
/* !important porque los campos de cada página fijan su propio tamaño con más especificidad. */
.nativo { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

.control { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 8px 14px; border: 1px solid rgba(51, 32, 61, 0.52); border-radius: 12px; background: var(--campo); box-shadow: inset 0 1px 2px rgba(51, 32, 61, 0.05); color: var(--tinta); font: 400 16px/1.3 var(--f-ui); letter-spacing: 0; text-align: left; text-transform: none; cursor: pointer; }
.control-texto { min-width: 0; overflow-wrap: anywhere; }
.control-texto[data-vacio] { color: rgba(51, 32, 61, 0.66); }
.control svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.2s var(--ease); }
.control[aria-haspopup="listbox"][aria-expanded="true"] svg { rotate: 180deg; }
.control:focus-visible, .control[aria-expanded="true"] { outline: 2px solid transparent; border-color: var(--vino); box-shadow: 0 0 0 1px var(--vino), 0 0 0 5px rgba(209, 38, 79, 0.14); }
.control[aria-invalid="true"] { border-color: var(--error, var(--vino)); background-color: color-mix(in srgb, var(--error, var(--vino)) 5%, var(--campo)); }

.emergente { position: fixed; z-index: 60; overflow: auto; border-radius: 16px; background: var(--papel); box-shadow: 0 0 0 1px rgba(51, 32, 61, 0.1), 0 24px 60px -24px rgba(51, 32, 61, 0.55); color: var(--tinta); font: 400 16px/1.3 var(--f-ui); animation: emerger 0.16s var(--ease); }
@keyframes emerger { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }

.lista { margin: 0; padding: 6px; list-style: none; }
.lista [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.lista [role="option"][data-activo] { background: color-mix(in srgb, var(--vino) 9%, transparent); }
.lista [aria-selected="true"] { font-weight: 700; color: var(--vino); }
.lista svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.cal { width: min(336px, calc(100vw - 16px)); padding: 12px 14px 8px; }
:where(.cal) button { font-family: inherit; color: inherit; cursor: pointer; }
.cal button:disabled { cursor: default; opacity: 0.3; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.cal-titulo { flex: 1; padding: 0; border: 0; border-radius: 12px; background: none; text-align: center; font: 400 1.2rem/44px var(--f-titulo); }
button.cal-titulo:hover { background: var(--lino); }
.cal-flecha { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; }
.cal-flecha:hover:not(:disabled) { background: var(--lino); }
.cal-flecha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal-dias, .cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dias abbr { text-align: center; text-decoration: none; font: 700 12px/28px var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.cal-dia { height: 42px; padding: 0; border: 0; border-radius: 12px; background: none; font: 600 15px var(--f-ui); font-variant-numeric: tabular-nums; }
.cal-dia:hover:not(:disabled) { background: var(--lino); }
.cal-dia[data-hoy] { box-shadow: inset 0 0 0 1.5px currentColor; color: var(--vino); }
.cal-dia[aria-pressed="true"] { background: var(--vino); color: var(--boton-texto); box-shadow: none; }
.cal-rejilla.tres { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 64px; gap: 6px; }
.cal-celda { padding: 0; border: 0; border-radius: 12px; background: none; font: 600 15px var(--f-ui); }
.cal-celda:hover:not(:disabled) { background: var(--lino); }
.cal-celda[aria-pressed="true"] { background: var(--vino); color: var(--boton-texto); }
.cal-pie { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--linea); }
.cal-texto { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: none; font: 700 14px var(--f-ui); color: var(--vino); }
.cal-texto:hover:not(:disabled) { background: var(--lino); }

/* Interruptor: una casilla con aspecto de palanca (en el HTML lleva role="switch"). */
.interruptor { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--campo); box-shadow: var(--sombra-tarjeta); cursor: pointer; }
.interruptor input { appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: rgba(51, 32, 61, 0.55); cursor: pointer; transition: background-color 0.2s; }
.interruptor input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(51, 32, 61, 0.35); transition: translate 0.2s var(--ease); }
.interruptor input:checked { background: var(--vino); }
.interruptor input:checked::before { translate: 18px 0; }
.interruptor span { display: grid; gap: 4px; }
.interruptor small { font-size: 13.5px; line-height: 1.5; color: var(--suave); }