/* Inhumario TMS — estilo tipo Odoo con la identidad de Inhumario.
   Paleta de marca: tinta #111111, coral #FF8080, gris #969698. Fuente Helvetica. */
:root{
  --ink:#111111; --ink-2:#1F1F1F; --ink-3:#2C2C2E; --coral:#FF8080; --coral-d:#E96A6A; --coral-s:#FFF1F1;
  --gris:#969698; --mute:#6B6B70; --linea:#E5E5E5; --linea-2:#EFEFF1; --fondo:#F5F5F6; --card:#FFFFFF;
  --ok:#1F7A50; --ok-s:#E4F3EB; --warn:#B87400; --warn-s:#FFF4E0; --bad:#B23A3A; --bad-s:#FDECEC;
  --info:#2D6CDF; --info-s:#E8F0FE; --violeta:#5B4B8A; --violeta-s:#EFEBF8;
  --topbar:46px; --menubar:40px;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background:var(--fondo);color:var(--ink);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--coral-d)}
svg{display:block}

/* ---------------------------------------------------------------- topbar */
.topbar{height:var(--topbar);background:var(--ink);color:#fff;display:flex;align-items:center;gap:6px;padding:0 10px;position:sticky;top:0;z-index:60}
.topbar .apps{background:none;border:0;color:#fff;cursor:pointer;padding:8px;border-radius:6px;display:flex;align-items:center}
.topbar .apps:hover{background:var(--ink-3)}
.topbar .marca{display:flex;align-items:center;gap:9px;padding:0 6px}
.topbar .marca img{height:17px;width:auto;display:block}
.topbar .mod{color:var(--coral);font-weight:700;letter-spacing:.01em;font-size:14.5px;white-space:nowrap}
.topbar .sep{width:1px;height:20px;background:#3A3A3D;margin:0 4px}
.topbar nav{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{color:#D8D8DA;padding:6px 10px;border-radius:6px;font-size:13.5px;white-space:nowrap}
.topbar nav a:hover{background:var(--ink-3);color:#fff}
.topbar nav a.activa{background:var(--ink-3);color:#fff;font-weight:600}
.topbar .dcha{display:flex;align-items:center;gap:4px;margin-left:auto}
.topbar .empresa{color:#9C9CA0;font-size:12.5px;padding:0 8px;white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis}
.topbar .icono-btn{color:#D8D8DA;padding:7px;border-radius:6px;display:flex}
.topbar .icono-btn:hover{background:var(--ink-3);color:#fff}

/* ---------------------------------------------------------------- áreas (nivel 1) */
.rejilla-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.area-cuadro{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:18px 18px 15px;display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden}
.area-cuadro:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--ink)}
.area-cuadro.c-coral:before{background:var(--coral)} .area-cuadro.c-info:before{background:var(--info)}
.area-cuadro.c-violeta:before{background:var(--violeta)} .area-cuadro.c-ok:before{background:var(--ok)}
.area-cuadro:hover{border-color:var(--coral);box-shadow:0 8px 20px rgba(0,0,0,.07)}
.area-cuadro .ico{width:52px;height:52px;border-radius:14px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center}
.area-cuadro:hover .ico{background:var(--coral);color:var(--ink)}
.area-cuadro b{font-size:17px;margin-top:4px}
.area-cuadro small{color:var(--mute);font-size:12.8px;line-height:1.35}
.area-cuadro .aviso-n{align-self:flex-start;background:var(--coral-s);border:1px solid var(--coral);color:#8C2B2B;border-radius:999px;font-size:11.8px;font-weight:700;padding:2px 9px}
.area-cuadro .pantallas{color:var(--gris);font-size:11.8px;border-top:1px solid var(--linea-2);padding-top:8px;margin-top:auto}

/* ---------------------------------------------------------------- pantallas del área (nivel 2) */
.rejilla-pantallas{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:12px}
.pantalla-cuadro{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--linea);border-radius:13px;background:#fff}
.pantalla-cuadro:hover{border-color:var(--coral);background:var(--coral-s)}
.pantalla-cuadro .ico{width:44px;height:44px;border-radius:12px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pantalla-cuadro:hover .ico{background:var(--coral);color:var(--ink)}
.pantalla-cuadro .txt b{display:block;font-size:14.5px}
.pantalla-cuadro .txt small{color:var(--mute);font-size:12.2px;line-height:1.3;display:block}
.pantalla-cuadro.config .ico{background:var(--gris)}

/* ---------------------------------------------------------------- pantallas de configuración */
.ajustes{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:15px}
.ajuste{display:flex;flex-direction:column;gap:4px}
.ajuste.ancho{grid-column:1/-1}
.ajuste label{font-size:12.5px;font-weight:600;color:var(--ink-2);text-transform:none;letter-spacing:0}
.ajuste small{color:var(--mute);font-size:12px;line-height:1.35}
.ajuste textarea{font-family:'SFMono-Regular',Menlo,monospace;font-size:12.5px;padding:9px 11px;border:1px solid var(--linea);border-radius:8px;resize:vertical}
.interruptor{display:flex;align-items:center;gap:8px;font-weight:400}
.interruptor input{width:18px;height:18px}

/* ---------------------------------------------------------------- fichas (la lista en móvil) */
.fichas{display:none;gap:10px}
.fichas-titulo{display:none;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:6px 0 2px}
.ficha{display:block;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:12px 13px}
.ficha:active{background:var(--fondo)}
.ficha-cab{display:flex;justify-content:space-between;align-items:baseline;gap:9px}
.ficha-cab b{font-size:14.5px}
.ficha-linea{font-size:13.2px;color:var(--ink-2);margin-top:4px}
.ficha-pie{display:flex;justify-content:space-between;align-items:baseline;gap:9px;margin-top:7px}
.ficha-meta{font-size:12.2px;color:var(--mute)}
.ficha-importe{font-size:14.5px;font-weight:700}

/* estos dos solo existen en móvil */
.barra-movil{display:none}
.abrir-filtros{display:none}

/* ---------------------------------------------------------------- control panel (breadcrumb + acciones) */
.cp{background:#fff;border-bottom:1px solid var(--linea);padding:9px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;top:var(--topbar);z-index:40}
.cp .miga{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mute);min-width:0}
.cp .miga b{color:var(--ink);font-size:16px;font-weight:700}
.cp .miga a{color:var(--mute)}
.cp .miga .flecha{color:var(--gris)}
.cp .acciones{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cp .buscador{margin-left:auto;display:flex;align-items:center;gap:6px;background:var(--fondo);border:1px solid var(--linea);border-radius:8px;padding:5px 9px;min-width:190px}
.cp .buscador input{border:0;background:none;outline:none;width:100%;font-size:13px;font-family:inherit}
main{padding:16px;max-width:1500px;margin:0 auto}
main.full{max-width:none}

/* ---------------------------------------------------------------- botones */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--coral);color:var(--ink);border:1px solid var(--coral);border-radius:7px;padding:7px 14px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn:hover{background:var(--coral-d);border-color:var(--coral-d);color:var(--ink)}
.btn.sec{background:#fff;color:var(--ink);border-color:var(--linea);font-weight:600}
.btn.sec:hover{background:var(--fondo);color:var(--ink)}
.btn.oscuro{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.oscuro:hover{background:var(--ink-3);color:#fff}
.btn.mini{padding:4px 9px;font-size:12.5px}
.btn.peligro{background:#fff;border-color:var(--bad);color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------------------------------------------------------------- tarjetas y kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:13px 15px}
.kpi .v{font-size:1.65rem;font-weight:700;letter-spacing:-.01em}
.kpi .l{color:var(--mute);font-size:12.5px}
.kpi.ok .v{color:var(--ok)} .kpi.warn .v{color:var(--warn)} .kpi.bad .v{color:var(--bad)} .kpi.coral .v{color:var(--coral-d)}
.card{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:16px 18px;margin-bottom:16px}
.card>h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--linea-2)}
.card h3{font-size:13.5px;margin:14px 0 7px;color:var(--ink-2)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.dos-70{display:grid;grid-template-columns:1.9fr 1fr;gap:16px;align-items:start}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.uno{display:grid;grid-template-columns:1fr;gap:16px}      /* una columna: la demo simplificada */
/* sin esto, una tabla ancha dentro de una columna estira la rejilla y arrastra la página */
.dos>*,.dos-70>*,.tres>*,.kpis>*{min-width:0}
.card,.lista{min-width:0}

/* ---------------------------------------------------------------- listas */
.lista{background:#fff;border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.tabla-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.2px}
th{background:#FAFAFB;color:var(--mute);text-align:left;padding:9px 11px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border-bottom:1px solid var(--linea)}
td{padding:9px 11px;border-bottom:1px solid var(--linea-2);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#FFFBFB}
tr.fila{display:table-row;cursor:pointer}
.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.vacio{padding:34px 18px;text-align:center;color:var(--mute)}
.vacio b{display:block;color:var(--ink);margin-bottom:4px;font-size:15px}

/* ---------------------------------------------------------------- badges y barras */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;letter-spacing:.01em}
.b-borrador{background:var(--linea-2);color:#5A5A5E}
.b-disponible{background:var(--warn-s);color:var(--warn)}
.b-asignado{background:var(--info-s);color:var(--info)}
.b-en_ruta{background:var(--violeta-s);color:var(--violeta)}
.b-en_campa{background:var(--coral-s);color:var(--coral-d)}
.b-entregado{background:var(--ok-s);color:var(--ok)}
.b-facturado,.b-cobrada,.b-pagada{background:var(--ok-s);color:var(--ok)}
.b-cancelado,.b-anulada,.b-vencida{background:var(--bad-s);color:var(--bad)}
.b-emitida,.b-prefactura{background:var(--coral-s);color:var(--coral-d)}
.b-directo{background:var(--violeta-s);color:var(--violeta)}
.b-compania{background:var(--info-s);color:var(--info)}
.b-autonomo{background:var(--warn-s);color:var(--warn)}
.b-empresa{background:var(--ok-s);color:var(--ok)}
.barra{background:var(--linea-2);border-radius:999px;height:8px;overflow:hidden;min-width:80px;display:inline-block;vertical-align:middle}
.barra i{display:block;height:100%;background:var(--ok)}
.barra i.media{background:var(--coral)} .barra i.baja{background:var(--gris)}

/* statusbar tipo Odoo */
.etapas{display:flex;gap:2px;flex-wrap:wrap}
.etapas span{padding:4px 12px;font-size:12px;font-weight:700;background:#fff;border:1px solid var(--linea);color:var(--gris)}
.etapas span:first-child{border-radius:7px 0 0 7px}
.etapas span:last-child{border-radius:0 7px 7px 0}
.etapas span.act{background:var(--ink);border-color:var(--ink);color:#fff}
.etapas span.hecha{color:var(--ink-2)}

/* ---------------------------------------------------------------- formularios */
label{display:block;font-size:12px;font-weight:700;color:var(--mute);margin:11px 0 4px;text-transform:uppercase;letter-spacing:.03em}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--linea);border-radius:8px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--coral);border-color:var(--coral)}
input[type=checkbox]{width:auto}
.fila{display:flex;gap:12px;flex-wrap:wrap}
.fila>div{flex:1;min-width:145px}
.filtros{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filtros label{margin:0 0 3px}
.filtros input,.filtros select{width:auto;min-width:130px}
.campo{margin-bottom:10px}
.campo .v{font-size:13.8px}
.campo .v b{font-weight:700}
.grupo-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 22px}
.nota{font-size:12.5px;color:var(--mute)}
.aviso-ok{background:var(--ok-s);border:1px solid #BFE3CF;color:#14603C;padding:10px 14px;border-radius:9px;margin-bottom:14px;font-size:13.5px}
.aviso-err{background:var(--bad-s);border:1px solid #F0C4C4;color:#8C2B2B;padding:10px 14px;border-radius:9px;margin-bottom:14px;font-size:13.5px}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(205px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
.col{background:#EDEDEF;border-radius:11px;padding:10px;min-height:120px}
.col h4{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:9px;display:flex;justify-content:space-between}
.tarjeta{background:#fff;border:1px solid var(--linea);border-left:3px solid var(--coral);border-radius:9px;padding:9px 11px;margin-bottom:8px;font-size:12.8px;display:block}
.tarjeta b{display:block;color:var(--ink)}
.tarjeta small{color:var(--mute)}

/* sugerencias del motor */
.sug{border:1px solid var(--linea);border-radius:11px;padding:11px 13px;margin-bottom:9px;display:flex;gap:13px;align-items:flex-start;background:#fff}
.sug .puntos{font-size:1.35rem;font-weight:700;min-width:58px;font-variant-numeric:tabular-nums}
.sug .puntos.neg{color:var(--bad)}
.sug form{flex-shrink:0}
.sug ul{margin:5px 0 0 16px;font-size:12.4px;color:var(--mute)}
.sug.top{border-color:var(--coral);background:var(--coral-s)}

/* chatter / eventos */
.eventos{list-style:none}
.eventos li{font-size:12.8px;padding:6px 0;border-bottom:1px dashed var(--linea)}
.eventos li:last-child{border:0}
.eventos .ts{color:var(--gris);font-family:ui-monospace,Menlo,monospace;font-size:11.6px;margin-right:7px}

/* doc */
.doc h2{margin-top:18px;font-size:15px;text-transform:none;letter-spacing:0;color:var(--ink);border:0;padding:0}
.doc p,.doc li{font-size:13.6px;margin-bottom:6px}
.doc ul{margin-left:18px}
.doc code{background:var(--fondo);padding:1px 5px;border-radius:4px;font-size:12.6px}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink);padding:20px}
.login{background:#fff;border-radius:16px;padding:30px 28px;max-width:392px;width:100%;box-shadow:0 22px 60px rgba(0,0,0,.4)}
.login img{height:24px;margin-bottom:22px}
.login h1{font-size:19px;margin-bottom:5px}
.login .nota{margin-bottom:16px}
.login button{width:100%;justify-content:center;margin-top:16px}

/* ---------------------------------------------------------------- app móvil del chofer */
.m-body{background:var(--ink);min-height:100vh}
.m-top{background:var(--ink);color:#fff;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.m-top img{height:16px}
.m-top .chofer{font-size:12.5px;color:#9C9CA0}
.m-wrap{background:var(--fondo);min-height:calc(100vh - 44px);border-radius:16px 16px 0 0;padding:14px 13px 70px}
.m-card{background:#fff;border:1px solid var(--linea);border-radius:13px;padding:13px;margin-bottom:11px}
.m-card .ref{font-weight:700;font-size:14.5px}
.m-card .ruta{font-size:14px;margin:7px 0}
.m-card .ruta b{display:block}
.m-card .meta{font-size:12.4px;color:var(--mute)}
.m-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.m-acciones .btn{flex:1;justify-content:center;min-width:120px}
.m-vacio{text-align:center;padding:50px 16px;color:var(--mute)}
.firma-caja{border:1px dashed var(--linea);border-radius:10px;background:#fff;touch-action:none}

@media (max-width:900px){
  .dos,.dos-70,.tres{grid-template-columns:1fr}
  .topbar .empresa{display:none}
  .topbar .marca img{height:15px}
  .cp{position:static}
  main{padding:12px}
  .kanban{grid-template-columns:repeat(5,235px)}
}

/* ---------------------------------------------------------------- móvil: se navega por pantallas
   y las listas se ven como cuadraditos, no como tablas que se salen de la pantalla. */
@media (max-width:760px){
  /* la tira de menús del área no cabe: se navega por la pantalla del área */
  .topbar nav{display:none}
  .topbar .sep{display:none}
  .topbar .mod{font-size:14px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .dcha .icono-btn[title="Áreas"]{display:none}

  /* Las listas convertidas muestran sus fichas y esconden la tabla. Cualquier tabla que quede
     (líneas de una factura, casillas del 303) se desplaza por dentro, nunca arrastra la página. */
  table{display:block;overflow-x:auto}
  .tabla-scroll:has(+ .fichas),table:has(+ .fichas),.solo-escritorio{display:none}
  .fichas{display:grid}
  .fichas-titulo{display:block}
  .col-escritorio{display:none}

  main{padding:11px 11px 74px}
  .card{padding:13px 13px;border-radius:11px}
  .kpis{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
  .kpi{padding:11px 12px;border-radius:11px}
  .kpi .v{font-size:1.32rem}
  .kpi .l{font-size:11.8px}
  .rejilla-areas,.rejilla-pantallas{grid-template-columns:1fr 1fr;gap:10px}
  .area-cuadro{padding:14px 13px 12px}
  .area-cuadro .ico{width:42px;height:42px;border-radius:12px}
  .area-cuadro b{font-size:15px}
  .area-cuadro small,.area-cuadro .pantallas{display:none}
  .pantalla-cuadro{flex-direction:column;align-items:flex-start;gap:8px;padding:13px 12px}
  .pantalla-cuadro .txt small{display:none}
  .ajustes{grid-template-columns:1fr}

  /* la barra de acciones y los filtros no se comen la pantalla */
  .cp{padding:8px 11px;gap:8px}
  .cp .miga b{font-size:15px}
  .cp .acciones{width:100%}
  .cp .acciones .btn{flex:1;justify-content:center}
  .cp .buscador{min-width:0;width:100%;margin-left:0}
  .filtros{display:none}
  .filtros.abierto{display:block}
  .filtros .fila{flex-direction:column;align-items:stretch}
  .abrir-filtros{display:inline-flex}
  .fila{flex-direction:column;align-items:stretch;gap:9px}
  .fila>div{width:100%}
  input,select,textarea,.btn{font-size:15px}      /* 15px evita que iOS haga zoom al tocar */
  .btn{padding:9px 14px}

  main>.nota:last-of-type span{display:none}      /* el aviso legal completo queda en el login */

  /* barra inferior: áreas, área actual e inicio siempre a un dedo */
  .barra-movil{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--ink);z-index:70;
    padding:5px 0 calc(5px + env(safe-area-inset-bottom));justify-content:space-around}
  .barra-movil a{color:#D8D8DA;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;padding:3px 10px}
  .barra-movil a span{white-space:nowrap;max-width:88px;overflow:hidden;text-overflow:ellipsis}
}
@media print{.topbar,.cp,.barra-movil{display:none}}

/* alias de compatibilidad con plantillas previas */
.btn.acento{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.btn.gris{background:#fff;color:var(--ink);border-color:var(--linea);font-weight:600}
.btn.gris:hover{background:var(--fondo)}
tr.fila-link{cursor:pointer}
.rejilla-apps .app .cont{margin-left:auto}

/* aviso de cuenta de demostración */
.aviso-demo{background:var(--coral);color:var(--ink);font-weight:700;font-size:11.5px;padding:3px 9px;border-radius:999px;white-space:nowrap}