/* Estándar Síguelo · fase 2, tanda B (1-nov-2026): el backoffice separado, las
   franjas de modo y la Configuración con pestañas. Maqueta aprobada por Pablo:
   docs/mockups/os-fase2.html (pantallas 3 y 4) y el estándar de todas las
   herramientas (menú oscuro con sello «BACKOFFICE SÍGUELO», franja azul
   «Viendo como», negra «Operando como»).

   Va en una hoja aparte y no dentro de index.html a propósito: el servidor
   arma /tema-auto.css leyendo los <style> de index.html y pasando sus colores
   fijos a oscuro. El menú del backoffice es oscuro en los dos temas y las
   franjas tienen SU color (azul, negro, amarillo) en los dos temas: pasarlos
   «a oscuro» los rompería. Todo lo demás usa los tokens de tipografia.css y
   tema.css (--card, --line, --ink, --muted), que ya cambian solos. */

/* ── La piel del backoffice ─────────────────────────────────────────── */
/* La pone un script al principio de <head> leyendo la dirección (/backoffice):
   antes de pintar nada, así no hay un salto del menú claro al oscuro. */
html[data-piel="backoffice"] .nav-menu-cliente { display: none !important; }
html[data-piel="backoffice"] #menuBackoffice { display: flex !important; }
html[data-piel="backoffice"] #loginView { display: none !important; }
html[data-piel="backoffice"] #btnReportarBug { display: none !important; }
html[data-piel="backoffice"] #btnSaludFlota { display: none !important; }
html[data-piel="backoffice"] #menuCuentaConfiguracion { display: none !important; }
html[data-piel="backoffice"] #menuCuentaBackoffice { display: none !important; }
/* En el backoffice el login de administrador no se puede «cancelar»: no hay otra pantalla a la que volver. */
html[data-piel="backoffice"] #modalLoginAdmin .btn-cancelar-login-admin { display: none !important; }
html:not([data-piel="backoffice"]) #menuBackoffice { display: none !important; }
html:not([data-piel="backoffice"]) #menuCuentaClaveAdmin { display: none !important; }

