/* =====================================================================
   Componentes propios (public/js/componentes.js). La plataforma no deja que
   el navegador dibuje ningún control: casillas, calendario, diálogos,
   mensajes de validación, tooltips, barras de desplazamiento, marcadores de
   <details> y el ojo de contraseña de Edge son todos propios.
   Cargado después de app.css, en todas las páginas (partials/head.ejs).
   ===================================================================== */

/* ---- Casilla: dibujada entera con CSS; conserva la semántica, el teclado y el
   envío del formulario de un input real. ---- */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; margin: 0; flex: 0 0 auto;
  width: 18px; height: 18px; border: 1.5px solid #8b97a6; border-radius: 4px; background: #fff;
  display: inline-grid; place-content: center; vertical-align: -3px; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
input[type="checkbox"]::before {
  content: ""; width: 11px; height: 11px; background: #fff; transform: scale(0); transition: transform .12s ease;
  clip-path: polygon(13% 52%, 0 66%, 39% 100%, 100% 22%, 86% 9%, 38% 72%);
}
input[type="checkbox"]:hover { border-color: var(--navy); }
input[type="checkbox"]:checked { background: var(--navy); border-color: var(--navy); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input[type="checkbox"]:disabled { background: var(--surface-muted); border-color: var(--line-strong); cursor: not-allowed; }
input[type="checkbox"]:disabled:checked { background: #9aa5b3; border-color: #9aa5b3; }
input[type="checkbox"][aria-invalid="true"] { border-color: var(--neg); box-shadow: 0 0 0 3px rgba(163,55,47,.12); }

/* Casilla con su texto. `.field label` es mayúsculas y en bloque: aquí no. */
.chk, .field label.chk {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 14px; line-height: 1.45; color: var(--ink-body); text-transform: none; letter-spacing: 0; margin: 0;
}
.chk input[type="checkbox"] { margin-top: 1px; }
.chk__txt { flex: 1 1 auto; }
.chk__sub { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.chk + .chk { margin-top: 10px; }
/* Variante en caja, para aceptar condiciones. */
.chk--caja { border: 1px solid var(--line-strong); background: var(--surface-muted); padding: 13px 14px; transition: border-color .12s, background-color .12s; }
.chk--caja:hover { border-color: var(--navy); }
.chk--caja:has(input:checked) { border-color: var(--navy); background: #eef3f8; color: var(--navy); }
.chk--caja.is-invalid { border-color: var(--neg); background: #fdf3f2; }

/* Frecuencias y productos: chips que se marcan. */
.periods label {
  border: 1px solid var(--line-strong); background: #fff; border-radius: 999px;
  padding: 6px 13px 6px 9px; gap: 8px; color: var(--ink-body); user-select: none;
  transition: border-color .12s, background-color .12s, color .12s;
}
.periods label:hover { border-color: var(--navy); }
.periods label:has(input:checked) { background: #eef3f8; border-color: var(--navy); color: var(--navy); font-weight: 600; }
.periods label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.periods label:has(input:focus-visible) input { outline: 0; }
.periods label input[type="checkbox"] { width: 16px; height: 16px; border-radius: 50%; }
.periods label input[type="checkbox"]::before { width: 9px; height: 9px; }
.periods--inline label { padding: 4px 11px 4px 7px; font-size: 12.5px; }
.periods.is-invalid label { border-color: var(--neg); }
/* A product that cannot be ticked (in development, or not configured here —
   docs/104): shown so the whole suite is visible, but plainly unavailable. */
.periods label.periods__desarrollo { background: var(--surface-muted); border-style: dashed; color: var(--ink-muted); cursor: not-allowed; }
.periods label.periods__desarrollo:hover { border-color: var(--line-strong); }
.periods label.periods__desarrollo .badge { font-size: 10px; padding: 2px 6px; }
.chk.chk--deshabilitada { cursor: not-allowed; color: var(--ink-muted); }
/* Campos que dependen de una casilla (componentes.js): `hidden` tiene que
   ganarle al display del propio bloque (p. ej. .form-grid). */
[data-mostrar-con][hidden] { display: none !important; }

/* ---- Validación: mensajes de la plataforma, no el globo del navegador ---- */
.field__error { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: 12.5px; color: var(--neg); text-transform: none; letter-spacing: 0; }
.field__error::before { content: "!"; flex: 0 0 16px; height: 16px; border-radius: 50%; background: var(--neg); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; margin-top: 1px; }
.field.is-invalid input:not([type="checkbox"]), .field.is-invalid .sel__btn { border-color: var(--neg); box-shadow: 0 0 0 3px rgba(163,55,47,.10); }

/* ---- Diálogo modal (EmetDialogo) ---- */
html.dlg-activo { overflow: hidden; }
.dlg-fondo { position: fixed; inset: 0; z-index: 200; background: rgba(10,28,51,.55); display: grid; place-items: center; padding: 16px; animation: dlg-entra .12s ease-out; }
.dlg { width: 100%; max-width: 440px; background: #fff; border-top: 4px solid var(--navy); box-shadow: 0 30px 70px rgba(0,0,0,.35); padding: 22px 24px 18px; }
.dlg--peligro { border-top-color: var(--neg); }
.dlg__titulo { font-size: 19px; margin: 0 0 8px; }
.dlg__msg { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-body); overflow-wrap: anywhere; }
.dlg__input { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); font: inherit; font-size: 15px; margin: -4px 0 18px; }
.dlg__input:focus { outline: 2px solid var(--navy); outline-offset: -1px; }
.dlg__pie { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.dlg__pie .btn + .btn { margin-left: 0; }
.dlg__pie .btn { min-width: 110px; padding: 10px 16px; font-size: 14px; }
.dlg__pie .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@keyframes dlg-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dlg-fondo { animation: none; } }

/* ---- Tooltip ---- */
.tip { position: absolute; z-index: 210; max-width: 280px; background: var(--navy-2); color: #fff; font-size: 12px; line-height: 1.4; padding: 6px 9px; border-radius: 3px; box-shadow: 0 8px 22px rgba(10,28,51,.25); pointer-events: none; }
.tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--navy-2); }
.tip--abajo::after { bottom: auto; top: -5px; border-top: 0; border-bottom: 5px solid var(--navy-2); }
.tip[hidden] { display: none; }

/* ---- Selector de fecha (EmetFecha) ---- */
.dp { display: inline-block; position: relative; }
.dp__btn { display: inline-flex; align-items: center; gap: 10px; justify-content: space-between; min-width: 136px; cursor: pointer; text-align: left; }
.dp__btn:hover { border-color: var(--navy); }
.dp__btn[aria-expanded="true"] { outline: 2px solid var(--navy); outline-offset: -1px; }
.dp__btn:disabled { background: var(--surface-muted); color: var(--ink-muted); cursor: not-allowed; }
.dp__txt.is-placeholder { color: var(--ink-muted); }
.dp__ico { flex: 0 0 auto; opacity: .7; }
.dp-pop { position: absolute; z-index: 120; width: 288px; background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 18px 44px rgba(12,35,64,.22); padding: 12px; font-size: 13px; color: var(--navy); }
.dp-pop__cab { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; }
.dp-pop__titulo { flex: 1 1 auto; text-align: center; font-weight: 600; font-size: 14px; }
.dp-pop__nav { width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 0; border-radius: 3px; color: var(--navy); cursor: pointer; }
.dp-pop__nav:hover { background: var(--surface-muted); }
.dp-pop__semana, .dp-pop__fila { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-pop__semana span { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-muted); padding: 4px 0; letter-spacing: .04em; }
.dp-pop__rejilla { display: grid; gap: 2px; }
.dp-pop__dia { height: 34px; border: 0; background: none; border-radius: 3px; font: inherit; font-size: 13px; color: var(--navy); cursor: pointer; }
.dp-pop__dia:hover { background: var(--surface-muted); }
.dp-pop__dia.is-otro { color: #9aa5b3; }
.dp-pop__dia.is-hoy { box-shadow: inset 0 0 0 1.5px var(--gold); font-weight: 600; }
.dp-pop__dia.is-sel { background: var(--navy); color: #fff; font-weight: 600; }
.dp-pop__dia:disabled { color: #c3cad3; background: none; cursor: not-allowed; text-decoration: line-through; }
.dp-pop__dia:focus-visible, .dp-pop__nav:focus-visible, .dp-pop__accion:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.dp-pop__pie { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.dp-pop__accion { background: var(--navy); color: #fff; border: 0; border-radius: 2px; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; cursor: pointer; }
.dp-pop__accion:disabled { opacity: .45; cursor: not-allowed; }
.dp-pop__accion--sec { background: none; color: var(--ink-muted); text-decoration: underline; font-weight: 500; padding: 6px 4px; }

/* ---- Contraseña con "Mostrar" propio ---- */
.clave { position: relative; display: block; }
.clave > input { padding-right: 84px !important; }
.clave__ver { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); background: none; border: 0; border-radius: 2px; padding: 6px 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--navy-mid); cursor: pointer; }
.clave__ver:hover { background: var(--surface-muted); color: var(--navy); }
.clave__ver:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
input::-ms-reveal, input::-ms-clear { display: none; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
/* Autocompletado: sin el fondo azul/amarillo del navegador. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 9999s;
}

/* ---- <details>: chevron propio en lugar del triángulo del navegador ---- */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
summary::before {
  content: ""; display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 9px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; vertical-align: 2px; opacity: .75;
}
details[open] > summary::before { transform: rotate(45deg); vertical-align: 3px; }

/* ---- Barras de desplazamiento propias, finas y de la marca ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(12,35,64,.28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(12,35,64,.24); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(12,35,64,.4); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.condiciones { border: 1px solid var(--line); background: #fbfaf7; padding: 14px 16px 2px; }

/* ---- Destinatarios: grupos y transparencia ---- */
.tbl tr.tbl-grupo th { background: var(--surface-muted); text-align: left; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; padding: 9px 12px; }
.tbl tr.tbl-grupo th small { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; }
.dest__quien { display: flex; flex-direction: column; gap: 2px; }
.dest__nombre { font-weight: 600; color: var(--navy); }
.dest__sub { font-size: 12px; color: var(--ink-muted); }
.dest__recibe { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 3px; }
.dest__match { margin: 6px 0 0; font-size: 12.5px; }
.dest__match--usuario { color: var(--pos); }
.dest__match--externo { color: #8a6d16; }

/* Fila de la lista de destinatarios: chips compactos en una línea y el botón al lado. */
.tbl .form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tbl .periods--inline { flex-wrap: nowrap; gap: 4px; margin: 0; }
.tbl .periods--inline label { padding: 3px 9px 3px 6px; font-size: 12px; gap: 5px; white-space: nowrap; }
.tbl .periods--inline label input[type="checkbox"] { width: 14px; height: 14px; }
.tbl .periods--inline label input[type="checkbox"]::before { width: 8px; height: 8px; }
.tbl td .btn--sm { white-space: nowrap; }