/* Campos de formulario de Ordulari (.field, .check y el desplegable propio .ordsel).
   Los usan el portal y el formulario de contacto de la landing. */

.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--ink); }
/* Ocupa la línea de una etiqueta ausente, para que un campo sin título quede a la altura
   del control que tiene al lado y no de su rótulo. */
.field-hueco { display: block; height: 1em; font-size: 12.5px; }

/* Explicación de un campo detrás de un icono, en vez de un párrafo bajo cada casilla: con
   ocho campos seguidos, el formulario era más texto de apoyo que formulario. El globo sale
   al pasar por encima y también al llegar con el tabulador. */
/* En color de acento y con fondo propio: gris sobre gris, el icono no se veía y nadie iba a
   pasar por encima de algo que no parece pulsable. */
.campo-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-left: 7px; vertical-align: middle; position: relative; top: -1px;
  border: 0; border-radius: 50%;
  /* Siempre «i» minúscula y con el punto separado: en mayúsculas (dentro de un rótulo) o en
     peso 800 a 11px se leía como un palo, sin el punto que la identifica. */
  font-size: 12.5px; font-weight: 700; font-style: normal; text-transform: none; letter-spacing: 0;
  line-height: 1; color: var(--accent-texto); background: var(--accent-soft);
  cursor: help; transition: background .15s, color .15s;
}
.campo-info:focus-visible { color: #fff; background: var(--accent); outline: none; }
@media (hover: hover) and (pointer: fine) { .campo-info:hover { color: #fff; background: var(--accent); outline: none; } }
/* El globo va suelto en el cuerpo y colocado por JS: dentro del campo lo recortaba el borde
   de la tarjeta o el del diálogo. En claro, como el resto de desplegables: en oscuro cortaba
   demasiado al lado de un formulario blanco. Por encima del diálogo (z-index 1000), que si
   no queda tapado por su velo cuando la ayuda es la de un campo del propio diálogo. */
.campo-info-pop {
  position: fixed; z-index: 1200; max-width: 280px;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; font-size: 11.5px; font-weight: 500; line-height: 1.5; text-align: left;
  box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transition: opacity .12s;
  pointer-events: none;
}
.campo-info-pop.is-open { opacity: 1; visibility: visible; }
/* En un título de sección la fila ya es flex y trae su propia separación. */
.seccion-form .campo-info { margin-left: -2px; top: 0; }

/* Dentro de un botón de color: el fondo suave desaparecería, así que se recorta del propio
   botón. Sirve para explicar ahí mismo por qué esa acción no es la primera opción. */
.btn-action .campo-info, .btn-accent .campo-info, .btn-danger .campo-info {
  background: rgba(255, 255, 255, .25); color: #fff;
}
@media (hover: hover) and (pointer: fine) { .btn-action .campo-info:hover, .btn-accent .campo-info:hover, .btn-danger .campo-info:hover {
  background: var(--surface); color: var(--ink);
} }

/* Interruptor que acompaña a una casilla de la columna de al lado: se le da el alto de esa
   casilla para que quede centrado con ella y no flotando sobre su borde superior. */
#campo-pausa-fichada .switch-field { min-height: 42px; }

/* Varios interruptores seguidos: en columna y con aire. Sueltos se colocan en la misma
   fila, porque cada uno es inline-flex, y se leen como una ristra de palabras. */
.switches-columna {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border);
}
/* input:not([type]) incluido a propósito: sin type, el navegador lo trata como texto
   pero no casaría con [type=text] y el campo quedaría sin estilo. */
.field input:not([type]), .field input[type=text], .field input[type=email], .field input[type=url], .field input[type=tel], .field input[type=number], .field input[type=password], .field input[type=date], .field input[type=time], .field select, .field textarea {
  font-family: var(--font); font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-ctrl);
  padding: 10px 12px; transition: border-color .15s, box-shadow .15s; width: 100%;
}
/* Selector de color con el mismo marco que el resto de campos (fallback sin JS). */
.field input[type=color] {
  width: 100%; max-width: 84px; height: 42px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-ctrl); cursor: pointer;
}