/* Menú oscuro: mismo negro que el CRM (--menu del estándar) en los dos temas. */
html[data-piel="backoffice"] .sidebar { background: #15181D; border-right: 0; color: #C9CED6; }
html[data-piel="backoffice"] .sidebar .logo-container > span { color: #9AA3AF !important; }
html[data-piel="backoffice"] .sidebar .logo-os-claro { display: none !important; }
html[data-piel="backoffice"] .sidebar .logo-os-oscuro { display: block !important; }
html[data-piel="backoffice"] #btnToggleSidebar { background: transparent; border-color: rgba(255,255,255,.14); color: #C9CED6; }
html[data-piel="backoffice"] #menuBackoffice { flex-direction: column; }
html[data-piel="backoffice"] #menuBackoffice .nav-grupo { color: #9AA3AF; }
html[data-piel="backoffice"] #menuBackoffice .nav-item { color: #C9CED6; border-bottom-color: rgba(255,255,255,.06); }
html[data-piel="backoffice"] #menuBackoffice .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
html[data-piel="backoffice"] #menuBackoffice .nav-item.active { background: #FFD500; color: #15181D; border-color: #FFBF00; }
html[data-piel="backoffice"] #menuBackoffice .nav-item.active:hover { background: #FFD500; color: #15181D; }
html[data-piel="backoffice"] .sidebar.colapsado .nav-grupo { border-top-color: rgba(255,255,255,.12); }
html[data-piel="backoffice"] .sidebar.colapsado .nav-item:hover { background: rgba(255,255,255,.06); }
.sello-backoffice { margin: 0 10px 6px; font: 700 10px var(--sans); letter-spacing: .08em; background: #FFD500; color: #15181D; border-radius: 5px; padding: 3px 8px; display: inline-block; width: fit-content; }
.sidebar.colapsado .sello-backoffice { font-size: 0; width: 22px; height: 6px; padding: 0; margin: 4px auto 8px; border-radius: 3px; }
/* El pie: el administrador y su nivel. */
html[data-piel="backoffice"] .user-info { background: #15181D; border-top: 1px solid rgba(255,255,255,.12); }
html[data-piel="backoffice"] .menu-usuario { background: rgba(255,255,255,.06); color: #fff; }
html[data-piel="backoffice"] .menu-usuario:hover { background: rgba(255,255,255,.1); }
html[data-piel="backoffice"] .menu-usuario .avatar { background: #0F5F58; color: #fff; }
html[data-piel="backoffice"] .menu-usuario-datos span { color: #C9CED6; }
html[data-piel="backoffice"] .menu-cuenta .menu-cuenta-perfil { color: #C9CED6; }
html[data-piel="backoffice"] .menu-cuenta .menu-cuenta-perfil:hover { background: rgba(255,255,255,.08); color: #fff; }
html[data-piel="backoffice"] .menu-cuenta .logout-btn { color: #F6B4AC; }

/* ── Las franjas de modo (estándar de todas las herramientas) ──────── */
/* Azul: «Viendo como X · solo lectura». Negra: «Operando como X». Amarilla:
   marcha blanca (OS no la tiene hoy; la clase queda por el estándar). Va en el
   flujo, arriba del contenido —como la franja de «entraste desde el menú
   Apps»—, no fija: una barra fija le robaba altura a la consola de Rent-a-Car
   (Sesión 189). */
.franja-os { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border-radius: 8px; font-size: 13px; margin: 0 0 12px; }
.franja-os[hidden] { display: none; }
.franja-os b { font-weight: 600; }
.franja-os .franja-os-der { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.franja-os a, .franja-os button { color: inherit; background: none; border: 0; padding: 0; min-height: 0; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; box-shadow: none; }
.franja-os.azul { background: #1E3A8A; color: #fff; }
.franja-os.negra { background: #15181D; color: #fff; }
.franja-os.amarilla { background: #FFD500; color: #15181D; }
.franja-os .chip-modo { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.18); }
.franja-os.amarilla .chip-modo { background: rgba(0,0,0,.1); }
/* El marco alrededor de la ventana (Sesión 189) se conserva, en el color de la franja: es lo que no se pierde al desplazar la página. */
#marcoVerComo { position: fixed; inset: 0; z-index: 99998; pointer-events: none; border: 3px solid #1E3A8A; border-radius: 4px; }
#marcoVerComo.negra { border-color: #15181D; }
@media print { .franja-os, #marcoVerComo { display: none !important; } }

/* ── Configuración con pestañas (maqueta, pantalla 3) ───────────────── */
.conf-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.conf-tabs button { padding: 7px 12px; min-height: 0; border-radius: 9px; font-size: 13px; font-weight: 500; border: 1px solid var(--line, #E2E5EA); background: var(--card, #fff); color: var(--ink-2, #3A414C); cursor: pointer; box-shadow: none; }
.conf-tabs button:hover { background: var(--soft, #F7F8FA); color: var(--ink, #15181D); }
.conf-tabs button[aria-selected="true"] { background: var(--ink, #15181D); color: var(--bg, #fff); border-color: var(--ink, #15181D); font-weight: 600; }
.conf-panel[hidden] { display: none; }
.conf-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.conf-lista li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13.5px; padding: 9px 12px; border-radius: 8px; background: var(--soft, #F7F8FA); color: var(--ink-2, #3A414C); }
.conf-lista li .der { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.conf-lista li .mono { font-family: var(--mono); }
.conf-chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--soft, #F7F8FA); color: var(--ink-2, #3A414C); border: 1px solid var(--line, #E2E5EA); white-space: nowrap; }
.conf-chip.ok { background: var(--green-soft, #E6F4EA); color: var(--green, #1E7B3A); border-color: transparent; }
.conf-chip.apagado { opacity: .7; }

/* ── El backoffice: lista de clientes (maqueta, pantalla 4) ─────────── */
.bo-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.bo-kpi { background: var(--card, #fff); border: 1px solid var(--line, #E2E5EA); border-radius: 12px; padding: 12px 14px; }
.bo-kpi span { font-size: 12.5px; color: var(--muted, #5B6370); display: block; }
.bo-kpi b { display: block; font-size: 24px; margin-top: 2px; font-family: var(--mono); font-weight: 600; color: var(--ink, #15181D); }
.bo-kpi small { color: var(--muted, #5B6370); font-size: 11.5px; }
.bo-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.bo-filtros .search-input { max-width: 360px; }
.bo-seg { display: inline-flex; background: var(--soft, #E6E8EC); border: 1px solid var(--line, #E2E5EA); border-radius: 10px; padding: 3px; gap: 2px; }
.bo-seg button { padding: 5px 11px; min-height: 0; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-2, #3A414C); background: transparent; border: 0; cursor: pointer; box-shadow: none; }
.bo-seg button[aria-pressed="true"] { background: var(--card, #fff); color: var(--ink, #15181D); font-weight: 600; box-shadow: 0 1px 3px rgba(20,24,30,.15); }
.bo-tabla-caja { overflow-x: auto; border: 1px solid var(--line, #E2E5EA); border-radius: 11px; background: var(--card, #fff); }
.bo-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.bo-tabla th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted, #5B6370); text-transform: uppercase; letter-spacing: .04em; padding: 9px 10px; background: var(--soft, #F7F8FA); border-bottom: 1px solid var(--line, #E2E5EA); white-space: nowrap; }
.bo-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--line-2, #EEF0F3); vertical-align: middle; color: var(--ink, #15181D); }
.bo-tabla tr:last-child td { border-bottom: 0; }
.bo-tabla .peq { font-size: 12px; color: var(--muted, #5B6370); }
.bo-tabla .mono { font-family: var(--mono); }
.bo-tabla .acciones { white-space: nowrap; text-align: right; }
.bo-tabla .acciones .btn { min-height: 32px; padding: 0 10px; font-size: 12.5px; margin-left: 4px; }
.bo-tabla .btn-gris { background: var(--card, #fff); color: var(--ink, #15181D); border: 1px solid var(--line, #E2E5EA); }
.bo-tabla .btn-gris:hover { background: var(--soft, #F7F8FA); }
.bo-chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--soft, #F7F8FA); color: var(--ink-2, #3A414C); border: 1px solid var(--line, #E2E5EA); white-space: nowrap; }
.bo-chip.ok { background: var(--green-soft, #E6F4EA); color: var(--green, #1E7B3A); border-color: transparent; }
.bo-chip.mal { background: var(--red-soft, #FDECEA); color: var(--red, #B42318); border-color: transparent; }
.bo-vacio { padding: 24px; text-align: center; color: var(--muted, #5B6370); font-size: 13.5px; }
.bo-aviso { padding: 10px 14px; border-radius: 8px; background: var(--amber-soft, #FEF3E2); color: var(--amber-ink, #8A3B06); font-size: 13px; margin-bottom: 12px; }
@media (max-width: 900px) { .bo-kpis { grid-template-columns: 1fr 1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   Fase 2, tanda C (1-nov-2026): estilo único. Maqueta aprobada por Pablo:
   docs/mockups/os-fase2.html (pantalla 5 «Estilo») y estandar-siguelo.html.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tokens en claro ─────────────────────────────────────────────────── */
/* tema.css sólo los redefine para el modo oscuro; en claro cada hoja ponía
   su propio fallback (`var(--card, #fff)`). Acá quedan los valores del CRM
   para que los style="…" migrados a variables tengan de dónde leer. El
   amarillo de marca es ÚNICO y no lo cambia ningún perfil (ver abajo). */
:root {
  --card: #FFFFFF; --bg: #F3F4F6;
  --marca: #FFD500; --marca-ambar: #FFBF00; --marca-suave: #FFF7CC; --marca-texto: #6B4A00;
  --amber-ink: #8A3B06; --amber-soft: #FEF3E2;
  --red: #B42318; --red-soft: #FDECEA; --red-borde: #F5C6C2;
  --green: #1E7B3A; --green-soft: #E6F4EA;
  --blue: #1E3A8A; --blue-soft: #E8EEFC;
}

/* ── El color de la empresa ya no pinta la interfaz ──────────────────── */
/* Antes el perfil escribía --siguelo-amarillo en <html> y toda la pantalla
   (menú activo, botones, radar de acceso) se teñía del color del cliente.
   Ahora el perfil escribe --color-empresa y ese color se usa SÓLO en lo que
   se imprime o se manda: la hoja de los certificados y los informes en PDF.
   Lo dice la pestaña Apariencia. */
.sheet-zip, .pdf-empresa {
  --siguelo-amarillo: var(--color-empresa, #FFD500);
  --siguelo-amarillo-oscuro: var(--color-empresa-acento, #FFBF00);
  --siguelo-negro: var(--color-empresa-oscuro, #000000);
}

/* ── Botones: un solo amarillo para la acción principal ──────────────── */
/* `.btn` ya es amarillo (index.html). Lo secundario va gris con borde, como
   el CRM; el rojo queda para acciones de riesgo (eliminar, cortar motor) y
   se escribe como texto y borde rojos, no como fondo. Los colores por
   módulo (morado de administración, naranjo de Taller, rosado de
   Documentos…) salieron de los botones y de los bordes de las tarjetas. */
.btn.btn-secundario { background: var(--card, #fff); color: var(--ink, #15181D); border: 1px solid var(--line, #E2E5EA); font-weight: 500; }
.btn.btn-secundario:hover:not(:disabled) { background: var(--soft, #F7F8FA); }
.btn.btn-peligro { background: var(--card, #fff); color: var(--red, #B42318); border: 1px solid var(--red-borde, #F5C6C2); font-weight: 600; }
.btn.btn-peligro:hover:not(:disabled) { background: var(--red-soft, #FDECEA); }
.btn.btn-secundario:disabled, .btn.btn-peligro:disabled { opacity: .6; }

/* ── Pie de modal y de formulario ────────────────────────────────────── */
/* La acción principal va a la DERECHA y «Cancelar» a su izquierda, en todos
   los pies. Antes cada botón llevaba `flex:1` y los dos se estiraban al
   mismo ancho: el pie ya no estira a nadie. */
.modal-pie { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.modal-pie > .btn { flex: 0 0 auto; }
.modal-pie > .btn-izq, .modal-pie > .pie-izq { margin-right: auto; }

/* ── Botón «?» de la ayuda del módulo (estándar: aro negro de 26 px) ──── */
.ay-btn { border-color: var(--ink, #15181D) !important; background: transparent !important; color: var(--ink, #15181D) !important; font-weight: 700 !important; font-size: 13px !important; }
.ay-btn:hover { background: var(--marca, #FFD500) !important; border-color: var(--marca, #FFD500) !important; }

/* ── Selector buscable (comun-os.js) · 1-nov, maqueta aprobada por Pablo ──
   El envoltorio .sb hereda las clases del <select> (.search-input), así que
   se ve como los campos de la plataforma y respeta las reglas de ancho de
   cada pantalla. El <select> nativo queda debajo, invisible pero presente:
   sigue siendo el valor del formulario. Todo en variables: esta hoja no la
   pasa a oscuro el servidor. */
.sb { display: inline-flex; align-items: center; gap: 6px; position: relative; box-sizing: border-box; max-width: 100%; min-width: min(200px, 100%); min-height: 38px; cursor: text; vertical-align: middle;
      padding: 0 10px; border-radius: 8px; border: 1px solid var(--line, #E2E5EA); background: var(--card, #fff); color: var(--ink, #15181D); font: 14px var(--sans); text-align: left; }
.sb.search-input { padding: 0 10px; } /* .search-input deja 2,5 rem a la izquierda para su lupa: acá la lupa va adentro */
.sb:focus-within { border-color: var(--ink, #15181D); }
.sb.sb-desact { background: var(--soft, #F7F8FA); color: var(--muted, #5B6370); cursor: default; }
.sb.sb-invalido { border-color: var(--red, #B42318); }
.sb-lupa { display: inline-flex; color: var(--muted, #5B6370); flex: none; }
.sb-in { flex: 1 1 0%; min-width: 0; width: auto; border: 0; background: transparent; padding: 0; min-height: 0; height: 36px; font: inherit; color: inherit; outline: none; text-overflow: ellipsis; box-shadow: none; }
.sb-in::placeholder { color: var(--muted, #5B6370); opacity: 1; }
.sb.sb-abierto .sb-in::placeholder { color: var(--ink-2, #3A414C); }
.sb-x { flex: none; border: 0; background: transparent; color: var(--muted, #5B6370); font-size: 12px; line-height: 1; padding: 4px; min-height: 0; border-radius: 6px; cursor: pointer; }
.sb-x:hover { color: var(--ink, #15181D); background: var(--soft, #F7F8FA); }
.sb-nativo.sb-nativo { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; border: 0; overflow: hidden; }
.sb-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1250; background: var(--card, #fff); border: 1px solid var(--line, #E2E5EA); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow: hidden; display: flex; flex-direction: column; max-height: 320px; font-weight: 400; font-family: var(--sans); text-align: left; cursor: default; }
/* `hidden` tiene que ganarle al display:flex de la lista (en OS no hay una regla global [hidden]). */
.sb-lista[hidden], .sb-x[hidden] { display: none; }
.sb-ops { overflow: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; padding: 4px 0; }
.sb-op { padding: 7px 11px; font-size: 13px; color: var(--ink, #15181D); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; cursor: pointer; }
.sb-op.sb-act { background: var(--marca-suave, #FFF7CC); }
.sb-op[aria-selected="true"] { font-weight: 600; }
.sb-op.sb-dis { color: var(--muted, #5B6370); cursor: not-allowed; }
.sb-op mark { background: transparent; color: inherit; font-weight: 700; }
.sb-sec { font-size: 12px; color: var(--muted, #5B6370); font-weight: 400; }
.sb-grupo { font: 600 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #5B6370); padding: 8px 11px 2px; }
.sb-vacio { padding: 14px 11px; font-size: 13px; color: var(--muted, #5B6370); }
.sb-pie { border-top: 1px solid var(--line, #E2E5EA); color: var(--muted, #5B6370); font-size: 11.5px; padding: 6px 11px; background: var(--soft, #F7F8FA); flex: none; }
/* Teléfono: la lista va dentro del flujo (no se sale de la pantalla) y empuja lo de abajo, sin medidas de ventana completa (regla 8). */
.sb.sb-flujo { flex-wrap: wrap; }
.sb.sb-flujo .sb-lista { position: static; flex: 1 1 100%; margin: 0 -10px 6px; box-shadow: none; border-radius: 8px; max-height: 260px; }