/* ==========================================================================
   Sistema de tickets de mantenimiento - Milo 07/10/2026
   Claro, limpio y legible en celular (la mitad de los tickets salen del celular).
   ========================================================================== */
:root{
  --acento:#1f5fbf; --acento-oscuro:#164a96; --tinta:#1c2430; --tinta-suave:#5b6879;
  --linea:#dde3ec; --fondo:#f2f5f9; --blanco:#fff;
  --nuevo:#1f5fbf; --proceso:#b26a00; --espera:#6b5bb5; --resuelto:#0f8a5f; --cerrado:#68737f; --cancelado:#a03030;
  --baja:#68737f; --media:#1f5fbf; --alta:#c76a00; --urgente:#c02b2b;
  --sombra:0 1px 3px rgba(18,32,54,.10), 0 8px 24px rgba(18,32,54,.06);
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.45 -apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;color:var(--tinta);background:var(--fondo)}
h1,h2,h3{margin:0 0 12px;line-height:1.25}
h2{font-size:19px} h3{font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-suave)}
a{color:var(--acento);text-decoration:none}
.oculto{display:none !important}
.sub{color:var(--tinta-suave);font-size:13px}
.error{color:#b02020;background:#fdeaea;border:1px solid #f3c9c9;padding:8px 10px;border-radius:8px;font-size:14px}
.aviso{color:#0d5c3f;background:#e8f7f0;border:1px solid #b8e2cf;padding:8px 10px;border-radius:8px;font-size:14px}
.centrado{min-height:100vh;display:grid;place-items:center;padding:20px}

/* ---------------------------------------------------------------- login */
.tarjeta-login{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra);
  padding:28px;width:100%;max-width:390px;display:flex;flex-direction:column;gap:14px}
.tarjeta-login h1{font-size:22px;margin:0}
.tarjeta-login .sub{margin:-10px 0 4px}
.tarjeta-login label{font-size:13px;font-weight:600;color:var(--tinta-suave);display:flex;flex-direction:column;gap:6px}
.tarjeta-login input{font-size:16px;padding:11px 12px}

/* ---------------------------------------------------------------- base */
input,select,textarea{font:inherit;color:inherit;background:var(--blanco);border:1px solid var(--linea);
  border-radius:9px;padding:9px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(31,95,191,.28);border-color:var(--acento)}
textarea{resize:vertical}
label{font-size:13px;font-weight:600;color:var(--tinta-suave);display:flex;flex-direction:column;gap:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--blanco);
  border:1px solid var(--linea);border-radius:9px;padding:9px 13px;font:inherit;font-weight:600;
  color:var(--tinta);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:#c4ceda;background:#fafbfd}
.btn.primario{background:var(--acento);border-color:var(--acento);color:#fff}
.btn.primario:hover{background:var(--acento-oscuro)}
.btn.chico{padding:6px 10px;font-size:13px}
.btn.peligro{color:#a02020;border-color:#eccfcf}
.btn.ancho{width:100%;justify-content:center}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra);
  padding:18px;margin-bottom:16px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:14px}
.rejilla .ancho{grid-column:1/-1}
.rejilla-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.acciones{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.fila-titulo{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}

/* ---------------------------------------------------------------- barra */
.barra{background:var(--blanco);border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:18px;
  padding:10px 16px;position:sticky;top:0;z-index:20;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:9px}
.marca .logo{font-size:22px}
.marca strong{display:block;font-size:16px}
.marca small{color:var(--tinta-suave)}
.tabs{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.tabs button{background:none;border:0;border-radius:9px;padding:8px 13px;font:inherit;font-weight:600;
  color:var(--tinta-suave);cursor:pointer}
.tabs button:hover{background:#f1f4f8}
.tabs button.activo{background:rgba(31,95,191,.10);color:var(--acento)}
.usuario{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#chip-usuario{font-size:13px;color:var(--tinta-suave);text-align:right;line-height:1.2}
#chip-usuario b{display:block;color:var(--tinta)}
main{padding:18px;max-width:1300px;margin:0 auto}
@media(max-width:760px){
  main{padding:12px}
  /* Encabezado COMPACTO en celular (antes se comia ~300px de alto): el nombre de la
     persona se esconde, los botones chicos suben junto al logo y las pestanas quedan
     en UNA fila que se desliza con el dedo. */
  .barra{gap:8px;padding:8px 10px}
  .marca .logo{font-size:18px}
  .marca strong{font-size:15px}
  #chip-usuario{display:none}
  .usuario{margin-left:auto;flex-wrap:nowrap}
  .tabs{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{padding:7px 11px;white-space:nowrap}
}

/* ---------------------------------------------------------- contadores */
.contadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.contador{background:var(--blanco);border:1px solid var(--linea);border-left:4px solid var(--acento);
  border-radius:10px;padding:10px 12px;cursor:pointer}
.contador:hover{box-shadow:var(--sombra)}
.contador .num{font-size:22px;font-weight:700;line-height:1.1}
.contador .eti{font-size:12px;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.04em}
.contador.sel{background:#f0f5fd}
.contador[data-estado="En proceso"]{border-left-color:var(--proceso)}
.contador[data-estado="En espera"]{border-left-color:var(--espera)}
.contador[data-estado="Resuelto"]{border-left-color:var(--resuelto)}
.contador[data-estado="Cerrado"]{border-left-color:var(--cerrado)}
.contador[data-estado="Cancelado"]{border-left-color:var(--cancelado)}
.contador[data-estado="vencidos"]{border-left-color:var(--urgente)}

/* ------------------------------------------------------------- filtros */
.filtros{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filtros select{width:auto;min-width:150px;flex:1 1 150px}
#f-buscar{width:auto;flex:2 1 240px;min-width:200px}
.filtros .check{flex-direction:row;align-items:center;gap:6px;font-weight:600}
.filtros .check input{width:auto}

/* -------------------------------------------------------------- lista */
.tabla-wrap{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
th{background:#f7f9fc;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-suave)}
tbody tr{cursor:pointer}
tbody tr:hover{background:#f7faff}
tbody tr:last-child td{border-bottom:0}
.folio{font-weight:700;color:var(--acento);white-space:nowrap}
.chip{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap}
.chip.Nuevo{background:var(--nuevo)} .chip.En.proceso,.chip.En-proceso{background:var(--proceso)}
.chip[data-e="En proceso"]{background:var(--proceso)}
.chip[data-e="En espera"]{background:var(--espera)}
.chip[data-e="Resuelto"]{background:var(--resuelto)}
.chip[data-e="Cerrado"]{background:var(--cerrado)}
.chip[data-e="Cancelado"]{background:var(--cancelado)}
.chip[data-p="Baja"]{background:var(--baja)}
.chip[data-p="Media"]{background:var(--media)}
.chip[data-p="Alta"]{background:var(--alta)}
.chip[data-p="Urgente"]{background:var(--urgente)}
.titulo-ticket{font-weight:600}
.meta{color:var(--tinta-suave);font-size:13px}
.vencido{color:#b02020;font-weight:700}
.vacio{background:var(--blanco);border:1px dashed var(--linea);border-radius:12px;padding:26px;text-align:center;color:var(--tinta-suave)}
@media(max-width:860px){
  table,thead,tbody,tr,td,th{display:block}
  thead{display:none}
  tbody tr{border-bottom:1px solid var(--linea);padding:8px 4px}
  td{border:0;padding:3px 12px}
  td::before{content:attr(data-c) ": ";font-weight:700;color:var(--tinta-suave);font-size:12px;text-transform:uppercase}
}

/* ----------------------------------------------------------- graficas
   OJO (07/10/2026): estas barras se llamaban `.barra` IGUAL que el encabezado de
   arriba y le ganaban por orden: el encabezado quedaba aplastado a una tira de 16px.
   Por eso ahora son `.medidor` (nunca volver a usar `.barra` para las graficas). */
.grafica{display:flex;flex-direction:column;gap:7px}
.medidor-fila{display:grid;grid-template-columns:110px 1fr 44px;gap:9px;align-items:center;font-size:13px}
.medidor-fila .nom{color:var(--tinta-suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.medidor{height:16px;background:#eef2f7;border-radius:999px;overflow:hidden}
.medidor span{display:block;height:100%;background:linear-gradient(90deg,#3d81dd,#1f5fbf)}
.medidor-fila .val{text-align:right;font-weight:700}
.serie{display:flex;align-items:flex-end;gap:3px;height:120px}
.serie div{flex:1;background:linear-gradient(180deg,#5f9ce8,#1f5fbf);border-radius:4px 4px 0 0;min-height:2px;position:relative}
.serie div:hover::after{content:attr(data-t);position:absolute;bottom:104%;left:50%;transform:translateX(-50%);
  background:var(--tinta);color:#fff;font-size:11px;padding:3px 6px;border-radius:6px;white-space:nowrap;z-index:5}

/* -------------------------------------------------------------- modal */
.modal-fondo{position:fixed;inset:0;background:rgba(16,26,42,.55);display:flex;align-items:flex-start;
  justify-content:center;padding:24px 14px;overflow:auto;z-index:40}
.modal{background:var(--blanco);border-radius:14px;box-shadow:0 20px 60px rgba(10,20,40,.35);
  width:100%;max-width:820px;padding:22px;position:relative}
.modal-cerrar{position:absolute;top:10px;right:12px;background:none;border:0;font-size:20px;cursor:pointer;color:var(--tinta-suave)}
.encabezado-ticket{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start;
  border-bottom:1px solid var(--linea);padding-bottom:12px;margin-bottom:14px}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 16px;margin-bottom:14px}
.dato .k{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-suave)}
.dato .v{font-weight:600}
.bloque{margin:16px 0}
.comentario{border-left:3px solid var(--linea);padding:6px 0 6px 12px;margin-bottom:10px}
.comentario.tecnico{border-left-color:var(--acento)}
.comentario .cabeza{font-size:13px;color:var(--tinta-suave);margin-bottom:3px}
.comentario p{margin:0;white-space:pre-wrap}
.miniaturas{display:flex;gap:10px;flex-wrap:wrap}
.miniaturas a{display:block;border:1px solid var(--linea);border-radius:10px;overflow:hidden;width:130px;background:#fafbfd}
.miniaturas img{width:130px;height:100px;object-fit:cover;display:block}
.miniaturas .pdf{padding:14px;text-align:center;font-size:13px}
.adjunto-linea{display:flex;align-items:center;gap:8px;justify-content:space-between}
.acciones-ticket{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;border-top:1px solid var(--linea);padding-top:14px}
.acciones-ticket label{min-width:150px}

/* -------------------------------------------------------------- avisos */
#avisos{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:60}
.aviso-flotante{background:var(--tinta);color:#fff;padding:11px 15px;border-radius:10px;box-shadow:var(--sombra);
  font-size:14px;max-width:340px}
.aviso-flotante.ok{background:#0f8a5f}
.aviso-flotante.mal{background:#b02020}
.foto{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.historial{font-size:13px;color:var(--tinta-suave)}
.historial li{margin-bottom:3px}