/* Botánica · Flotilla — un solo archivo de estilo, sin fuentes ni iconos externos.

   Identidad: la misma paleta del manual de Botánica MX que usa NexoFresh
   (app/identidad.mjs allá; aquí copiada, no importada: Fleet es un proyecto
   aparte). Contrastes medidos contra WCAG AA (4.5:1 para texto):
     carbón #2B2A26 sobre papel #F7F3EC ........ 13.0 ✓
     bronce #745413 sobre papel ................. 6.3 ✓ (enlaces)
     blanco sobre verde hoja #0A382C ............ 13.4 ✓ (botón principal)
     mostaza #D79B29: SÓLO fondo o detalle grueso, nunca letra sobre claro.

   Reglas que vienen de NexoFresh y no se tocan:
   - 16 px en todo campo de texto (por debajo, Safari en iPhone hace zoom).
   - 48 px mínimo en todo objetivo táctil.
   - Las tablas se vuelven tarjetas por debajo de 760 px con UN marcado.

   Tamaños: teléfono < 760 · iPad vertical 760–1099 · escritorio e iPad horizontal ≥ 1100. */

:root {
  --hoja: #0A382C; --hoja-2: #134a3b; --olivo: #2E3325; --olivo-2: #3a4030;
  --carbon: #2B2A26; --tenue: #6E6A5F; --bronce: #745413; --mostaza: #D79B29; --arena: #D0C0AC;
  --papel: #F7F3EC; --tarjeta: #FFFDF8; --linea: rgba(43,42,38,.14); --linea-suave: rgba(43,42,38,.07);
  --rojo: #9B2C1E; --rojo-fondo: #F8E5E0; --ambar: #6E480A; --ambar-fondo: #F6E7C1;
  --verde: #2E5409; --verde-fondo: #E4EDD5; --azul: #2D4A63; --azul-fondo: #E3EAF0;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text", Georgia, "Times New Roman", serif;
  --texto: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radio: 14px; --radio-chico: 10px;
  --sombra: 0 1px 2px rgba(43,42,38,.06), 0 4px 14px rgba(43,42,38,.05);
  --toque: 48px;
  --lateral: 252px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--texto); color: var(--carbon); background: var(--papel); line-height: 1.5; font-size: 16px;
  -webkit-font-smoothing: antialiased; }
a { color: var(--bronce); text-underline-offset: 2px; }
a:hover { color: var(--carbon); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.005em; color: var(--carbon); }
h1 { font-size: 1.85rem; line-height: 1.15; margin: 0 0 .3rem; }
h2 { font-size: 1.3rem; margin: 2.1rem 0 .8rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.sub { color: var(--tenue); margin: 0; }
code { font-size: .92em; }

/* ── Cabecera / barra lateral ───────────────────── */
.cabecera { background: var(--olivo); color: #F7F3EC; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .5rem max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left));
  padding-top: max(.5rem, env(safe-area-inset-top)); position: sticky; top: 0; z-index: 10; }
.marca { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .6rem; min-height: var(--toque); }
.marca:hover { color: #fff; }
.marca img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.marca .rotulo { font-family: var(--display); font-size: 1.15rem; letter-spacing: .14em; font-weight: 600; }
.marca .modulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--olivo); background: var(--mostaza);
  padding: .12rem .5rem; border-radius: 999px; font-weight: 700; }
.menu { display: flex; flex-direction: column; gap: .15rem; }
.grupo { display: flex; flex-direction: column; gap: .1rem; }
.grupo-titulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(247,243,236,.55); padding: .9rem .85rem .3rem; font-weight: 700; }
.menu a { color: rgba(247,243,236,.88); text-decoration: none; padding: 0 .85rem; border-radius: var(--radio-chico);
  min-height: 44px; display: flex; align-items: center; font-size: .97rem; position: relative; }
.menu a:hover { background: rgba(247,243,236,.08); color: #fff; }
.menu a[aria-current="page"] { background: rgba(247,243,236,.12); color: #fff; font-weight: 600; }
.menu a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--mostaza); }
.usuario { display: flex; align-items: center; gap: .6rem; padding: .75rem .5rem .25rem; margin-top: .75rem; border-top: 1px solid rgba(247,243,236,.12); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mostaza); color: var(--olivo); display: grid; place-items: center;
  font-weight: 800; font-size: .85rem; flex: none; }
.quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.quien strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien small { color: rgba(247,243,236,.6); font-size: .78rem; }
.salir { margin-left: auto; }
.salir .enlace { color: rgba(247,243,236,.85); min-height: 44px; padding: 0 .6rem; border-radius: var(--radio-chico); }
.salir .enlace:hover { background: rgba(247,243,236,.08); color: #fff; }
.enlace { background: none; border: 0; cursor: pointer; font: inherit; }
.menu-abrir { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.menu-boton { display: none; }
.hamburguesa, .hamburguesa::before, .hamburguesa::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.hamburguesa::before, .hamburguesa::after { content: ""; position: absolute; left: 0; }
.hamburguesa::before { top: -6px; } .hamburguesa::after { top: 6px; }

/* Escritorio e iPad horizontal: barra lateral fija. */
@media (min-width: 1100px) {
  body.con-menu { padding-left: var(--lateral); }
  .con-menu .cabecera { position: fixed; left: 0; top: 0; bottom: 0; width: var(--lateral); flex-direction: column; align-items: stretch;
    flex-wrap: nowrap; padding: max(1.1rem, env(safe-area-inset-top)) .75rem 1rem max(.75rem, env(safe-area-inset-left)); overflow-y: auto; }
  .con-menu .marca { padding: 0 .35rem .5rem; gap: .5rem; }
  .con-menu .marca .rotulo { font-size: 1.05rem; letter-spacing: .1em; }
  .con-menu .marca .modulo { font-size: .64rem; padding: .1rem .45rem; }
  .con-menu .menu { flex: 1; }
  .con-menu .usuario { margin-top: auto; }
}
/* iPad vertical y teléfono: barra superior con menú desplegable. */
@media (max-width: 1099px) {
  .menu-boton { display: inline-flex; align-items: center; gap: .55rem; margin-left: auto; min-height: 44px; padding: 0 1rem;
    border: 1px solid rgba(247,243,236,.3); border-radius: var(--radio-chico); cursor: pointer; font-weight: 600; }
  .menu { display: none; flex-basis: 100%; padding-bottom: .5rem; }
  .menu-abrir:checked ~ .menu { display: flex; }
  .menu-abrir:focus-visible ~ .menu-boton { outline: 3px solid var(--mostaza); outline-offset: 2px; }
  .menu a { min-height: var(--toque); font-size: 1.02rem; }
  .marca .modulo { font-size: .66rem; }
}
@media (max-width: 759px) {
  .marca { gap: .45rem; }
  .marca img { width: 30px; height: 30px; border-radius: 8px; }
  .marca .rotulo { font-size: 1rem; letter-spacing: .09em; }
  .marca .modulo { font-size: .6rem; padding: .1rem .4rem; letter-spacing: .08em; }
  .menu-boton { padding: 0 .85rem; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  /* iPad vertical: los tres grupos lado a lado al abrir el menú. */
  .menu-abrir:checked ~ .menu { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1rem; }
  .menu .usuario { grid-column: 1 / -1; }
}

main { max-width: 1240px; margin: 0 auto; padding: 1.75rem max(1.25rem, env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); }
@media (min-width: 1100px) { main { padding-left: 2.25rem; padding-right: 2.25rem; } }
@media (max-width: 759px) { main { padding-top: 1.25rem; } h1 { font-size: 1.55rem; } }

/* ── Avisos ──────────────────────────────────────── */
.mensaje { padding: .85rem 1rem; border-radius: var(--radio-chico); margin-bottom: 1rem; font-weight: 500; }
.mensaje.ok { background: var(--verde-fondo); color: var(--verde); }
.mensaje.error { background: var(--rojo-fondo); color: var(--rojo); }
.nota { background: var(--azul-fondo); color: var(--azul); padding: .8rem 1rem; border-radius: var(--radio-chico); }
.nota.ambar { background: var(--ambar-fondo); color: var(--ambar); }

/* ── Encabezado de página ───────────────────────── */
.encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--linea); }
.botones { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Botones ─────────────────────────────────────── */
button, .boton { font: inherit; min-height: var(--toque); padding: 0 1.15rem; border-radius: var(--radio-chico);
  border: 1px solid var(--linea); background: var(--tarjeta); color: var(--carbon); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 600; font-size: .97rem;
  transition: background-color .15s, border-color .15s; }
button:hover, .boton:hover { border-color: rgba(43,42,38,.35); color: var(--carbon); }
button.primario, .boton.primario { background: var(--hoja); border-color: var(--hoja); color: #fff; }
button.primario:hover, .boton.primario:hover { background: var(--hoja-2); color: #fff; }
button.peligro { color: var(--rojo); border-color: rgba(155,44,30,.35); }
.boton.ancho { width: 100%; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--mostaza); outline-offset: 2px; }
form.en-linea { display: inline; }

/* ── Formularios ─────────────────────────────────── */
.formulario { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem; box-shadow: var(--sombra); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem 1.1rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo label, .campo legend { font-weight: 600; font-size: .92rem; }
.campo small { color: var(--tenue); font-size: .85rem; }
.req { color: var(--rojo); }
input, select, textarea { font: inherit; font-size: 16px; min-height: var(--toque); padding: .55rem .75rem;
  border: 1px solid rgba(43,42,38,.22); border-radius: var(--radio-chico); background: #fff; color: var(--carbon); width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--hoja); }
input[type="file"] { padding: .7rem; background: var(--papel); }
textarea { min-height: 96px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.opcion { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--toque); margin-right: 1.25rem; font-weight: 500; cursor: pointer; }
.opcion input { width: 22px; height: 22px; min-height: 0; accent-color: var(--hoja); }
.acciones { margin-top: 1.25rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Cifras del panel ───────────────────────────── */
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: .85rem; }
.cifra { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .25rem; text-decoration: none; color: var(--carbon); box-shadow: var(--sombra); }
a.cifra:hover { border-color: var(--bronce); color: var(--carbon); }
.cifra-titulo { font-size: .8rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.cifra-valor { font-family: var(--display); font-size: 1.85rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; line-height: 1.15; }
.cifra-nota { font-size: .82rem; color: var(--tenue); }
.cifra.critica { border-color: rgba(155,44,30,.35); background: #FCF1EE; }
.cifra.critica .cifra-valor { color: var(--rojo); }
.cifra.aviso { border-color: rgba(215,155,41,.55); background: #FCF5E3; }
@media (max-width: 759px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .cifra { padding: .85rem .9rem; } .cifra-valor { font-size: 1.45rem; } }

/* ── Tablas (tarjetas en el teléfono) ─────────── */
.tabla-envoltura { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); overflow-x: auto; box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th { text-align: left; background: #F2ECE1; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); font-weight: 700; white-space: nowrap; }
.tabla th, .tabla td { padding: .7rem .85rem; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
.tabla tbody tr:hover td { background: rgba(215,155,41,.06); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tr.anulado td { color: #9a958a; text-decoration: line-through; }
.tabla tr.anulado td:last-child { text-decoration: none; }
.tabla tr.total td { font-weight: 700; background: #F2ECE1; }
@media (max-width: 760px) {
  .tabla-envoltura { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: .55rem 0; margin-bottom: .6rem; box-shadow: var(--sombra); }
  .tabla tbody tr:hover td { background: transparent; }
  .tabla td { border: 0; padding: .3rem 1rem; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .tabla td::before { content: attr(data-et); font-weight: 600; color: var(--tenue); text-align: left; flex-shrink: 0; font-size: .88rem; }
  .tabla td[data-et=""]::before { content: none; }
  .tabla .num { white-space: normal; }
}

/* ── Etiquetas ───────────────────────────────────── */
.etiqueta { display: inline-block; font-size: .72rem; font-weight: 700; padding: .16rem .55rem; border-radius: 999px; letter-spacing: .02em;
  background: #ECE6DA; color: #4A463D; vertical-align: middle; white-space: nowrap; }
.etiqueta.simulado { background: #EAE3F2; color: #4F3A73; }
.etiqueta.disponible, .etiqueta.vigente, .etiqueta.al_corriente, .etiqueta.cerrada { background: var(--verde-fondo); color: var(--verde); }
.etiqueta.en_ruta { background: var(--azul-fondo); color: var(--azul); }
.etiqueta.mantenimiento, .etiqueta.por_vencer, .etiqueta.proximo, .etiqueta.abierta, .etiqueta.estimado { background: var(--ambar-fondo); color: var(--ambar); }
.etiqueta.fuera_servicio, .etiqueta.vencido, .etiqueta.anulado { background: var(--rojo-fondo); color: var(--rojo); }

/* ── Alertas ─────────────────────────────────────── */
.alertas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.alerta { background: var(--tarjeta); border: 1px solid var(--linea); border-left: 5px solid var(--arena); border-radius: var(--radio-chico); padding: .8rem 1rem; box-shadow: var(--sombra); }
.alerta p { margin: .3rem 0 0; color: var(--tenue); font-size: .93rem; }
.alerta a { color: var(--carbon); text-decoration: none; }
.alerta a:hover strong { text-decoration: underline; }
.alerta .nivel { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-right: .45rem; }
.alerta.critica { border-left-color: var(--rojo); } .alerta.critica .nivel { color: var(--rojo); }
.alerta.aviso { border-left-color: var(--mostaza); } .alerta.aviso .nivel { color: var(--ambar); }
.alerta.info { border-left-color: #8FA3B5; } .alerta.info .nivel { color: var(--azul); }

.vacio { color: var(--tenue); background: var(--tarjeta); border: 1px dashed rgba(43,42,38,.22); border-radius: var(--radio); padding: 1.1rem; }
.vacio.ok { color: var(--verde); }

/* ── Ficha ───────────────────────────────────────── */
.ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem 1.25rem; background: var(--tarjeta);
  border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.15rem 1.25rem; margin: 0; box-shadow: var(--sombra); }
.ficha div { min-width: 0; }
.ficha dt { font-size: .76rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ficha dd { margin: .1rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.secciones { display: flex; gap: .4rem; flex-wrap: wrap; margin: .75rem 0; }
.secciones a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 1rem; border-radius: 999px;
  background: var(--tarjeta); border: 1px solid var(--linea); text-decoration: none; color: var(--carbon); font-size: .92rem; font-weight: 500; }
.secciones a:hover { border-color: var(--bronce); }
.secciones a[aria-current="page"] { background: var(--olivo); border-color: var(--olivo); color: #fff; }
@media (max-width: 759px) {
  .secciones { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -1.25rem; margin-right: -1.25rem; padding: 0 1.25rem; }
  .secciones a { flex: none; }
}
section[id] { scroll-margin-top: 90px; }
@media (min-width: 1100px) { section[id] { scroll-margin-top: 1rem; } }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } }

/* ── Entrar ──────────────────────────────────────── */
.sin-menu .cabecera { background: transparent; color: var(--carbon); position: static; justify-content: center; padding-top: max(2.5rem, env(safe-area-inset-top)); }
.sin-menu .marca { color: var(--carbon); }
.sin-menu .marca img { width: 44px; height: 44px; border-radius: 12px; }
.sin-menu .marca .rotulo { font-size: 1.4rem; }
.acceso { max-width: 440px; margin: 1.5rem auto; }
.acceso h1 { text-align: center; }
.acceso > .sub { text-align: center; margin-bottom: 1rem; }
.entrar-os { margin: 1.25rem 0 .5rem; display: flex; flex-direction: column; gap: .6rem; }
.entrar-os .sub { text-align: center; font-size: .9rem; }

.pie { color: var(--tenue); font-size: .85rem; margin-top: 2rem; }
details.plegable { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: .25rem 1.1rem; margin: .85rem 0; }
details.plegable summary { min-height: var(--toque); display: flex; align-items: center; cursor: pointer; font-weight: 600; }
details.plegable[open] { padding-bottom: 1rem; }
details.plegable .formulario { box-shadow: none; border-style: dashed; }
.filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.25rem; }
.filtros .campo { min-width: 170px; }
code.llave { display: block; word-break: break-all; background: var(--olivo); color: #F6E7C1; padding: 1rem; border-radius: var(--radio-chico); font-size: 1rem; }
.odoo h2 { margin-top: 2.1rem; }

/* Utilidades (la CSP no admite style="" en línea) */
.ficha .completo { grid-column: 1 / -1; }
.sin-margen { margin-top: 0; }
.separado { margin-top: 1rem; }
.rejilla.una { grid-template-columns: 1fr; }
.campo.opcion { flex-direction: row; align-items: center; gap: .6rem; }
.opcion input[type="checkbox"], .opcion input[type="radio"] { width: 22px; height: 22px; min-height: 0; flex: none; }

@media print {
  body.con-menu { padding-left: 0; }
  .cabecera, .botones, details.plegable, .filtros, .secciones { display: none !important; }
  .tabla-envoltura, .ficha, .cifra, .formulario { box-shadow: none; }
}

/* Volver a Botánica OS (17 oct 2026): siempre arriba del menú, sin cerrar la sesión. */
.volver-os { display: flex; align-items: center; gap: .4rem; min-height: var(--toque, 44px); margin: 0 0 .5rem; padding: 0 .85rem;
  border-radius: var(--radio-chico, 8px); background: var(--mostaza, #d9b44a); color: var(--olivo, #2e3325) !important; font-weight: 700; text-decoration: none; }
.volver-os:hover, .volver-os:focus-visible { filter: brightness(1.06); outline: 2px solid #fff; outline-offset: 2px; }
/* «← Volver a Módulos» fuera del menú desplegable (17 oct 2026): en escritorio queda entre la
   marca y «Inicio»; en iPad vertical junto a la marca; en el teléfono, renglón propio bajo la barra. */
@media (max-width: 1099px) {
  .cabecera .volver-os { margin: 0; padding: 0 .8rem; font-size: .95rem; white-space: nowrap; }
  .menu { order: 3; }
}
@media (max-width: 759px) {
  .cabecera .volver-os { order: 2; flex-basis: 100%; justify-content: center; }
}