/* ═══════════════════════════════════════════════════════════════════════ TU SALUD CERCA · COMPONENTES DE FORMULARIO (sesión 2026-10-25) LA hoja de los campos de salud: registro, acceso, reserva pública y todo /gerencia de un centro. La estructura la pone `campos.js` (.cf, .cf-c, .cf-et, .cf-chev); las reglas, DESIGN_SALUD.md §4 «Campo de formulario»: 1. etiqueta flotante DENTRO del campo: vacío y sin foco, título en gris medio; con foco o valor, arriba y de 12 px; el ejemplo (placeholder) solo con foco y vacío; asterisco en los obligatorios; 2. 56 px de alto (inputs, selects, fechas; textarea como mínimo), radio 16 px en campos y botones, fondo en el tono más claro de la paleta y borde fino; con foco, borde de 2 px en el teal principal, sin sombra; 4. error: etiqueta y borde al color de error y una línea con ícono y mensaje debajo (nunca solo color); la ayuda, una línea pequeña; 6. selects con chevron Solar; casillas y radios con 44 px de área; 7. oscuro con los mismos tokens. Colores SOLO por tokens (ningún hexadecimal aquí): en las páginas públicas los de salud.css; en el panel, la rampa teal de styles.css (`html[data-vertical="salud"] body`). Un restaurante no tiene `.cf`. Los selectores van con `.cf.cf.cf` y `.cf-c.cf-c`: así ganan a las reglas generales de input/select de salud.css y styles.css sin `!important`. ═══════════════════════════════════════════════════════════════════════ */ /* ── Tokens del componente ─────────────────────────────────────────────── */ :root { --cf-alto: 56px; --cf-radio: 16px; --cf-fs: 16px; /* 16 px: el teléfono no hace zoom al enfocar */ --cf-fs-et: 12px; /* la etiqueta arriba */ --cf-px: 16px; --cf-dur: 150ms; /* solar:danger-circle-bold, como máscara (toma el color del texto). */ --cf-ic-error: url("data:image/svg+xml;utf8,"); /* Páginas públicas (salud.css). */ --cf-fondo: var(--fondo); --cf-borde: var(--borde-control); --cf-borde-hover: var(--acento-texto); --cf-texto: var(--texto); --cf-et: var(--texto-3); --cf-foco: var(--acento); --cf-error: var(--error); --cf-ayuda: var(--texto-2); } :root[data-theme="dark"]:not([data-vertical="salud"]) { --cf-foco: var(--acento-texto); } /* El panel de un centro. */ html[data-vertical="salud"] body { --cf-fondo: var(--ink-50); --cf-borde: var(--ink-300); --cf-borde-hover: var(--ink-500); --cf-texto: var(--ink-900); --cf-et: var(--ink-500); --cf-foco: var(--sp-ic); --cf-error: var(--late); --cf-ayuda: var(--ink-500); } /* En oscuro (el oscuro único, tema-oscuro.css): la caja hundida en el fondo y el borde de control (≥ 3:1). */ html[data-vertical="salud"][data-theme="dark"] body { --cf-et: var(--ink-600); --cf-borde: var(--oscuro-borde-control); --cf-borde-hover: var(--oscuro-texto-3); --cf-foco: var(--oscuro-foco); } /* ── La caja ───────────────────────────────────────────────────────────── */ .cf.cf.cf { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; font-weight: 400; } /* 2026-11-13: un campo con `hidden` (p. ej. «Escriba su título» hasta elegir «Otro») sigue oculto aunque sea `.cf`. */ .cf.cf.cf[hidden] { display: none; } .cf.cf.cf .cf-c.cf-c { box-sizing: border-box; flex: none; width: 100%; max-width: none; height: var(--cf-alto); min-height: var(--cf-alto); margin: 0; padding: 22px var(--cf-px) 6px; border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); background: var(--cf-fondo); color: var(--cf-texto); font: inherit; font-size: var(--cf-fs); line-height: 24px; box-shadow: none; outline: none; transition: border-color var(--cf-dur) ease, box-shadow var(--cf-dur) ease; } .cf.cf.cf-area .cf-c.cf-c { height: auto; min-height: calc(var(--cf-alto) * 2); padding-top: 26px; resize: vertical; } /* 2026-10-29: el texto de un textarea se desplaza también por su relleno de arriba y pasaba por encima de la etiqueta. Una franja opaca del fondo del campo tapa ese relleno (entre el borde y la etiqueta, que va encima): lo que se desplaza queda debajo. Deja libre el borde y el anillo de foco/error (1 px por dentro, que la franja repite en su esquina) y la barra de desplazamiento (no llega al relleno derecho). */ .cf.cf.cf-area::before { content: ""; position: absolute; z-index: 1; top: 1px; left: 1px; right: calc(var(--cf-px) + 1px); height: 25px; border-radius: calc(var(--cf-radio) - 1px) 0 0 0; background: var(--cf-fondo); pointer-events: none; } .cf.cf.cf-area:focus-within::before { box-shadow: inset 1px 1px 0 0 var(--cf-foco); } .cf.cf.cf-area:is(:has(.cf-c[aria-invalid="true"]), .has-error, .has-error *, :has(> .error-campo:not([hidden]):not(:empty), > .fielderr:not(:empty)))::before { box-shadow: inset 1px 1px 0 0 var(--cf-error); } .cf.cf.cf-area:has(.cf-c:is(:disabled, [readonly]))::before { opacity: .65; } /* Etiqueta larga arriba (dos líneas, el relleno de 38 px de `.cf-larga`, más abajo): la franja, igual de alta. */ .cf.cf.cf-area.cf-larga:is(:focus-within, :has(.cf-c:not(:placeholder-shown)))::before { height: 37px; } .cf.cf.cf-select .cf-c.cf-c { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; text-overflow: ellipsis; } .cf.cf.cf-fecha .cf-c.cf-c { padding-right: 12px; } .cf.cf.cf .cf-c.cf-c::placeholder { color: transparent; opacity: 1; } .cf.cf.cf:focus-within .cf-c.cf-c:placeholder-shown::placeholder { color: var(--cf-et); } .cf.cf.cf .cf-c.cf-c:hover:not(:disabled) { border-color: var(--cf-borde-hover); } /* Foco: 2 px de teal sin mover nada (1 px de borde + 1 px por dentro), sin sombra dura. */ .cf.cf.cf .cf-c.cf-c:is(:focus, :focus-visible) { border-color: var(--cf-foco); box-shadow: inset 0 0 0 1px var(--cf-foco); outline: none; } .cf.cf.cf .cf-c.cf-c:is(:disabled, [readonly]) { opacity: .65; cursor: not-allowed; } /* ── La etiqueta flotante ──────────────────────────────────────────────── */ .cf.cf.cf > .cf-et, .cf.cf.cf > label > .cf-et { position: absolute; z-index: 1; left: calc(var(--cf-px) + 1px); right: 40px; top: 16px; margin: 0; padding: 0; font-size: var(--cf-fs); line-height: 24px; font-weight: 400; color: var(--cf-et); letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; cursor: text; transition: top var(--cf-dur) ease, font-size var(--cf-dur) ease, line-height var(--cf-dur) ease, color var(--cf-dur) ease; } /* 2026-11-13: sin flecha ni botón a la derecha, la etiqueta usa todo el ancho (no se corta ni pierde el asterisco). */ .cf.cf.cf:not(:has(> .cf-chev, button)) > .cf-et { right: calc(var(--cf-px) + 1px); } /* Etiqueta larga con su texto en `.cf-et-txt`: se recorta solo el texto y el asterisco siempre se ve. */ .cf.cf.cf > .cf-et:has(> .cf-et-txt) { display: flex; gap: .25em; } .cf.cf.cf > .cf-et > .cf-et-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cf.cf.cf > .cf-et:has(> .cf-et-txt) > :not(.cf-et-txt) { flex: none; } .cf.cf.cf .cf-et :is(.req, .muted) { color: inherit; } .cf.cf.cf .cf-et .req { font-weight: 600; } /* Arriba: con foco, con algo escrito, un select con valor y las fechas (el navegador ya pinta el formato). */ .cf.cf.cf:is(:focus-within, :has(.cf-c:not(:placeholder-shown)), .cf-select, .cf-fecha) > .cf-et { top: 7px; font-size: var(--cf-fs-et); line-height: 16px; font-weight: 500; } /* Un select cuya opción elegida está vacía se ve como un campo vacío. */ .cf.cf.cf-select:not(:focus-within):has(option:checked:empty) > .cf-et { top: 16px; font-size: var(--cf-fs); line-height: 24px; font-weight: 400; } .cf.cf.cf:focus-within > .cf-et { color: var(--cf-foco); } /* Etiquetas largas (preguntas de antecedentes, colegiado): en reposo, una línea con «…»; arriba, dos líneas y el valor debajo. */ .cf.cf.cf-larga:is(:focus-within, :has(.cf-c:not(:placeholder-shown)), .cf-select, .cf-fecha) > .cf-et { white-space: normal; } .cf.cf.cf-larga:is(:focus-within, :has(.cf-c:not(:placeholder-shown)), .cf-select, .cf-fecha) .cf-c.cf-c { padding-top: 38px; height: auto; min-height: 72px; } .cf.cf.cf > .cf-chev { position: absolute; right: 14px; top: 16px; width: 24px; height: 24px; color: var(--cf-et); pointer-events: none; } .cf.cf.cf > .cf-chev svg { width: 24px; height: 24px; display: block; } /* ── Piezas compuestas ─────────────────────────────────────────────────── */ /* Contraseña con el ojo (campoPassword, acceso) y la búsqueda con lupa. */ .cf.cf.cf:has(.pass-toggle, .login-ojo) .cf-c.cf-c { padding-right: 52px; } .cf.cf.cf :is(.pass-toggle, .login-ojo) { top: 6px; transform: none; width: 44px; height: 44px; } .cf.cf.cf:has(> .sp-buscar-ic, > .buscador-ic) .cf-c.cf-c { padding-left: 48px; } .cf.cf.cf:has(> .sp-buscar-ic, > .buscador-ic) > .cf-et { left: 49px; } /* Teléfono: el código de país y el número, cada uno su campo, en una fila. */ .tel-fila:has(> .cf) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--cf-gap); align-items: start; } /* 2026-10-27: «+506 Costa Rica» completo: 40/60 y, en el teléfono, el código en su propia fila. */ @media (max-width: 639.98px) { .tel-fila:has(> .cf) { grid-template-columns: minmax(0, 1fr); } } /* ── Error y ayuda debajo del campo ────────────────────────────────────── */ .cf.cf.cf:is(:has(.cf-c[aria-invalid="true"]), .has-error, .has-error *, :has(> .error-campo:not([hidden]):not(:empty), > .fielderr:not(:empty))) .cf-c.cf-c { border-color: var(--cf-error); box-shadow: inset 0 0 0 1px var(--cf-error); } .cf.cf.cf:is(:has(.cf-c[aria-invalid="true"]), .has-error, .has-error *, :has(> .error-campo:not([hidden]):not(:empty), > .fielderr:not(:empty))) > .cf-et { color: var(--cf-error); } :is(.cf, .campo, .fieldrow, form, .sp) :is(.error-campo, .fielderr, .cf-error):not([hidden]):not(:empty) { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--cf-error); } :is(.cf, .campo, .fieldrow, form, .sp) :is(.error-campo, .fielderr, .cf-error):not([hidden]):not(:empty)::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: currentColor; -webkit-mask: var(--cf-ic-error) center / contain no-repeat; mask: var(--cf-ic-error) center / contain no-repeat; } .cf.cf.cf > :is(.cf-ayuda, .fieldhint, .pista, .pf-ayuda) { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--cf-ayuda); } /* ── Casillas y radios: 44 px de área táctil ───────────────────────────── */ html[data-vertical="salud"] .sp label:not(.sp-switch, .sp-cal, .sp-etq-opc):has(> input:is([type="checkbox"], [type="radio"])), :is(.form, .form-registro, .form-cita) label:has(> input:is([type="checkbox"], [type="radio"])) { min-height: 44px; display: flex; align-items: center; gap: 10px; cursor: pointer; } /* El interruptor y las fichas de calendario y de etiqueta tienen su dibujo propio: quedan fuera. */ html[data-vertical="salud"] .sp input:is([type="checkbox"], [type="radio"]):not(:is(.sp-switch, .sp-cal, .sp-etq-opc) input), :is(.form, .form-registro, .form-cita) input:is([type="checkbox"], [type="radio"]) { width: 20px; height: 20px; flex: none; accent-color: var(--cf-foco); } /* ── Botones de los formularios: radio 16; el principal de un paso, 56 px ── */ :is(html[data-vertical="salud"] .sp, .form, .form-registro, .form-cita, .modal, dialog) .btn { border-radius: var(--cf-radio); } .buscador .btn { height: var(--cf-alto); min-height: var(--cf-alto); box-sizing: border-box; padding-block: 0; border-radius: var(--cf-radio); } .cf-accion.cf-accion, :is(.reg-nav, .wz-nav) .btn-primary { min-height: var(--cf-alto); border-radius: var(--cf-radio); } /* ── Pantallas por pasos (registro, pedir cita): el principal a todo el ancho y «Atrás» debajo ── */ .reg-nav.reg-nav, .wz-nav:has(.btn-primary) { flex-direction: column-reverse; align-items: stretch; } .reg-nav.reg-nav > .btn, .wz-nav > .btn-primary { width: 100%; margin-left: 0; justify-content: center; } .reg-nav.reg-nav > .btn:not(.btn-primary) { align-self: center; width: auto; } /* El título de un paso recibe el foco al cambiar de paso (para el lector de pantalla); no es un control: sin recuadro. */ :is(.form-registro, .form-cita, .wz, .rc-form) :is(h1, h2, h3)[tabindex="-1"]:focus { outline: none; box-shadow: none; } /* ── Rejilla: una columna en el teléfono, hasta dos en escritorio ─────── */ .cf-grid { display: grid; grid-template-columns: 1fr; gap: var(--cf-gap); } @media (min-width: 720px) { .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-grid > .cf-ancho { grid-column: 1 / -1; } } /* ── Dentro de un paciente (2026-10-26): ficha, expediente y atención con el campo de «Atención» ── Las tres pantallas del paciente en /gerencia (.pf-ficha = ficha y expediente, .sp.cl = la atención y el expediente, .pf-form = alta y edición, también en su diálogo): fondo teal muy claro, borde teal suave de 1 px, radio 24, etiqueta gris dentro arriba a la izquierda (la flotante de arriba), ayuda gris pequeña debajo, el mismo aire entre campos y, con foco, borde teal con un halo suave. Solo los tokens del campo: lo demás no cambia. */ html[data-vertical="salud"] body :is(.pf-ficha, .sp.cl, .pf-form) .cf.cf.cf { --cf-radio: 24px; --cf-px: 18px; --cf-fondo: var(--ink-50); --cf-borde: var(--ember-100); --cf-borde-hover: var(--ember-300); --cf-foco: var(--ember-500); --cf-halo: var(--ember-100); } html[data-vertical="salud"][data-theme="dark"] body :is(.pf-ficha, .sp.cl, .pf-form) .cf.cf.cf { --cf-borde: var(--oscuro-borde-control); --cf-borde-hover: var(--oscuro-acento-texto); --cf-foco: var(--oscuro-foco); --cf-halo: var(--oscuro-acento-suave); } /* «Contraste reforzado» en /gerencia (la clase `contraste` de «Ver mejor la página», 2026-10-27): borde de 2 px con la tinta fuerte del tema (texto ≥ 7:1 por los tokens de styles.css). Solo color y grosor: el aire entre campos no cambia. */ html[data-vertical="salud"].contraste body .cf.cf.cf { --cf-borde: var(--ink-900); --cf-borde-hover: var(--ink-900); --cf-et: var(--ink-800); --cf-ayuda: var(--ink-800); } html[data-vertical="salud"].contraste[data-theme="dark"] body .cf.cf.cf { --cf-borde: var(--oscuro-max-borde-fuerte); --cf-borde-hover: var(--oscuro-max-texto); --cf-foco: var(--oscuro-max-acento-texto); } html[data-vertical="salud"].contraste body .cf.cf.cf .cf-c.cf-c { border-width: 2px; } html[data-vertical="salud"] body :is(.pf-ficha, .sp.cl, .pf-form) .cf.cf.cf:not(.has-error, :has(.cf-c[aria-invalid="true"])) .cf-c.cf-c:is(:focus, :focus-visible) { border-color: var(--cf-foco); box-shadow: 0 0 0 4px var(--cf-halo); } /* La ayuda y las notas grises de debajo del campo: pequeñas, alineadas con el texto del campo. */ html[data-vertical="salud"] body :is(.pf-ficha, .sp.cl, .pf-form) .cf.cf.cf > :is(.cf-ayuda, .fieldhint, .pista, .pf-ayuda, p.muted) { margin: 2px 0 0; padding: 0 var(--cf-px); font-size: 12.5px; line-height: 17px; color: var(--cf-ayuda); } /* El aire entre campos de estas pantallas es el de todo formulario: ver «El aire entre campos», abajo. */ /* ═══ El aire entre campos (2026-10-26): UNA regla para todo formulario de salud ═══════════════════════ Ningún campo toca a otro, en ninguna pantalla, sin reglas por pantalla: · campo ↔ campo, en fila o en columna: --cf-gap (16 px; 12 px en el teléfono ≤ 480 px); · la ayuda o el error, pegados a SU campo (4–6 px) y separados del siguiente; · un grupo de campos → sus botones o la fila de casillas que sigue: --cf-gap-acciones (24 px). Toda rejilla o fila que tenga campos como hijos directos toma el `gap` (`:has(> .cf)`). En un contenedor de flujo normal (tarjeta, fieldset, sección), donde `gap` no hace nada, `campos.js#marcarPilas` le pone `.cf-pila` y el aire lo da el margen. Los selectores repiten `.cf` para ganar a los `gap` de cada pantalla. */ :root { --cf-gap: var(--sp-4, 16px); --cf-gap-acciones: var(--sp-5, 24px); --cf-gap-ayuda: 6px; } @media (max-width: 480px) { :root { --cf-gap: var(--sp-3, 12px); } } /* 1 · Rejillas y filas de campos (con los campos como hijos, o cada uno en su celda): el mismo gap en las dos direcciones. */ html body :is(:has(> .cf.cf.cf.cf.cf), :has(> :not(.cf) > .cf.cf.cf.cf.cf:first-child)) { row-gap: var(--cf-gap); column-gap: var(--cf-gap); } /* Las filas que traen su `gap` (o la fila de botones su `margin-top`) en `style="…"`, en varias pantallas viejas: los únicos `!important` de esta hoja, solo ahí (un estilo en línea no se gana de otra forma). */ html body [style*="gap"]:has(> .cf) { row-gap: var(--cf-gap) !important; column-gap: var(--cf-gap) !important; } /* Lo mismo con la marca de `campos.js#marcarPilas` (`.cf-fila`): no depende de `:has()` y llega a todo diálogo, popover, hoja o panel lateral que se pinte después (cuelgan del `body` que vigila `observarCampos`). */ html body .cf-fila.cf-fila.cf-fila { row-gap: var(--cf-gap); column-gap: var(--cf-gap); } /* 2 · Flujo normal: margen entre un campo (o un grupo de campos) y el campo o grupo que lo sigue. Lo que va al lado del campo (el ojo de la contraseña, posicionado encima) no se mueve. */ .cf-pila.cf-pila > :is(.cf.cf.cf, :has(> .cf), .cf-grupo) + :is(.cf.cf.cf, :has(> .cf), .cf-grupo, .fieldrow, .campo) { margin-top: var(--cf-gap); } /* 3 · La ayuda o el error que la pantalla pone FUERA de la caja del campo: pegados a él, aparte del siguiente. */ .cf-pila.cf-pila > :is(.cf.cf.cf, :has(> .cf), .cf-grupo) + :is(.fieldhint, .cf-ayuda, .pista, .pf-ayuda, .fielderr, .error-campo, .cf-error):not([hidden]):not(:empty) { margin-top: var(--cf-gap-ayuda); } .cf-pila.cf-pila > :is(.cf.cf.cf, :has(> .cf), .cf-grupo) + :is(.fieldhint, .cf-ayuda, .pista, .pf-ayuda, .fielderr, .error-campo, .cf-error):not([hidden]):not(:empty):not(:last-child) { margin-bottom: var(--cf-gap); } :not(.cf-pila) > :is(.cf.cf.cf, :has(> .cf), .cf-grupo) + :is(.fieldhint, .cf-ayuda, .pista, .pf-ayuda, .fielderr, .error-campo, .cf-error):not([hidden]):not(:empty) { margin-top: calc(var(--cf-gap-ayuda) - var(--cf-gap)); } /* 4 · Campos (o un grupo de campos) → botones o casillas: 24 px. En flujo normal, el margen (se junta con el del campo); en una rejilla, lo que falta sobre su gap, y solo en las barras de acciones que ocupan su propia fila. */ .cf-pila.cf-pila > :is(.cf.cf.cf, :has(> .cf), .cf-grupo) + :is(.btn, .reg-nav, .wz-nav, footer, [class*="acciones"], [class$="-pie"], [class*="-actions"], label:has(> input:is([type="checkbox"], [type="radio"])), :has(> .btn, > label > input:is([type="checkbox"], [type="radio"])):not(:has(.cf))), .cf-pila.cf-pila > :is(.cf.cf.cf, :has(> .cf), .cf-grupo) + :is(.fieldhint, .cf-ayuda, .pista, .fielderr, .error-campo) + :is(.btn, .reg-nav, .wz-nav, footer, [class*="acciones"], [class$="-pie"], [class*="-actions"], :has(> .btn):not(:has(.cf))) { margin-top: var(--cf-gap-acciones); } .cf-pila.cf-pila > :is(.cf.cf.cf, :has(> .cf), .cf-grupo) + [style*="margin-top"]:has(> .btn):not(:has(.cf)) { margin-top: var(--cf-gap-acciones) !important; } :not(.cf-pila) > :is(.cf.cf.cf, :has(> .cf), .cf-grupo) + :is(.reg-nav, .wz-nav, footer, [class*="acciones"], [class$="-pie"], [class*="-actions"]):not(.cf) { margin-top: calc(var(--cf-gap-acciones) - var(--cf-gap)); } /* 5 · Dos bloques con campos más adentro (una sección de un editor, la lista de campos de una tarjeta, el cuerpo de un diálogo) que quedaron a menos de --cf-gap uno del otro: `campos.js#marcarAire` los mide y marca el de abajo. */ html body .cf-aire.cf-aire.cf-aire { margin-top: var(--cf-gap); } @media (prefers-reduced-motion: reduce) { .cf.cf.cf > .cf-et, .cf.cf.cf .cf-c.cf-c { transition: none; } } /* 2026-10-27: el valor de una fecha u hora (también en .cf) se lee en el color del texto, no tenue. 2026-10-29: + `-webkit-text-fill-color`: Safari pisa `color` en los segmentos vacíos (salían celestes). */ .cf.cf.cf input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week]).cf-c.cf-c{color:var(--cf-texto);-webkit-text-fill-color:var(--cf-texto)} input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-fields-wrapper,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-text,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-day-field,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-month-field,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-year-field,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-hour-field,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-minute-field,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-second-field,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-millisecond-field,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-ampm-field,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-week-field,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-date-and-time-value{color:inherit;-webkit-text-fill-color:inherit;opacity:1} /* 2026-10-29: una fecha u hora VACÍA (`data-vacio`, campos.js) no parece llena: sus partes en el tono de los placeholders. Los segmentos heredan el relleno de ::-webkit-datetime-edit (regla de arriba). */ input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])[data-vacio]::-webkit-datetime-edit,input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])[data-vacio]::-webkit-date-and-time-value{color:var(--cf-et);-webkit-text-fill-color:var(--cf-et)} /* ── El selector de fecha compartido (2026-11-02, calendario.js) ───────── El mismo formato en claro y en oscuro: los números en el color del texto y el día elegido en teal oscuro con texto blanco (#0B5F5C: 7,6:1). */ .cal-pop { --cal-fondo: #ffffff; --cal-texto: #12302e; --cal-tenue: #5d7775; --cal-borde: #cfe1df; --cal-hover: #e3f2f1; --cal-sel: #0b5f5c; --cal-sel-texto: #ffffff; --cal-hoy: #1a9e9b; --cal-foco: #0b5f5c; --cal-x: #c62828; --cal-x-fondo: #fdecec; position: fixed; z-index: 10000; box-sizing: border-box; padding: 12px; border: 1px solid var(--cal-borde); border-radius: 18px; background: var(--cal-fondo); color: var(--cal-texto); box-shadow: 0 18px 48px rgba(6, 40, 38, .22); font-size: 15px; line-height: 1.2; } [data-theme="dark"] .cal-pop { --cal-fondo: #142321; --cal-texto: #e7f3f2; --cal-tenue: #9ab6b3; --cal-borde: #2d4846; --cal-hover: #1f3633; --cal-sel: #0b5f5c; --cal-sel-texto: #ffffff; --cal-hoy: #5cc9c5; --cal-foco: #7fd8d4; --cal-x: #ff8a80; --cal-x-fondo: #3a2222; box-shadow: 0 18px 48px rgba(0, 0, 0, .5); } .cal-pop button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cal-pop button:focus-visible { outline: 2px solid var(--cal-foco); outline-offset: 1px; } .cal-pop button[disabled] { cursor: default; opacity: .35; } /* 2026-11-06 (uw-calendario): sin flechas; el mes y el año son botones (44 px de toque) que abren su lista. */ .cal-cab { display: flex; align-items: center; margin: 0 0 8px; } .cal-titulo { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; font-weight: 600; } .cal-mes, .cal-anio { min-height: 44px; min-width: 44px; padding: 6px 10px; border-radius: 10px; font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--cal-borde); text-underline-offset: 4px; } .cal-mes:hover, .cal-anio:hover, .cal-mes[aria-expanded="true"], .cal-anio[aria-expanded="true"] { background: var(--cal-hover); } .cal-meses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 2px; } .cal-mes-op { min-height: 44px; border-radius: 10px; } .cal-mes-op:not([disabled]):hover { background: var(--cal-hover); } .cal-mes-op.hoy { box-shadow: inset 0 0 0 1.5px var(--cal-hoy); font-weight: 600; } .cal-pop .cal-mes-op.on, .cal-pop .cal-mes-op.on:hover { background: var(--cal-sel); color: var(--cal-sel-texto); font-weight: 600; box-shadow: none; } .cal-grilla { width: 100%; border-collapse: collapse; table-layout: fixed; } .cal-grilla th { padding: 4px 0 6px; font-size: 12px; font-weight: 600; color: var(--cal-tenue); text-align: center; } .cal-grilla td { padding: 1px; text-align: center; } .cal-dia { width: 100%; max-width: 40px; aspect-ratio: 1; border-radius: 50%; font-variant-numeric: tabular-nums; color: var(--cal-texto); } .cal-dia:not([disabled]):hover { background: var(--cal-hover); } .cal-dia.hoy { box-shadow: inset 0 0 0 1.5px var(--cal-hoy); font-weight: 600; } .cal-pop .cal-dia.on, .cal-pop .cal-dia.on:hover { background: var(--cal-sel); color: var(--cal-sel-texto); font-weight: 600; box-shadow: none; } .cal-anios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; max-height: 248px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; } .cal-anio-op { min-height: 44px; padding: 10px 0; border-radius: 10px; font-variant-numeric: tabular-nums; } .cal-anio-op:hover { background: var(--cal-hover); } .cal-pop .cal-anio-op.on { background: var(--cal-sel); color: var(--cal-sel-texto); font-weight: 600; } /* 2026-11-04 (cita-hora): sin pie; una X roja pequeña arriba a la derecha cierra (28 px de toque, el trazo de 16 px). */ .cal-pop { padding-top: 34px; } .cal-pop .cal-cerrar { position: absolute; top: 6px; right: 6px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--cal-x); } .cal-pop .cal-cerrar svg { width: 16px; height: 16px; flex: none; } .cal-pop .cal-cerrar:hover { background: var(--cal-x-fondo); } /* 2026-11-14 (teléfono): con el dedo, la X y los días de 44 px (el calendario se ensancha hasta 336 px y el relleno de los lados baja), y las horas del selector de hora y las opciones de la lista propia, también de 44. */ @media (pointer: coarse) { .cal-pop { min-width: min(336px, calc(100vw - 32px)); padding: 4px 6px 8px; } .cal-pop .cal-cerrar { top: 4px; right: 4px; width: 44px; height: 44px; } .cal-pop .cal-cab { padding-inline: 44px; margin-bottom: 4px; } .cal-grilla td { padding: 0; } .cal-dia { max-width: 46px; } .hm-pop .hm-col [role="option"] { height: 44px; line-height: 44px; } .sp-desp-nat.sp-desp-nat [role="option"] { padding-block: 11px; } } /* El campo: se toca para abrir (no se escribe); el ícono de calendario a la derecha. */ .cf.cf.cf .cf-c.cf-c[data-cal], input[data-cal] { cursor: pointer; caret-color: transparent; padding-right: 44px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px 20px; } @media (prefers-reduced-motion: no-preference) { .cal-pop { animation: cal-entra .14s ease-out; } } @keyframes cal-entra { from { opacity: 0; transform: translateY(-4px); } } /* ── La lista propia de un