/* ══ Logística NOMA · Manual de marca NOMA TINY HOUSE 2027 ═════════════════
   Paleta cerrada (verde-noma, arena, tierra, niebla), esquinas vivas, sin sombras.
   Los cuatro colores de categoría solo se usan para identificar gastos en gráficos
   y etiquetas (validados para daltonismo). */
:root{
  --verde:#5f7161; --verde-oscuro:#4c5c4e; --arena:#f7f4ec; --tierra:#4b3a22; --niebla:#c8d1d9;
  --blanco:#ffffff; --tierra-suave:#7a6a52; --linea:#e3ddcf; --rojo:#a2463f; --aviso:#efe9da;
  --cat-gasolina:#3f8a5c; --cat-dieta:#d9892b; --cat-hotel:#3b6fc4; --cat-peaje:#a8508f;
  --font-marca:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --font-texto:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; font-family:var(--font-texto); background:var(--arena); color:var(--tierra);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;}
a{color:var(--verde); font-weight:700;}
h1,h2,h3{font-family:var(--font-marca); color:var(--tierra); letter-spacing:-.01em;}
h1{font-size:22px; margin:4px 0 4px;}
h2{font-size:17px; margin:0 0 12px;}
h3{font-size:15px; margin:0 0 8px;}
.sub{color:var(--tierra-suave); margin:0 0 18px;}
.muted{color:var(--tierra-suave);}
.peq{font-size:13px;}

/* Cabecera */
.barra{background:var(--verde); color:var(--arena);}
.barra-in{max-width:1180px; margin:0 auto; padding:0 16px; display:flex; align-items:center;
  gap:18px; min-height:56px; flex-wrap:wrap;}
.marca{font-family:var(--font-marca); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:14px; color:var(--arena); text-decoration:none; white-space:nowrap;}
.marca span{font-weight:500; opacity:.8; letter-spacing:.04em;}
.menu{display:flex; gap:2px; flex-wrap:wrap; flex:1;}
.menu a{color:var(--arena); text-decoration:none; font-weight:600; font-size:14px; padding:8px 10px;}
.menu a.activo, .menu a:hover{background:var(--verde-oscuro);}
.menu .der{margin-left:auto;}

.contenedor{max-width:1180px; margin:0 auto; padding:20px 16px 70px;}
.estrecho{max-width:640px;}

/* Tarjetas y rejillas */
.tarjeta{background:var(--blanco); border:1px solid var(--linea); padding:18px; margin-bottom:16px;}
.tarjeta.plana{background:transparent; border:none; padding:0;}
.rejilla{display:grid; gap:16px;}
.r2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.r3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.cab-seccion{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.cab-seccion h2{margin:0;}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--linea); border:1px solid var(--linea); margin-bottom:16px;}
.kpi{background:var(--blanco); padding:14px 16px;}
@media (max-width:1000px){ .kpis{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .kpis{grid-template-columns:1fr 1fr;} }
.kpi .et{font-size:12.5px; color:var(--tierra-suave); font-weight:600;}
.kpi .valor{font-family:var(--font-marca); font-size:24px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums;}
.kpi .det{font-size:12.5px; color:var(--tierra-suave); margin-top:2px;}
.kpi.destacado{background:var(--verde); color:var(--arena);}
.kpi.destacado .et,.kpi.destacado .det{color:var(--niebla);}

/* Tablas */
.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
table{width:100%; border-collapse:collapse; font-size:14px;}
th{text-align:left; font-size:12.5px; color:var(--tierra-suave); font-weight:700; padding:8px 10px;
  border-bottom:1.5px solid var(--niebla); white-space:nowrap;}
td{padding:9px 10px; border-bottom:1px solid var(--linea); vertical-align:middle;}
td.n, th.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
tr.clic{cursor:pointer;} tr.clic:hover td{background:var(--arena);}
tfoot td{font-weight:800; border-top:1.5px solid var(--niebla); border-bottom:none;}

/* Formularios */
label{display:block; font-weight:700; margin:12px 0 5px; font-size:14px;}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=datetime-local],
input[type=search],select,textarea{
  width:100%; padding:11px 12px; border:1.5px solid var(--niebla); border-radius:0; background:var(--blanco);
  font-family:inherit; font-size:16px; color:var(--tierra); -webkit-appearance:none; appearance:none;}
