/* Sistema visual de la plataforma: tema claro, titulares Plus Jakarta Sans, interfaz Inter,
   acento lima con texto oliva, radios grandes y sin bordes grises de 1 px. */
:root {
    --tinta: #0E1116; --sub: #4A5160; --tenue: #7A8291; --fondo: #F3F5F7; --carta: #FFFFFF;
    --suave: #E9F9C2; --lima: #C6F432; --oliva: #3F6212; --hueco: #E6E9EE;
    --error: #991B1B; --error-bg: #FEE2E2; --ok: #166534; --ok-bg: #DCFCE7;
    --r-s: 12px; --r-m: 18px; --r-l: 28px;
    --titular: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    --ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--tinta); font-family: var(--ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--oliva); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--titular); letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; }
h2 { font-size: 26px; font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0; }
.antetitulo { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tenue); }
.sub { color: var(--sub); }
.tenue { color: var(--tenue); font-size: 14px; }
.pila { display: flex; flex-direction: column; gap: 16px; }
.pila-s { display: flex; flex-direction: column; gap: 8px; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.empuja { margin-left: auto; }
.oculto { display: none !important; }

/* Botones */
.boton { appearance: none; border: 0; cursor: pointer; font: 600 15px/1 var(--ui); padding: 14px 22px; border-radius: 14px;
         background: var(--tinta); color: #fff; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.boton:hover { text-decoration: none; filter: brightness(1.08); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--oliva); outline-offset: 2px; }
.boton.lima { background: var(--lima); color: var(--tinta); }
.boton.claro { background: var(--carta); color: var(--tinta); }
.boton.peligro { background: var(--error); color: #fff; }
.boton.ancho { width: 100%; justify-content: center; padding: 17px 20px; font-size: 16px; }
.boton.peq { padding: 9px 14px; font-size: 14px; border-radius: 11px; }

/* Formularios */
label.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--sub); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=month], input[type=datetime-local], select, textarea {
    font: 500 16px var(--ui); color: var(--tinta); background: var(--carta); border: 0; border-radius: 14px; padding: 15px 18px; width: 100%; }
.carta input, .carta select, .carta textarea, dialog input, dialog select, dialog textarea { background: var(--fondo); }
textarea { min-height: 110px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--sub); }
.check input { appearance: none; width: 22px; height: 22px; flex: none; margin: 0; border-radius: 7px; background: var(--carta); cursor: pointer;
               box-shadow: inset 0 0 0 2px #C9CFD8; display: grid; place-items: center; transition: background .12s; }
.check input:checked { background: var(--oliva); box-shadow: none; }
.check input:checked::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.carta .check input, dialog .check input { background: var(--fondo); }
.error { color: var(--error); font-size: 14px; font-weight: 600; }

/* Mensajes */
.aviso { border-radius: var(--r-m); padding: 14px 18px; font-weight: 600; font-size: 15px; }
.aviso.ok { background: var(--ok-bg); color: var(--ok); }
.aviso.mal { background: var(--error-bg); color: var(--error); }
.aviso.info { background: var(--suave); color: var(--oliva); }
.aviso code, .codigo { font: 600 14px ui-monospace, Consolas, monospace; word-break: break-all; }

/* Chips */
.chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; background: var(--fondo); color: var(--sub); }
.chip.lima { background: var(--lima); color: var(--tinta); }
.chip.suave { background: var(--suave); color: var(--oliva); }