/* Selector de color tipo Paint (mejora progresiva de input[type=color]). */
.ordcolor { position: relative; display: inline-block; }
.ordcolor input[type=color] { position: absolute; width: 1px; height: 1px; min-width: 0; max-width: none; padding: 0; opacity: 0; pointer-events: none; }
.ordcolor__sw {
  width: 84px; height: 42px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-ctrl);
  box-shadow: inset 0 0 0 3px var(--surface); transition: box-shadow .15s, border-color .15s;
}
@media (hover: hover) and (pointer: fine) { .ordcolor__sw:hover { border-color: var(--accent); } }
.ordcolor.is-open .ordcolor__sw { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface), 0 0 0 3px var(--accent-soft); }
.ordcolor__pop {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-pop); padding: 12px; width: max-content;
}
.ordcolor.is-open .ordcolor__pop { display: block; animation: ord-pop 150ms cubic-bezier(0.23, 1, 0.32, 1); transform-origin: top left; }
.ordcolor__grid { display: grid; grid-template-columns: repeat(12, 20px); gap: 6px; }
.ordcolor__c { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(27, 36, 64, .10); border-radius: 6px; cursor: pointer; transition: transform .1s; }
@media (hover: hover) and (pointer: fine) { .ordcolor__c:hover { transform: scale(1.15); } }
.ordcolor__c.is-sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.ordcolor__custom {
  display: block; width: 100%; margin-top: 10px; padding: 7px 10px; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-app); border: 1px solid var(--border); border-radius: 8px;
}
@media (hover: hover) and (pointer: fine) { .ordcolor__custom:hover { background: var(--accent-soft); color: var(--accent-texto); border-color: var(--accent-soft); } }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Selector de hora propio (.ordhora): disparador con estilo de campo + desplegable
   redondeado de dos columnas (horas/minutos) con la selección en color de acento. */
/* Una hora son cinco caracteres: el campo se ajusta a eso en vez de estirarse a la columna,
   que dejaba un socavón de blanco a la derecha de cada «08:00». */
.ordhora { position: relative; display: block; max-width: 150px; }
.ordhora input[type=time] { position: absolute; width: 1px; height: 1px; min-width: 0; max-width: none; padding: 0; opacity: 0; pointer-events: none; }
.ordhora__trigger {
  width: 100%; text-align: left; font-family: var(--font); font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-ctrl);
  padding: 10px 36px 10px 12px; cursor: pointer; position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.ordhora__trigger::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px;
  transform: translateY(-50%); opacity: .6;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6CF0' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
/* Mismo foco que un campo de texto: solo el halo, sin teñir el borde. Con el acento a
   plena tinta, una casilla de hora resaltaba mucho más que el resto del formulario. */
.ordhora.is-open .ordhora__trigger { box-shadow: 0 0 0 3px var(--accent-soft); }
.ordhora__pop {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 8px;
}
.ordhora.is-open .ordhora__pop { display: flex; animation: ord-pop 150ms cubic-bezier(0.23, 1, 0.32, 1); transform-origin: top left; }
.ordhora__col { width: 60px; max-height: 208px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; -ms-overflow-style: none; }
.ordhora__col::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ordhora__opt {
  border: 0; background: none; font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--ink-2);
  padding: 7px 0; border-radius: 8px; cursor: pointer; text-align: center;
}
@media (hover: hover) and (pointer: fine) { .ordhora__opt:hover { background: var(--accent-soft); color: var(--accent-texto); } }
/* Horas que este campo no admite (un fin anterior a su inicio): a la vista, pero apagadas. */
.ordhora__opt.is-off {
  color: var(--muted); opacity: .35; background: none; cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) { .ordhora__opt.is-off:hover {
  color: var(--muted); opacity: .35; background: none; cursor: not-allowed;
} }
.ordhora__opt.is-sel { background: var(--accent-soft); color: var(--accent-texto); font-weight: 700; }
.field input:disabled { background: var(--bg-app); color: var(--muted); cursor: not-allowed; }
/* Input de archivo (avatar): el botón nativo con el estilo de la app. */
.field input[type=file] {
  font-family: var(--font); font-size: 13.5px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-ctrl);
  padding: 7px 10px; width: 100%;
}
.field input[type=file]::file-selector-button {
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink-2);
  background: var(--hover-suave); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 12px; margin-right: 12px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