select{background-image:linear-gradient(45deg,transparent 50%,var(--tierra) 50%),linear-gradient(135deg,var(--tierra) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:32px;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--verde); outline-offset:-1px;}
textarea{min-height:70px;}
.fila{display:grid; gap:12px; grid-template-columns:1fr 1fr;}
.fila3{display:grid; gap:12px; grid-template-columns:repeat(3,1fr);}
@media (max-width:560px){ .fila3{grid-template-columns:1fr 1fr;} }
.ayuda{font-size:12.5px; color:var(--tierra-suave); margin-top:4px;}

/* Botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--verde); color:var(--arena);
  border:1.5px solid var(--verde); border-radius:0; padding:11px 18px; font-family:var(--font-marca); font-weight:700;
  font-size:14px; cursor:pointer; text-decoration:none; line-height:1.2;}
.btn:hover{background:var(--verde-oscuro); border-color:var(--verde-oscuro);}
.btn.sec{background:transparent; color:var(--verde);}
.btn.sec:hover{background:var(--arena);}
.btn.peligro{background:transparent; color:var(--rojo); border-color:var(--rojo);}
.btn.mini{padding:6px 10px; font-size:12.5px;}
.btn.grande{width:100%; padding:16px; font-size:16px;}
.btn.enorme{width:100%; padding:22px 16px; font-size:18px;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}
.acciones{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}

/* Selector en botones (categoría, pagado por) */
.opciones{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
.opciones input{position:absolute; opacity:0; pointer-events:none;}
.opciones label{margin:0; border:1.5px solid var(--niebla); background:var(--blanco); padding:14px 10px; text-align:center;
  cursor:pointer; font-size:15px; display:flex; flex-direction:column; align-items:center; gap:4px;}
.opciones label .ico{font-size:22px; line-height:1;}
.opciones input:checked + label{border-color:var(--verde); background:var(--verde); color:var(--arena);}
.opciones input:focus-visible + label{outline:2px solid var(--tierra);}
.opciones.dos{grid-template-columns:1fr 1fr;}

/* Etiquetas */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:3px 8px;
  border:1px solid var(--niebla); background:var(--arena); white-space:nowrap;}
.chip .punto{width:9px; height:9px; display:inline-block;}
.chip.abierta{border-color:var(--verde); color:var(--verde);}
.chip.finalizada{color:var(--tierra-suave);}
.chip.pendiente{border-color:var(--cat-dieta); color:#8a5512;}

/* Mensajes */
.flash{background:var(--aviso); border-left:4px solid var(--verde); padding:11px 14px; margin-bottom:14px; font-size:14px;}
.aviso{background:var(--aviso); padding:12px 14px; font-size:14px; margin-bottom:14px;}

/* Hoja de ruta */
.hoja-lista{display:flex; flex-direction:column; gap:10px;}
.hoja-item{display:block; background:var(--blanco); border:1px solid var(--linea); padding:14px 16px; text-decoration:none; color:var(--tierra); font-weight:400;}
.hoja-item:hover{border-color:var(--verde);}
.hoja-item .t{font-family:var(--font-marca); font-weight:700; font-size:16px;}
.hoja-item .m{font-size:13px; color:var(--tierra-suave); margin-top:3px; display:flex; gap:12px; flex-wrap:wrap;}

.en-curso{border:2px solid var(--verde); background:var(--blanco); padding:16px; margin-bottom:12px; text-align:center;}
.en-curso .tipo{font-family:var(--font-marca); font-weight:700; font-size:18px;}
.en-curso .reloj{font-family:var(--font-marca); font-size:34px; font-weight:700; font-variant-numeric:tabular-nums; margin:4px 0;}
.botonera{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
@media (max-width:480px){ .botonera .btn.grande{padding:14px 4px; font-size:14px;} }
.resumen-horas{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); margin:14px 0;}
.resumen-horas div{background:var(--arena); padding:10px; text-align:center;}
.resumen-horas b{display:block; font-family:var(--font-marca); font-size:16px;}
.resumen-horas span{font-size:12px; color:var(--tierra-suave);}
@media (max-width:480px){ .resumen-horas{grid-template-columns:1fr 1fr;} }

.gasto-item{display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--linea); text-decoration:none; color:var(--tierra); font-weight:400;}
.gasto-item img{width:52px; height:52px; object-fit:cover; flex:none; border:1px solid var(--linea);}
.gasto-item .info{flex:1; min-width:0;}
.gasto-item .imp{font-family:var(--font-marca); font-weight:700; font-size:16px; white-space:nowrap;}

