:root {
  /* Paleta Argenway: navy + azul + acento teal, sacada del logo y de la
     pagina/CRM reales de la empresa (navy #293053, azul #0099cd, degrade
     hacia teal #37cfdc que usan en sus banners) */
  --navy-950: #0a0e1c;
  --navy-900: #131a30;
  --navy-800: #293053;
  --blue: #37cfdc;
  --blue-dark: #0099cd;
  --white: #ffffff;
  --gray-bg: #f5f7fa;
  --gray-border: #dde3ec;
  --text: #1b2033;
  --text-muted: #5b6478;
  --green: #2fae66;
  --yellow: #d9902a;
  --red: #c1432f;
}

* { box-sizing: border-box; }

.chart-box { position: relative; height: 150px; margin-top: 3mm; }
.chart-box-donut { height: 170px; max-width: 220px; margin-left: auto; margin-right: auto; }
.chart-box-wide { height: 130px; }

body {
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--gray-bg);
  color: var(--text);
}

a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3mm 6mm;
  flex-wrap: wrap;
  gap: 3mm;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 3mm;
  color: white !important;
  text-decoration: none !important;
  cursor: pointer;
}
.topbar .brand:hover { opacity: 0.9; text-decoration: none !important; }

.topbar .brand img { height: 8mm; }

.menu-wrap { position: relative; display: inline-block; }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2mm;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: white;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  padding: 1.8mm 4mm;
  border-radius: 2mm;
  line-height: 1;
}
.menu-toggle:hover { background: rgba(255,255,255,0.16); }
.menu-toggle svg { flex: none; }
.menu-dropdown {
  display: none;
  position: absolute;
  top: 130%;
  right: 0;
  width: 50mm;
  background: white;
  color: var(--text);
  border-radius: 2.5mm;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  z-index: 50;
  padding: 1.5mm 0;
  overflow: hidden;
}
.menu-dropdown.open { display: block; }
/* especificidad extra necesaria: ".topbar nav a" (blanco) sino le gana al color del texto */
.menu-dropdown a.menu-item {
  display: flex;
  align-items: center;
  gap: 3mm;
  padding: 2.6mm 4mm;
  font-size: 0.85rem;
  color: var(--text) !important;
  line-height: 1;
}
.menu-dropdown a.menu-item svg { flex: none; color: var(--blue-dark); }
.menu-dropdown a.menu-item:hover { background: #f4f0e8; text-decoration: none; }
.menu-divider { height: 1px; background: var(--gray-border); margin: 1.5mm 0; }
.menu-logout-btn {
  display: flex;
  align-items: center;
  gap: 3mm;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  line-height: 1;
  padding: 2.4mm 4mm;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--red);
  cursor: pointer;
}
.menu-logout-btn:hover { background: #f4f0e8; }

.topbar nav a {
  color: white;
  margin-left: 5mm;
  font-weight: 600;
  font-size: 0.92rem;
}
.topbar nav a:hover { text-decoration: underline; opacity: 0.9; }

.topbar .user-box {
  font-size: 0.85rem;
  color: #cfd6e8;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 6mm 5mm 20mm 5mm;
}

.page-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--navy-900);
  margin: 0 0 1mm 0;
}
.page-subtitle {
  color: var(--text-muted);
  margin: 0 0 6mm 0;
  font-size: 0.95rem;
}

.card {
  background: white;
  border: 1px solid var(--gray-border);
  border-radius: 3mm;
  padding: 5mm;
  margin-bottom: 4mm;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 3mm;
  margin-bottom: 5mm;
}
.stat-box {
  background: white;
  border-radius: 3mm;
  border: 1px solid var(--gray-border);
  padding: 4mm;
  text-align: center;
}
.stat-box .num { font-size: 1.8rem; font-weight: 900; color: var(--navy-900); }
.stat-box .label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.stat-box.alert .num { color: var(--red); }
.stat-box.warn .num { color: var(--yellow); }