@media (hover: hover) and (pointer: fine) { .field input[type=file]::file-selector-button:hover { background: var(--accent-soft); color: var(--accent-texto); border-color: var(--focus); } }
.help { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.field .help { font-size: 11.5px; color: var(--muted); font-weight: 500; }
/* Enlaces auxiliares de las pantallas de acceso (recuperar contraseña, pedir código
   nuevo, volver…). Un punto mayores que .help: son acciones, no texto de apoyo. */
.enlace-ayuda { font-size: 12.5px; font-weight: 600; color: var(--accent-texto); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .enlace-ayuda:hover { text-decoration: underline; } }
.field .field-error { font-size: 11.5px; color: var(--danger-texto); font-weight: 600; }
/* Validación discreta (jQuery unobtrusive): campo inválido y su mensaje. */
.input-validation-error { border-color: var(--danger) !important; }
.input-validation-error:focus { box-shadow: 0 0 0 3px var(--danger-soft) !important; }
.field-validation-error { font-size: 11.5px; color: var(--danger-texto); font-weight: 600; }

.check { display: flex; align-items: center; gap: 10px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.check label { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }

/* ===== Select personalizado (desplegable on-brand; el nativo no es estilable) ===== */
.ordsel { position: relative; }
/* El <select> real se mantiene oculto pero en el DOM para el envío del formulario. */
.ordsel__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Una línea siempre: al envolver, el control crecía a lo alto y descuadraba la fila
   entera. Si no cabe se recorta, que la opción completa se lee al desplegarlo. */
.ordsel__trigger {
  width: 100%; text-align: left; font-family: var(--font); font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-ctrl);
  padding: 10px 34px 10px 12px; cursor: pointer; position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .15s, box-shadow .15s;
}
.ordsel__trigger::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-65%) rotate(45deg); transition: transform .15s;
}
.ordsel.is-open .ordsel__trigger { background: var(--accent-soft); border-color: var(--accent-soft); box-shadow: none; }
.ordsel.is-open .ordsel__trigger::after { transform: translateY(-35%) rotate(225deg); }
.ordsel__panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-ctrl);
  box-shadow: var(--shadow-pop); padding: 6px; max-height: 260px; overflow-y: auto;
}
.ordsel.is-open .ordsel__panel { display: block; animation: ord-pop 150ms cubic-bezier(0.23, 1, 0.32, 1); transform-origin: top center; }
/* El desplegable nace del control: hacia abajo desde arriba, hacia arriba desde abajo. */
.ordsel.is-up.is-open .ordsel__panel { transform-origin: bottom center; }
@keyframes ord-pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } }
/* Apertura hacia arriba cuando no cabe debajo (la pone el JS al abrir). */
.ordsel.is-up .ordsel__panel { top: auto; bottom: calc(100% + 6px); }
.ordsel__opt {
  padding: 9px 12px; border-radius: 0; font-size: 14px; color: var(--ink-2);
  cursor: pointer; transition: background .12s, color .12s;
}
/* El redondeo sigue la posición: primera arriba, última abajo, intermedias rectas. */
.ordsel__opt:first-child { border-radius: 8px 8px 0 0; }
.ordsel__opt:last-child { border-radius: 0 0 8px 8px; }
.ordsel__opt:first-child:last-child { border-radius: 8px; }
.ordsel__opt.is-hl { background: var(--accent-soft); color: var(--accent-texto); }
@media (hover: hover) and (pointer: fine) { .ordsel__opt:hover { background: var(--accent-soft); color: var(--accent-texto); } }
.ordsel__opt.is-sel { background: var(--accent-soft); color: var(--accent-texto); font-weight: 700; }