:root {
  /* Paleta EKKO GROUP: negro, verde y dorado */
  --fondo: #f7f7f1; --panel: #fff; --borde: #e0e0d6; --texto: #161616; --suave: #6b6b62;
  --negro: #0b0b0b; --verde: #60d038; --dorado: #cdb66a;
  --primario: #60d038; --primario-osc: #2c7d16; --acento: #e7f6df; --alerta: #c0392b;
  --ambar: #b08d2e; --sombra: 0 1px 3px rgba(0, 0, 0, .12);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.45 "Segoe UI", system-ui, sans-serif; color: var(--texto); background: var(--fondo); display: flex; flex-direction: column; }
h2 { margin: 0; font-size: 17px; }
.oculto { display: none !important; }

.barra { display: flex; align-items: center; gap: 18px; padding: 0 18px; height: 58px; background: var(--negro); color: #fff; flex: none; border-top: 3px solid var(--dorado); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.marca { font-weight: 600; font-size: 13px; display: flex; gap: 12px; align-items: center; white-space: nowrap; color: var(--dorado); text-transform: uppercase; letter-spacing: .08em; }
.logo { height: 34px; width: auto; display: block; }
#nav { display: flex; gap: 2px; flex: 1; height: 100%; }
#nav button { background: none; border: 0; color: rgba(255,255,255,.72); font: inherit; padding: 0 14px; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
#nav { overflow-x: auto; scrollbar-width: none; }
#nav button:hover { color: #fff; }
#nav button.activo { color: var(--verde); border-bottom-color: var(--verde); font-weight: 600; }
.acciones { display: flex; gap: 8px; }

.btn { font: inherit; border: 1px solid var(--borde); background: #fff; color: var(--texto); padding: 6px 12px; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { background: #f1f4f3; }
.btn.primario { background: var(--verde); border-color: var(--verde); color: var(--negro); font-weight: 600; }
.barra .btn.primario { background: var(--verde); color: var(--negro); border-color: var(--verde); }
.btn.primario:hover { filter: brightness(1.08); }
.btn.peligro { color: var(--alerta); border-color: #e6c3be; }
.btn.icono { padding: 6px 9px; }
.barra .btn.icono { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn:disabled { opacity: .5; cursor: default; }

main { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px; }
input, select, textarea { font: inherit; color: inherit; border: 1px solid var(--borde); border-radius: 6px; padding: 6px 8px; background: #fff; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid #b7e8a3; border-color: var(--primario-osc); }
textarea { resize: vertical; }

/* Tablero */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 10px 14px; box-shadow: var(--sombra); }
.kpi { border-left: 4px solid var(--dorado); }
.kpi b { display: block; font-size: 24px; font-family: "Arial Black", Arial, sans-serif; }
.columna .mas { width: 100%; justify-content: center; }
h2, .columna h3 { font-family: "Arial Black", Arial, sans-serif; }
.kpi span { color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.kpi.alerta b { color: var(--alerta); }
.tablero { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; }
.columna { flex: 1 0 215px; max-width: 300px; background: #ecece3; border-radius: 8px; padding: 8px; min-height: 160px; }
.columna.sobre { outline: 2px dashed var(--primario); background: var(--acento); }
.columna h3 { margin: 2px 4px 8px; font-size: 13px; display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .04em; color: #3c4b45; }
.columna h3 i { font-style: normal; background: #fff; border-radius: 10px; padding: 0 8px; color: var(--suave); }
.tarjeta { background: #fff; border-radius: 6px; padding: 9px 10px; margin-bottom: 8px; box-shadow: var(--sombra); cursor: pointer; border-left: 4px solid #b9c7c2; }
.tarjeta:hover { box-shadow: 0 2px 8px rgba(20,40,35,.2); }
.tarjeta.p-Alta { border-left-color: var(--ambar); }
.tarjeta.p-Urgente { border-left-color: var(--alerta); }
.tarjeta.p-Baja { border-left-color: #cfd8d4; }
.tarjeta .num { font-size: 11px; color: var(--suave); display: flex; justify-content: space-between; }
.tarjeta .tit { font-weight: 600; margin: 2px 0; overflow-wrap: anywhere; }
.tarjeta .cli { color: var(--suave); font-size: 13px; }
.tarjeta .pie { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; gap: 6px; }
.chip { display: inline-block; background: var(--acento); color: var(--primario-osc); border-radius: 10px; padding: 1px 8px; font-size: 12px; white-space: nowrap; }
.chip.oro { background: #f3ecd3; color: #6e5a17; }
.chip.gris { background: #eceff0; color: #4b5a55; }
.chip.rojo { background: #fbe9e7; color: var(--alerta); }
.chip.verde { background: #e1f4e6; color: #1e7a3a; }
.rojo-txt { color: var(--alerta); font-weight: 600; }

/* Listas */
.herramientas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.herramientas input, .herramientas select { width: auto; }
.herramientas .crece { flex: 1; min-width: 180px; }
.herramientas label { display: flex; align-items: center; gap: 5px; color: var(--suave); white-space: nowrap; }
.herramientas label input[type=checkbox] { width: auto; }
.tabla-caja { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; overflow: auto; box-shadow: var(--sombra); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #edf0ef; vertical-align: top; }
th { background: #f7f9f8; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); position: sticky; top: 0; white-space: nowrap; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #f5faf8; }
td:first-child { white-space: nowrap; }
td.n, th.n { text-align: right; white-space: nowrap; }
tfoot td { font-weight: 600; background: #f7f9f8; }
.vacio { text-align: center; color: var(--suave); padding: 40px 20px; }
.resumen { color: var(--suave); margin: 8px 2px; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(15, 30, 25, .45); display: flex; align-items: flex-start; justify-content: center; padding: 30px 14px; overflow: auto; z-index: 20; }
.dialogo { background: #fff; border-radius: 10px; width: 100%; max-width: 860px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.dialogo.chico { max-width: 480px; }
.dlg-cab { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--borde); }
.dlg-cuerpo { padding: 16px 18px; }
.dlg-pie { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--borde); background: #f9fbfa; border-radius: 0 0 10px 10px; }
.dlg-pie .izq { margin-right: auto; }
.rejilla { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 12px; }
.campo { grid-column: span 2; display: flex; flex-direction: column; gap: 3px; }
.campo > span { font-size: 12px; color: var(--suave); }
.campo.a3 { grid-column: span 3; } .campo.a4 { grid-column: span 4; } .campo.a6 { grid-column: span 6; }
.seccion { grid-column: span 6; font-weight: 600; color: var(--primario-osc); border-bottom: 1px solid var(--borde); padding-bottom: 3px; margin-top: 6px; }
.actividad { grid-column: span 6; }
.actividad ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 220px; overflow: auto; }
.actividad li { padding: 6px 0; border-bottom: 1px solid #edf0ef; white-space: pre-wrap; overflow-wrap: anywhere; }
.actividad li small { color: var(--suave); display: block; }
.fila { display: flex; gap: 8px; }
@media (max-width: 700px) { .campo, .campo.a3, .campo.a4 { grid-column: span 6; } .marca #oficina { display: none; } }

/* Importar */
.importar { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; height: 100%; }
.ayuda { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 18px 22px; box-shadow: var(--sombra); }
.ayuda ol { padding-left: 20px; } .ayuda li { margin: 4px 0; }
.chat { flex: 1; min-height: 200px; overflow: auto; background: #e7ece4; border: 1px solid var(--borde); border-radius: 8px; padding: 10px 14px; }
.dia { text-align: center; margin: 10px 0 6px; }
.dia span { background: #fff; border-radius: 8px; padding: 2px 10px; font-size: 12px; color: var(--suave); box-shadow: var(--sombra); }
.msj { max-width: 78%; background: #fff; border-radius: 8px; padding: 6px 10px; margin: 3px 0; box-shadow: var(--sombra); cursor: pointer; border: 2px solid transparent; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.msj.mio { margin-left: auto; background: #dcf5d3; }
.msj.pedido { border-left: 4px solid var(--ambar); }
.msj.sel { border-color: var(--primario-osc); background: #dff3d6; }
.msj.importado { opacity: .55; }
.msj .cab { font-size: 12px; color: var(--suave); display: flex; gap: 8px; justify-content: space-between; }
.msj .cab b { color: var(--primario-osc); }
.msj .marca-imp { font-size: 11px; color: #1e7a3a; }
.barra-sel { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; margin-top: 10px; box-shadow: var(--sombra); flex-wrap: wrap; }
.barra-sel .crece { flex: 1; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #22302b; color: #fff; padding: 9px 16px; border-radius: 8px; z-index: 40; box-shadow: 0 4px 16px rgba(0,0,0,.3); max-width: 90vw; }
.toast.error { background: var(--alerta); }

/* Semáforo del tablero */
.luz { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: #b5b5ab; }
.luz.rojo { background: #d93025; } .luz.amarillo { background: #f2b600; } .luz.verde { background: #2fa84f; } .luz.listo { background: #9aa39a; }
.tarjeta.s-rojo { border-left-color: #d93025; background: #fff6f5; }
.tarjeta.s-amarillo { border-left-color: #f2b600; background: #fffbea; }
.tarjeta.s-verde { border-left-color: #2fa84f; }
.tarjeta.s-gris { border-left-color: #b5b5ab; }
.tarjeta.s-listo { border-left-color: #9aa39a; opacity: .85; }
.plazo { margin-top: 5px; font-size: 12px; font-weight: 600; }
.plazo.rojo { color: #b3261e; } .plazo.amarillo { color: #8a6500; } .plazo.verde { color: #1e7a3a; }
.semaforo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.sem-tit { color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.sem-btn { font: inherit; font-size: 13px; background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 3px 12px; cursor: pointer; }
.sem-btn:hover { background: #f1f1ea; }
.sem-btn.activo { border-color: var(--negro); box-shadow: inset 0 0 0 1px var(--negro); font-weight: 600; }

.btn.ojo { flex: none; font-size: 12px; padding: 6px 9px; }
.acceso .btn.ojo { grid-column: auto; padding: 6px 9px; }

/* Pantalla de acceso */
body.sin-sesion .barra { display: none; }
body.sin-sesion { background: var(--negro); }
.acceso { max-width: 400px; margin: 8vh auto 0; background: #fff; border-radius: 12px; padding: 26px 28px; border-top: 4px solid var(--dorado); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.acceso img { height: 46px; background: var(--negro); padding: 8px 14px; border-radius: 8px; display: block; margin-bottom: 16px; }
.acceso p { color: var(--suave); margin: 6px 0 16px; }
.acceso .btn { justify-content: center; grid-column: span 6; padding: 9px; }

/* Hoja de orden de trabajo (solo al imprimir) */
#impresion { display: none; }
.orden { font-size: 12px; color: #000; }
.orden header { display: flex; justify-content: space-between; align-items: center; background: #0b0b0b; color: #fff; padding: 12px 16px; border-top: 4px solid #cdb66a; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.orden-logo img { height: 44px; display: block; }
.orden-tit { text-align: right; }
.orden h1 { margin: 0; font: 16px "Arial Black", Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.orden-num { font-size: 18px; font-weight: 700; color: #60d038; }
.orden h2 { margin: 14px 0 8px; font-size: 16px; }
.orden table { border: 1px solid #bbb; }
.orden tbody { display: grid; grid-template-columns: 1fr 1fr; }
.orden tr { display: flex; border-bottom: 1px solid #ddd; cursor: default; }
.orden th { position: static; width: 42%; background: #f1f1ea; font-size: 10px; padding: 5px 8px; white-space: normal; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.orden td { flex: 1; padding: 5px 8px; border: 0; white-space: normal !important; overflow-wrap: anywhere; }
.orden section { margin-top: 12px; }
.orden h3 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid #60d038; padding-bottom: 2px; }
.orden p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.orden ul { margin: 0; padding-left: 16px; } .orden li { white-space: pre-wrap; overflow-wrap: anywhere; margin: 2px 0; }
.firmas { display: flex; gap: 60px; margin-top: 60px; break-inside: avoid; }
.firmas div { flex: 1; border-top: 1px solid #000; text-align: center; padding-top: 4px; }
.orden footer { margin-top: 16px; font-size: 10px; color: #666; text-align: right; }
@page { margin: 14mm; }
@media print {
  body.imprimiendo > *:not(#impresion) { display: none !important; }
  body.imprimiendo #impresion { display: block; }
  .barra, .herramientas, .modal, .toast { display: none !important; }
  body { background: #fff; display: block; } main { overflow: visible; padding: 0; }
  .tabla-caja { border: 0; box-shadow: none; overflow: visible; } th { position: static; }
}