.btn {
  display: inline-block;
  /* Degrade azul -> teal, como el que usan en el CRM/pagina de Argenway */
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  border: none;
  padding: 2.6mm 5mm;
  border-radius: 2mm;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.92rem;
}
.btn:hover { background: var(--blue-dark); text-decoration: none; opacity: 0.92; }
.btn.secondary { background: var(--navy-900); }
.btn.ghost { background: transparent; color: var(--navy-900); border: 1px solid var(--gray-border); }

.field, select.field, textarea.field, input.field {
  width: 100%;
  padding: 2.6mm 3mm;
  border: 1px solid var(--gray-border);
  border-radius: 2mm;
  font-size: 0.95rem;
  font-family: inherit;
  margin-bottom: 3mm;
}

label { font-weight: 700; font-size: 0.85rem; color: var(--navy-900); display: block; margin-bottom: 1mm; }

table.ticket-table { width: 100%; border-collapse: collapse; }
table.ticket-table th, table.ticket-table td {
  padding: 2.8mm 2.5mm;
  border-bottom: 1px solid var(--gray-border);
  text-align: left;
  font-size: 0.88rem;
}
table.ticket-table th { color: var(--text-muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.4px; }
table.ticket-table tr:hover { background: #f8faff; }

.badge {
  display: inline-block;
  padding: 0.8mm 2.6mm;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  color: white;
}
.badge.abierto { background: var(--blue-dark); }
.badge.en_proceso { background: #6b5ce0; }
.badge.esperando_usuario { background: var(--yellow); }
.badge.resuelto { background: var(--green); }
.badge.cerrado { background: #8b93a6; }

.badge.prio-baja { background: #8b93a6; }
.badge.prio-media { background: var(--blue-dark); }
.badge.prio-alta { background: var(--yellow); }
.badge.prio-urgente { background: var(--red); }

.sla-dot {
  display: inline-block;
  width: 2.4mm;
  height: 2.4mm;
  border-radius: 50%;
  margin-right: 1.5mm;
}
.sla-dot.verde { background: var(--green); }
.sla-dot.amarillo { background: var(--yellow); }
.sla-dot.rojo { background: var(--red); }
.sla-dot.cerrado { background: #b7bdc9; }

.filters { display: flex; gap: 3mm; flex-wrap: wrap; margin-bottom: 4mm; align-items: end;}
.filters .field { margin-bottom: 0; min-width: 150px; }

.messages { list-style: none; padding: 0; margin: 0 0 4mm 0; }
.messages li {
  background: #e7f7ee;
  border: 1px solid #b7e6c9;
  color: #1c7a44;
  padding: 2.6mm 4mm;
  border-radius: 2mm;
  margin-bottom: 2mm;
  font-size: 0.9rem;
}

.comment { border-bottom: 1px solid var(--gray-border); padding: 3mm 0; }
.comment:last-child { border-bottom: none; }
.comment .meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1mm; }
.comment.internal { background: #fff8e8; padding: 3mm; border-radius: 2mm; border: 1px dashed var(--yellow); }

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 1.5mm;
  font-size: 0.82rem;
  font-weight: 700;
}

.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 5mm; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 80% 15%, rgba(55, 207, 220, 0.16), transparent 45%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
}
.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: login-in 0.45s ease-out;
}
.login-top-logo { margin-bottom: 5mm; opacity: 0.88; }
.login-top-logo img { height: 22px; width: auto; max-width: 38mm; }
.login-card {
  background: white;
  border-radius: 4mm;
  padding: 10mm 9mm;
  width: 90mm;
  text-align: center;
  box-shadow: 0 10px 40px rgba(10, 14, 28, 0.35), 0 0 0 1px rgba(55, 207, 220, 0.08);
}
.login-card h1 { font-size: 1.3rem; color: var(--navy-900); margin: 0 0 1.5mm 0; }
.login-tagline {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 6mm 0;
}
.login-card .field:focus {
  outline: none;
  border-color: var(--blue-dark);
  box-shadow: 0 0 0 3px rgba(55, 207, 220, 0.22);
}
.login-card .btn {
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.login-card .btn:hover { transform: translateY(-1px); }
.login-errors {
  list-style: none;
  margin: 0 0 4mm 0;
  padding: 2.6mm 3.5mm;
  background: #fdeceb;
  border: 1px solid #f2c6c1;
  border-radius: 2mm;
  color: var(--red);
  font-size: 0.82rem;
  text-align: left;
}
.login-errors li + li { margin-top: 1mm; }

@keyframes login-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.help-text { font-size: 0.78rem; color: var(--text-muted); margin-top: -2mm; margin-bottom: 3mm; }

.timeline { border-left: 2px solid var(--gray-border); padding-left: 4mm; margin-left: 1mm; }
.timeline-item { position: relative; margin-bottom: 3mm; font-size: 0.85rem; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -5.3mm;
  top: 1mm;
  width: 2mm;
  height: 2mm;
  border-radius: 50%;
  background: var(--blue-dark);
}
.timeline-item .when { color: var(--text-muted); font-size: 0.75rem; }

/* Campanita de notificaciones */
.notif-wrap { position: relative; display: inline-block; margin-left: 5mm; }
.notif-bell {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  position: relative;
  padding: 1.6mm;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  border-radius: 2mm;
}
.notif-bell:hover { background: rgba(255,255,255,0.1); }
.notif-badge {
  position: absolute;
  top: -0.5mm;
  right: -0.5mm;
  background: var(--red);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 0.3mm 1.4mm;
  min-width: 3.5mm;
  text-align: center;
  line-height: 1.4;
}
.notif-badge.hidden { display: none; }
.notif-dropdown {
  display: none;
  position: absolute;
  top: 130%;
  right: 0;
  width: 82mm;
  max-height: 100mm;
  overflow-y: auto;
  background: white;
  color: var(--text);
  border-radius: 2mm;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  z-index: 50;
}
.notif-dropdown.open { display: block; }
/* especificidad extra necesaria: ".topbar nav a" (blanco) sino le gana a .notif-item */
.notif-dropdown a.notif-item {
  display: block;
  padding: 3mm 4mm;
  border-bottom: 1px solid var(--gray-border);
  font-size: 0.82rem;
  color: var(--text) !important;
}
.notif-dropdown a.notif-item:hover { background: #f4f0e8; text-decoration: none; }
.notif-dropdown a.notif-item.unread { background: #fbf1dc; font-weight: 600; }
.notif-dropdown a.notif-item .notif-when { font-size: 0.72rem; color: var(--text-muted) !important; font-weight: 400; margin-top: 0.5mm; }
.notif-empty { padding: 5mm; font-size: 0.82rem; color: var(--text-muted); text-align: center; }

/* Kanban */
.kanban-board {
  display: flex;
  gap: 3mm;
  overflow-x: auto;
  padding-bottom: 3mm;
}
.kanban-col {
  background: #efeae1;
  border-radius: 3mm;
  min-width: 62mm;
  max-width: 62mm;
  flex: none;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.kanban-col-header {
  font-weight: 700;
  font-size: 0.85rem;
  padding: 3mm 3mm 2mm 3mm;
  color: var(--navy-900);
  display: flex;
  justify-content: space-between;
}
.kanban-count {
  background: var(--blue-dark);
  color: white;
  border-radius: 20px;
  font-size: 0.7rem;
  padding: 0.3mm 2mm;
}
.kanban-dropzone {
  padding: 0 2.5mm 2.5mm 2.5mm;
  overflow-y: auto;
  flex: 1;
  min-height: 40mm;
}
.kanban-dropzone.dragover { background: #e2d9c8; border-radius: 2mm; }
.kanban-card {
  display: block;
  background: white;
  border-radius: 2mm;
  padding: 2.5mm 3mm;
  margin-bottom: 2.5mm;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  cursor: grab;
  color: var(--text);
  font-size: 0.8rem;
}
.kanban-card:hover { text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.kanban-card.dragging { opacity: 0.4; }
.kanban-card-top { display: flex; align-items: center; gap: 1.5mm; margin-bottom: 1mm; }
.kanban-card-title { font-weight: 600; margin-bottom: 1mm; }
.kanban-card-meta { font-size: 0.72rem; color: var(--text-muted); }
.kanban-empty { font-size: 0.78rem; color: var(--text-muted); text-align: center; padding: 4mm 0; }

/* Estado vacio (mis tickets, listas, etc.) */
.empty-state {
  text-align: center;
  padding: 12mm 6mm;
  color: var(--text-muted);
}
.empty-state svg { color: var(--gray-border); margin-bottom: 3mm; }
.empty-state p { margin: 0 0 1mm 0; }
.empty-state .help-text { margin-bottom: 4mm; }

/* Progreso del ticket (vista empleado) */
.progress-tracker {
  display: flex;
  align-items: flex-start;
  margin: 2mm 0 5mm 0;
}
.progress-step {
  flex: 1;
  text-align: center;
  position: relative;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.progress-step .dot {
  width: 6mm;
  height: 6mm;
  border-radius: 50%;
  background: var(--gray-border);
  border: 2px solid var(--gray-border);
  margin: 0 auto 2mm auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-step .line {
  position: absolute;
  top: 3mm;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--gray-border);
  z-index: -1;
}
.progress-step:first-child .line { display: none; }
.progress-step.done .dot { background: var(--blue-dark); border-color: var(--blue-dark); }
.progress-step.done .line { background: var(--blue-dark); }
.progress-step.current .dot { background: white; border-color: var(--blue-dark); box-shadow: 0 0 0 3px rgba(201,147,46,0.2); }
.progress-step.current { color: var(--navy-900); font-weight: 700; }
.progress-step.done { color: var(--navy-900); }
.progress-step.cancelado .dot { background: var(--red); border-color: var(--red); }
.progress-step.cancelado { color: var(--red); }

/* Seleccion de categoria como tarjetas (nuevo ticket) */
.category-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 2.5mm;
  margin-bottom: 4mm;
}
.category-picker label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5mm;
  border: 1px solid var(--gray-border);
  border-radius: 2.5mm;
  padding: 3mm 2mm;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  color: var(--text);
  margin-bottom: 0;
}
.category-picker input { position: absolute; opacity: 0; pointer-events: none; }
.category-picker .icon { font-size: 1.3rem; }
.category-picker input:checked + label,
.category-picker label.selected { border-color: var(--blue-dark); background: #fbf3e3; }

.ticket-summary-box {
  display: flex;
  align-items: center;
  gap: 3mm;
  flex-wrap: wrap;
  padding: 3mm 4mm;
  background: #fbf9f5;
  border: 1px solid var(--gray-border);
  border-radius: 2.5mm;
  margin-bottom: 4mm;
  font-size: 0.85rem;
}
.ticket-summary-box .item-label { color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.3px; display: block; }

/* Calificacion con estrellas (empleado confirma resolucion) */
.rating-card { background: #fbf9f5; }
.rating-form { display: flex; align-items: center; gap: 4mm; flex-wrap: wrap; margin: 2mm 0 3mm 0; }
.rating-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  font-size: 1.7rem;
  gap: 0.5mm;
}
.rating-stars input { position: absolute; opacity: 0; pointer-events: none; }
.rating-stars label {
  color: var(--gray-border);
  cursor: pointer;
  font-weight: 400;
  line-height: 1;
  transition: color 0.1s;
}
.rating-stars label:hover,
.rating-stars label:hover ~ label,
.rating-stars input:checked ~ label {
  color: var(--blue-dark);
}