details.plegable summary{cursor:pointer; font-weight:700; color:var(--verde); padding:6px 0;}
.periodo-form{display:grid; grid-template-columns:1.2fr 1fr 1fr auto auto; gap:6px; align-items:center; padding:6px 0; border-bottom:1px solid var(--linea);}
.periodo-form select,.periodo-form input{padding:8px; font-size:14px;}
@media (max-width:640px){ .periodo-form{grid-template-columns:1fr 1fr;} .periodo-form select{grid-column:1/-1;} }

/* Foto del tiquet */
.foto-zona{border:2px dashed var(--niebla); background:var(--blanco); padding:18px; text-align:center;}
.foto-zona img{max-width:100%; max-height:360px; display:block; margin:0 auto 10px;}

/* Dashboard */
.filtros{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; background:var(--blanco);
  border:1px solid var(--linea); padding:12px;}
.filtros label{margin:0 0 4px; font-size:12.5px;}
.filtros > div{min-width:140px; flex:1;}
.filtros select,.filtros input{padding:8px 10px; font-size:14px;}
.grafico{position:relative; height:280px;}
.leyenda{display:flex; gap:14px; flex-wrap:wrap; font-size:13px; margin-bottom:10px;}
.leyenda span{display:inline-flex; align-items:center; gap:6px;}
.leyenda i{width:10px; height:10px; display:inline-block;}
.barras-cat{display:flex; flex-direction:column; gap:10px;}
.barra-cat .linea1{display:flex; justify-content:space-between; font-size:14px; margin-bottom:4px;}
.barra-cat .pista{background:var(--arena); height:12px;}
.barra-cat .relleno{height:12px; border-radius:0 4px 4px 0;}
.split{display:flex; height:14px; gap:2px; margin:8px 0 6px;}
.split div{height:14px;}

.login-caja{max-width:380px; margin:10vh auto 0; padding:0 16px;}
.login-caja .marca-grande{font-family:var(--font-marca); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--verde); font-size:18px; text-align:center;}
.login-caja .marca-grande span{display:block; font-weight:500; letter-spacing:.06em; font-size:14px; color:var(--tierra-suave); margin-top:2px;}

.solo-movil{display:none;}
@media (max-width:640px){
  .solo-movil{display:block;}
  .oculto-movil{display:none;}
  h1{font-size:20px;}
  .kpi .valor{font-size:20px;}
}
td:first-child{white-space:nowrap;}

@media (max-width:640px){
  .barra-in{flex-direction:column; align-items:stretch; gap:0; padding:8px 0 0;}
  .marca{padding:4px 16px 6px;}
  .menu{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 8px;}
  .menu a{white-space:nowrap;}
  .menu .der{margin-left:0;}
}
[hidden]{display:none !important;}

.lectura{font-size:13.5px; margin-top:10px; padding:8px 10px; background:var(--arena);}
.lectura.ok{color:var(--verde); font-weight:700;}
.lectura.mal{color:var(--rojo);}

.jornada{border-bottom:1px solid var(--linea); padding:10px 0;}
.jornada summary, .jornada.fija{display:flex; flex-direction:column; gap:2px; cursor:pointer; list-style:none;}
.jornada.fija{cursor:default;}
.jornada summary::-webkit-details-marker{display:none;}
.jornada summary::after{content:"Editar"; font-size:12.5px; color:var(--verde); font-weight:700;}
.jornada[open] summary::after{content:"Cerrar";}
.nueva-jornada{margin-top:16px; padding-top:14px; border-top:1.5px solid var(--niebla);}
.nueva-jornada h3{margin:0;}
input[type=time]{width:100%; padding:11px 12px; border:1.5px solid var(--niebla); border-radius:0; background:var(--blanco); font-family:inherit; font-size:16px; color:var(--tierra); -webkit-appearance:none; appearance:none;}
.destinos{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.destinos input{position:absolute; opacity:0; pointer-events:none;}
.destinos label{margin:0; border:1.5px solid var(--niebla); background:var(--blanco); padding:14px 12px; cursor:pointer; font-size:15px; line-height:1.25;}
.destinos label small{display:block; color:var(--tierra-suave); font-weight:400; margin-top:2px;}
.destinos input:checked + label{border-color:var(--verde); background:var(--verde); color:var(--arena);}
.destinos input:checked + label small{color:var(--niebla);}
.destinos input:focus-visible + label{outline:2px solid var(--tierra);}
.viaje-curso{display:block; background:var(--verde); color:var(--arena); padding:18px; text-decoration:none; margin-bottom:12px;}
.viaje-curso .t{font-family:var(--font-marca); font-weight:700; font-size:18px;}
.viaje-curso .m{font-size:13.5px; color:var(--niebla); font-weight:400; margin-top:4px;}