/* Estilos compartidos — Sistema de Tickets FGK (tema claro) */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --naranja:#EB9818;--naranja-osc:#d88a10;--tinta:#1c2430;--gris:#66748c;--gris-claro:#9aa6ba;
  --borde:#d5dbe6;--fondo:#f2f4f8;--blanco:#fff;
  --rojo:#da291c;--verde:#1e9e5a;--amarillo:#b78905;--azul:#2563eb;--morado:#7c3aed;
}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--fondo);min-height:100vh;color:var(--tinta)}

/* Barra superior */
.barra{background:var(--blanco);border-bottom:1px solid var(--borde);padding:12px 20px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:50}
.barra .chip{background:var(--naranja);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;border-radius:6px;padding:4px 10px}
.barra .titulo{font-weight:700;font-size:16px}
.barra .quien{margin-left:auto;font-size:13px;color:var(--gris);text-align:right}
.barra .quien b{color:var(--tinta)}
.barra nav{display:flex;gap:4px;margin-left:12px}
.barra nav a{font-size:13px;color:var(--gris);text-decoration:none;padding:6px 12px;border-radius:8px}
.barra nav a:hover{background:var(--fondo)}
.barra nav a.activo{background:#fff4e2;color:#9a6206;font-weight:600}
.btn-salir{background:none;border:1px solid var(--borde);border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--gris)}
.btn-salir:hover{border-color:var(--rojo);color:var(--rojo)}

.contenido{max-width:1100px;margin:0 auto;padding:24px 16px}
.tarjeta{background:var(--blanco);border-radius:14px;box-shadow:0 4px 18px rgba(20,30,60,.07);padding:24px}

/* Formularios */
.grupo{margin-bottom:16px}
.lbl{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.lbl .req{color:var(--rojo)}
input[type=text],select,textarea{width:100%;border:1.5px solid var(--borde);border-radius:10px;padding:11px 12px;font-size:14px;font-family:inherit;background:#fff;color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--naranja)}
textarea{resize:vertical;min-height:90px}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.fila2{grid-template-columns:1fr}}
.boton{background:var(--naranja);color:#fff;border:none;border-radius:50px;padding:13px 26px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.boton:hover{background:var(--naranja-osc)}
.boton:disabled{background:var(--borde);cursor:not-allowed}
.boton.sec{background:#fff;color:var(--tinta);border:1.5px solid var(--borde);font-weight:600}
.boton.sec:hover{border-color:var(--gris)}
.boton.peligro{background:#fff;color:var(--rojo);border:1.5px solid var(--rojo)}
.boton.chico{padding:8px 16px;font-size:13px;border-radius:10px}

/* Badges de estado y prioridad */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.badge.e-nuevo{background:#e5edff;color:var(--azul)}
.badge.e-asignado{background:#eee5ff;color:var(--morado)}
.badge.e-en-proceso{background:#fff4d6;color:var(--amarillo)}
.badge.e-pendiente-usuario{background:#ffe9d6;color:#b45309}
.badge.e-escalado{background:#fdecec;color:var(--rojo)}
.badge.e-resuelto{background:#dcf5e7;color:var(--verde)}
.badge.e-cerrado{background:#e8ebf1;color:var(--gris)}
.prio{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.prio .punto{width:8px;height:8px;border-radius:50%}

/* Tablas / listas de tickets */
.lista{width:100%;border-collapse:collapse;font-size:13px}
.lista th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--gris-claro);padding:10px 12px;border-bottom:1px solid var(--borde)}
.lista td{padding:12px;border-bottom:1px solid #edf0f5;vertical-align:middle}
.lista tr.fila:hover{background:#f8fafd;cursor:pointer}
.tid{font-family:Consolas,monospace;font-size:12px;color:var(--azul);font-weight:600}

/* Modal / detalle */
.velo{position:fixed;inset:0;background:rgba(15,20,35,.45);display:none;align-items:flex-start;justify-content:center;padding:30px 14px;z-index:100;overflow-y:auto}
.velo.abierto{display:flex}
.modal{background:#fff;border-radius:16px;max-width:680px;width:100%;padding:26px;position:relative}
.modal .cerrar{position:absolute;top:14px;right:16px;background:none;border:none;font-size:22px;cursor:pointer;color:var(--gris-claro)}
.historial{border-left:2px solid var(--borde);margin:14px 0 0 6px;padding-left:16px}
.historial .evento{margin-bottom:12px;font-size:12.5px}
.historial .evento .cuando{color:var(--gris-claro);font-size:11px}
.acciones-modal{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* Avisos */
.aviso-ok{background:#dcf5e7;color:#166b3f;border-radius:10px;padding:12px 16px;font-size:13px;margin-bottom:14px}
.aviso-error{background:#fdecec;color:#b42318;border-radius:10px;padding:12px 16px;font-size:13px;margin-bottom:14px}
.vacio{text-align:center;color:var(--gris-claro);padding:36px 0;font-size:14px}
.pie{text-align:center;color:var(--gris-claro);font-size:12px;padding:20px}

/* Hilo de comentarios (mejora F11) */
.hilo{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.comentario{border-radius:10px;padding:10px 12px;font-size:13px;max-width:92%}
.comentario .quien{font-size:11px;font-weight:700;margin-bottom:3px}
.comentario .cuando{font-size:10.5px;color:var(--gris-claro);margin-top:4px}
.comentario.tecnico{background:#eef3ff;align-self:flex-start;border:1px solid #dbe4f8}
.comentario.usuario-c{background:#fff4e2;align-self:flex-end;border:1px solid #f3e2c0}
.nuevo-comentario{display:flex;gap:8px;margin-top:10px;align-items:flex-end}
.nuevo-comentario textarea{min-height:52px;flex:1}