/* Cartas y listas */
.carta { background: var(--carta); border-radius: var(--r-l); padding: 28px; }
.lista { display: flex; flex-direction: column; gap: 4px; }
.lista > .elemento { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; }
.lista > .elemento:hover { background: var(--fondo); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.monograma { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; font: 800 18px var(--titular); background: var(--suave); color: var(--oliva); flex: none; }
.vacio { text-align: center; padding: 56px 24px; }

/* Acceso: mitad imagen, mitad formulario */
.acceso { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.acceso .lado { background: var(--suave); padding: 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.acceso .lado h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.03em; max-width: 560px; }
.acceso .marca { font: 800 22px var(--titular); letter-spacing: -0.02em; }
.acceso .forma { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.acceso .forma > div { width: 100%; max-width: 440px; }
.mosaico { display: flex; gap: 12px; }
.mosaico span { flex: 1; aspect-ratio: 3/4; border-radius: 18px; background: linear-gradient(160deg, #fff 0%, var(--lima) 140%); }
.mosaico span:nth-child(2) { background: linear-gradient(160deg, #fff 0%, #9AD6B0 160%); transform: translateY(24px); }
.mosaico span:nth-child(3) { background: linear-gradient(160deg, #fff 0%, #F6C66B 160%); }
@media (max-width: 860px) {
    .acceso { grid-template-columns: 1fr; }
    .acceso .lado { padding: 28px 16px; }
    .acceso .lado .mosaico { display: none; }
}

/* Aplicación: menú lateral y contenido */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh;
       background: linear-gradient(to right, var(--carta) 248px, var(--fondo) 248px); }
.menu { background: var(--carta); padding: 26px 18px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100dvh; }
.menu .marca { font: 800 22px var(--titular); letter-spacing: -0.02em; padding: 0 10px 18px; }
.menu a.op { color: var(--sub); font-weight: 500; padding: 11px 14px; border-radius: 12px; }
.menu a.op:hover { background: var(--fondo); text-decoration: none; }
.menu a.op.activa { background: var(--suave); color: var(--oliva); font-weight: 600; }
.menu .grupo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); padding: 16px 14px 4px; }
.menu .pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.selector { background: var(--fondo); border-radius: 16px; padding: 12px 14px; }
.selector select { background: var(--carta); padding: 10px 12px; font-size: 14px; }
.contenido { padding: 36px 44px 64px; display: flex; flex-direction: column; gap: 26px; max-width: 1180px; width: 100%; margin-inline: auto; }
.cabecera { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.cabecera > div:first-child { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; background: var(--fondo); }
    .menu { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 14px 16px; }
    .menu .marca { padding: 0 8px 0 0; }
    .menu .grupo, .menu .pie .selector { display: none; }
    .menu .pie { margin: 0 0 0 auto; flex-direction: row; }
    .contenido { padding: 24px 16px 48px; }
}

/* Modales propios (dialog): foco atrapado y Esc los da el navegador; clic fuera, nuestro JS. */
dialog { border: 0; border-radius: var(--r-l); padding: 0; width: min(520px, calc(100vw - 32px)); color: var(--tinta); background: var(--carta); }
dialog::backdrop { background: rgba(14, 17, 22, .42); }
dialog .dentro { padding: 30px; display: flex; flex-direction: column; gap: 18px; }
dialog .acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.qr svg { width: 200px; height: 200px; display: block; border-radius: 16px; background: #fff; padding: 8px; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabla td, table.tabla th { padding: 12px 10px; text-align: left; vertical-align: top; }
table.tabla tr:nth-child(even) td { background: var(--fondo); }
table.tabla th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }

/* Selector propio (listbox) y calendario: nunca controles nativos sin estilo.
   Misma pieza que el «Menú contextual» del sistema: lista blanca, radio 16, sombra suave,
   filas con radio 10, al pasar #E4ECFF y la elegida con ✓ y en negrita. */
.campo-sel { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--sub); min-width: 0; }
.campo-etiqueta { font-size: 14px; font-weight: 600; color: var(--sub); }
.campo-etiqueta .tenue { font-weight: 500; }
.selector-ui { position: relative; }
.sel-boton { appearance: none; border: 0; width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
             font: 500 16px var(--ui); color: var(--tinta); background: var(--carta); border-radius: 14px; padding: 15px 16px 15px 18px; }
.carta .sel-boton, dialog .sel-boton, .selector .sel-boton { background: var(--fondo); }
.sel-boton:hover { filter: brightness(.985); }
.sel-boton:focus-visible { outline: 3px solid var(--oliva); outline-offset: 2px; }
.sel-valor { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-valor.vacio { color: var(--tenue); }
.sel-flecha { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--sub); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.selector-ui.abierto .sel-boton { box-shadow: 0 0 0 2px #4F7CFF inset; }
.selector-ui.abierto .sel-flecha { transform: rotate(180deg); }
.selector-ui[data-fecha].abierto .sel-flecha { transform: none; }
.campo-sel.peq .sel-boton { padding: 9px 12px 9px 14px; font-size: 14px; border-radius: 11px; }
.sel-pop { position: absolute; z-index: 60; left: 0; top: calc(100% + 6px); width: max-content; min-width: min(100%, 260px); max-width: min(420px, calc(100vw - 32px));
           background: var(--carta); border-radius: 16px; padding: 6px; box-shadow: 0 8px 28px rgba(14, 17, 22, .125), 0 1px 3px rgba(14, 17, 22, .06);
           display: flex; flex-direction: column; gap: 6px; }
.sel-pop[hidden] { display: none; }
.selector-ui.arriba .sel-pop { top: auto; bottom: calc(100% + 6px); }
.sel-buscar { background: var(--fondo) !important; padding: 10px 12px !important; font-size: 14px !important; border-radius: 10px !important; }
.sel-lista { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; outline: none; display: flex; flex-direction: column; gap: 2px; }
.sel-lista [role=option] { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
                          font: 500 14px var(--ui); color: var(--tinta); white-space: nowrap; }
.sel-lista [role=option] span { flex: 1; }
/* El filtro de la búsqueda oculta opciones con [hidden]: sin esto el display:flex las mantenía a la vista. */
.sel-lista [role=option][hidden] { display: none; }
.sel-nada { padding: 9px 12px; font: 500 14px var(--ui); color: var(--tenue); }
.sel-nada[hidden] { display: none; }
.sel-lista [role=option].activa { background: #E4ECFF; }
.sel-lista [role=option][aria-selected=true] { font-weight: 700; }
.sel-ok { width: 16px; height: 16px; fill: none; stroke: var(--oliva); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; flex: none; }
[aria-selected=true] > .sel-ok { visibility: visible; }
.sel-lista:focus-visible { outline: none; }

.sel-pop.cal { width: 304px; padding: 14px; gap: 10px; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; }
.cal-cab b { font: 700 15px var(--ui); text-transform: capitalize; }
.cal-nav { appearance: none; border: 0; background: var(--fondo); width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font: 700 18px var(--ui); color: var(--tinta); }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-sem { font: 600 11px var(--ui); color: var(--tenue); text-transform: uppercase; padding: 4px 0; }
.cal-dia { appearance: none; border: 0; background: none; height: 36px; border-radius: 10px; cursor: pointer; font: 500 14px var(--ui); color: var(--tinta); text-transform: capitalize; }
.cal-dia:hover { background: #E4ECFF; }
.cal-dia.hoy { box-shadow: inset 0 0 0 2px var(--suave); font-weight: 700; }
.cal-dia.elegido { background: var(--lima); font-weight: 700; }
.cal-meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cal-meses .cal-dia { height: 40px; font-size: 13px; }
.cal-hora { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.cal-hora > span { font: 600 12px var(--ui); color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
.cal-horas { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-hora { appearance: none; border: 0; background: var(--fondo); border-radius: 999px; padding: 7px 12px; font: 600 13px var(--ui); color: var(--tinta); cursor: pointer; }
.chip-hora:hover { background: #E4ECFF; }
.chip-hora.elegido { background: var(--lima); }
.cal-dia:focus-visible, .chip-hora:focus-visible, .cal-nav:focus-visible { outline: 3px solid var(--oliva); outline-offset: 1px; }

/* Barras de desplazamiento finas y discretas en paneles y listas. */
* { scrollbar-width: thin; scrollbar-color: #C9CFD8 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #C9CFD8; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* Botón de texto (Salir, Ver todo…): sin caja, oliva. */
.boton.texto { background: none; color: var(--oliva); padding: 8px 10px; }
.boton.texto:hover { text-decoration: underline; filter: none; }

/* Enlaces a los textos legales en los pies (acceso y propuesta al cliente). */
.enlaces-legales { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.enlaces-legales a { color: var(--sub); font-weight: 600; font-size: 13px; }
.enlaces-legales a:hover { color: var(--oliva); }
.prop-pie { display: flex; justify-content: center; padding-top: 8px; }
.prop-pie .enlaces-legales { justify-content: center; }