:root{
  /* Marca */
  --font-family: 'Aptos Narrow', 'Segoe UI', Roboto, Arial, sans-serif;
  --brand-green: #0b6b3a;
  --brand-green-600: #0f7a43;
  --brand-green-50: #e7f3ed;

  /* UI */
  --text-size: 13px;
  --line-height: 1.2;
  --input-height: 30px;
  --table-row-height: 28px;
  --radius: 10px;
  --gap: 10px;
  --shadow: 0 4px 14px rgba(0,0,0,.08);

  /* Colores de estados (unificados) */
  --state-blue:   #215C98; /* lanzada / sim-enviada / en-proceso / pend-cliente */
  --state-orange: #AC8300; /* pendiente de enviar SIM */
  --state-red:    #C00000; /* cancelada / bloqueada / abierta */
  --state-grey:   #9aa0a6; /* baja / inactivo */
  --state-black:  #000000; /* activa / resuelta / activo */

  /* Pesos (si quieres subir/bajar negrita por estado) */
  --fw-blue:   400;
  --fw-orange: 400;
  --fw-red:    400;
  --fw-grey:   400;
  --fw-black:  400;
}

/* Reset básico */
*{ box-sizing:border-box }
html,body{
  margin:0; font-family:var(--font-family);
  font-size:var(--text-size); line-height:var(--line-height);
  background:#f7f8f9; color:#111;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:var(--brand-green); color:#fff; box-shadow:var(--shadow);
}
.topbar .left{ font-weight:700; letter-spacing:.3px }
.topbar .center{ list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.topbar .center a{ color:#fff; text-decoration:none; padding:3px 2px; border-bottom:2px solid transparent }
.topbar .center .active a{ border-color:#fff }
.topbar .right .logout{ color:#fff; text-decoration:none; font-weight:600 }

.container{ padding:16px; max-width:1400px; margin-inline:auto; }

/* Cards & Grid */
.card{
  background:#fff; border:1px solid #eee; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:12px;
}
.grid{ display:grid; gap:var(--gap); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.full{ grid-column: 1 / -1; }

/* KPI */
.kpi-title{ font-weight:700; margin:0 0 6px 0; color:#333 }
.kpi-metric{ font-size:20px; font-weight:800; color:#000 }
.kpi-row{ display:flex; align-items:center; gap:8px; margin-top:6px; color:#444; }
.dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }
.dot.green{ background:#2ecc71 }
.dot.red{ background:#e74c3c }
.dot.orange{ background:#f39c12 }
.dot.grey{ background:#95a5a6 }
/* KPI títulos más grandes en tarjetas */
.card .kpi-title{
  font-size:20px !important;
  line-height:1.25 !important;
  letter-spacing:.2px;
}
@media (max-width: 640px){
  .card .kpi-title{ font-size:18px !important; }
}

/* Tablas */
.table-wrap{ background:#fff; border:1px solid #eee; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow) }
.table-toolbar{ display:flex; gap:8px; align-items:center; padding:8px; background:#fafafa; border-bottom:1px solid #eee }
.table-toolbar .right{ margin-left:auto; display:flex; gap:8px }
.table{ width:100%; border-collapse:collapse; font-size:12px }
.table th, .table td{ padding:4px 6px; border-bottom:1px solid #efefef; height:var(--table-row-height) }

/* Cabeceras: verde corporativo + texto blanco negrita */
.table thead th{
  background: var(--brand-green);
  color:#fff; font-weight:700; border-bottom:none;
  white-space:nowrap; text-align:left;
}
.table thead th a{
  color:#fff; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:4px;
}
.sort-indicator{ font-size:10px; color:rgba(255,255,255,.9); }

/* Enlaces en celdas */
.table td a{ text-decoration:none; color:inherit; }
.link-cta--subtle{ font-weight:400; text-decoration:none; }
/* Hover naranja garantizado incluso con filas coloreadas */
.table td a.link-cta--subtle:hover{ color:#ff6a00 !important; }

/* Hover filas */
.table tbody tr{ transition: background-color .12s ease, box-shadow .12s ease; }
.table tbody tr:hover{
  background: var(--brand-green-50);
  box-shadow: inset 3px 0 0 var(--brand-green-600);
}

/* Paginación */
.pagination{ display:flex; align-items:center; justify-content:center; gap:10px; padding:8px; font-size:12px }
.pagination .info{ color:#555; margin:0 12px; }
.pagination a:link, .pagination a:visited{ color:#222; text-decoration:none; font-weight:600; }
.pagination a:hover{ color: var(--brand-green-600); text-decoration:underline; }
.pagination .ghost{ color:#999; pointer-events:none; }

/* Controles */
input, select, textarea, button{
  font-family:var(--font-family);
  height:var(--input-height);
  padding:4px 8px; border:1px solid #ddd; border-radius:8px; outline:none;
}
button{ background:var(--brand-green); color:#fff; border:none; height:var(--input-height); padding:0 12px; cursor:pointer; }
button.secondary{ background:#eee; color:#222 }
button.ghost{ background:transparent; border:1px solid #ddd; color:#333 }
.button{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--input-height); padding:0 12px; border-radius:8px;
  background:var(--brand-green); color:#fff; text-decoration:none;
}
.button.ghost{ background:transparent; border:1px solid #ddd; color:#333; }

/* Login (por si lo usas) */
.login-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; padding:16px; }
.login-card{ width:100%; max-width:420px; background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:var(--shadow); padding:18px 16px; }
.login-card h1{ margin:0 0 12px 0; color:#222; font-size:20px }
.login-card form{ display:grid; gap:8px }
.login-card input{ width:100% }

/* Utilidades de texto */
.fw-normal{ font-weight:400 !important; }
.fw-bold  { font-weight:700 !important; }

/* Date filter (líneas) */
.table-toolbar .datefilter{
  display:inline-flex; align-items:center; gap:6px; margin-left:6px;
}
.table-toolbar .datefilter span{ color:#777; }

/* ===========================
   ESTADOS: LÍNEAS (data-state)
   =========================== */
tr[data-state="lanzada"] td,
tr[data-state="sim-enviada"] td{
  color: var(--state-blue);
  font-weight: var(--fw-blue);
}
tr[data-state="pendiente-de-enviar-sim"] td{
  color: var(--state-orange);
  font-weight: var(--fw-orange);
}
tr[data-state="cancelada"] td,
tr[data-state="bloqueada"] td{
  color: var(--state-red);
  font-weight: var(--fw-red);
}
tr[data-state="baja"] td{
  color: var(--state-grey);
  font-weight: var(--fw-grey);
}
tr[data-state="activa"] td,
tr[data-state="activo"] td{
  color: var(--state-black);
  font-weight: var(--fw-black);
}

/* ===============================
   ESTADOS: CLIENTES (clases legacy)
   =============================== */
.table tbody tr.row-cliente--inactive td,
.table tbody tr.row-cliente--inactive td a{
  color: var(--state-grey) !important;
  font-weight: 400;
}
.table tbody tr.row-cliente--blocked td,
.table tbody tr.row-cliente--blocked td a{
  color: var(--state-red) !important;
  font-weight: 400;
}
.table tbody tr.row-cliente--active td,
.table tbody tr.row-cliente--active td a{
  color: var(--state-black) !important;
  font-weight: 400;
}

/* ====================================
   ESTADOS: INCIDENCIAS (data-inc-state)
   ==================================== */
/* abierta -> rojo */
.table tbody tr[data-inc-state="abierta"] td,
.table tbody tr[data-inc-state="abierta"] td a{
  color: var(--state-red) !important;
  font-weight: 400;
}
/* en-proceso y pend-cliente -> azul */
.table tbody tr[data-inc-state="en-proceso"] td,
.table tbody tr[data-inc-state="en-proceso"] td a,
.table tbody tr[data-inc-state="pend-cliente"] td,
.table tbody tr[data-inc-state="pend-cliente"] td a{
  color: var(--state-blue) !important;
  font-weight: 400;
}
/* resuelta -> negro */
.table tbody tr[data-inc-state="resuelta"] td,
.table tbody tr[data-inc-state="resuelta"] td a{
  color: var(--state-black) !important;
  font-weight: 400;
}
/* cancelada -> rojo (opcional) */
.table tbody tr[data-inc-state="cancelada"] td,
.table tbody tr[data-inc-state="cancelada"] td a{
  color: var(--state-red) !important;
  font-weight: 400;
}
/* ======= RESET MONOCROMO PARA LISTADOS ======= */
/* Todo el cuerpo de tablas en negro, sin negritas forzadas */
.table tbody tr,
.table tbody tr td,
.table tbody tr td a{
  color: #111 !important;
  font-weight: 400 !important;
}

/* Neutraliza “hover” verde en filas dentro de tablas */
.table tbody tr:hover{
  background: inherit !important;
  box-shadow: none !important;
}

/* Enlaces “Ver/Editar” sin naranja */
.table td a.link-cta--subtle:hover,
.table td a:hover{
  color: #111 !important;
  text-decoration: underline; /* opcional, quita si no lo quieres */
}

/* Anula cualquier color/estilo por estados previos */
.table tbody tr[data-state],
.table tbody tr[data-inc-state],
.table tbody tr[data-client-state],
.table tbody tr[data-client-blocked],
.table tbody tr[class^="row-"],
.table tbody tr[class*=" row-"]{
  color: #111 !important;
  font-weight: 400 !important;
}
.table tbody tr[data-state] a,
.table tbody tr[data-inc-state] a,
.table tbody tr[data-client-state] a,
.table tbody tr[data-client-blocked] a,
.table tbody tr[class^="row-"] a,
.table tbody tr[class*=" row-"] a{
  color: inherit !important;
  font-weight: inherit !important;
}

/* Por si quedaron reglas sueltas antiguas */
.linea-baja td, .inc-open td,
.row-linea--baja td, .row-linea--azul td, .row-linea--roja td,
.row-cliente--blocked td, .row-cliente--inactive td, .row-cliente--active td{
  color:#111 !important; font-weight:400 !important;
}
.linea-baja td a, .inc-open td a,
.row-linea--baja td a, .row-linea--azul td a, .row-linea--roja td a,
.row-cliente--blocked td a, .row-cliente--inactive td a, .row-cliente--active td a{
  color: inherit !important; font-weight: inherit !important;
}
/* ===== PALETA FINAL — LÍNEAS (por estado) ===== */
.table tbody tr[data-state="lanzada"] td,
.table tbody tr[data-state="sim_enviada"] td,
.table tbody tr[data-state="sim-enviada"] td,
.table tbody tr[data-state="lanzada"] td a,
.table tbody tr[data-state="sim_enviada"] td a,
.table tbody tr[data-state="sim-enviada"] td a{
  color:#215C98 !important; /* azul */
  font-weight:400;
}

.table tbody tr[data-state="pendiente_envio"] td,
.table tbody tr[data-state="pendiente-de-enviar-sim"] td,
.table tbody tr[data-state="pendiente_envio"] td a,
.table tbody tr[data-state="pendiente-de-enviar-sim"] td a{
  color:#AC8300 !important; /* naranja */
  font-weight:400;
}

.table tbody tr[data-state="cancelada"] td,
.table tbody tr[data-state="bloqueada"] td,
.table tbody tr[data-state="cancelada"] td a,
.table tbody tr[data-state="bloqueada"] td a{
  color:#C00000 !important; /* rojo */
  font-weight:400;
}

.table tbody tr[data-state="baja"] td,
.table tbody tr[data-state="baja"] td a{
  color:#9aa0a6 !important; /* gris */
  font-weight:400;
}

.table tbody tr[data-state="activa"] td,
.table tbody tr[data-state="activo"] td,
.table tbody tr[data-state="activa"] td a,
.table tbody tr[data-state="activo"] td a{
  color:#000000 !important; /* “verde” corporativo que prefieres negro */
  font-weight:400;
}

/* ===== PALETA FINAL — INCIDENCIAS (por estado) ===== */
.table tbody tr[data-inc-state="abierta"] td,
.table tbody tr[data-inc-state="abierta"] td a{
  color:#C00000 !important; /* rojo */
  font-weight:400;
}

.table tbody tr[data-inc-state="en_proceso"] td,
.table tbody tr[data-inc-state="pend_cliente"] td,
.table tbody tr[data-inc-state="en_proceso"] td a,
.table tbody tr[data-inc-state="pend_cliente"] td a{
  color:#215C98 !important; /* azul */
  font-weight:400;
}

.table tbody tr[data-inc-state="resuelta"] td,
.table tbody tr[data-inc-state="resuelta"] td a{
  color:#000000 !important; /* “verde” = negro que estás usando */
  font-weight:400;
}

.table tbody tr[data-inc-state="cancelada"] td,
.table tbody tr[data-inc-state="cancelada"] td a{
  color:#C00000 !important; /* rojo */
  font-weight:400;
}
/* === Badges de prioridad (compactas, legibles y consistentes) === */
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  line-height:1.1;
  border:1px solid transparent;
}

.badge--prio-baja{
  color:#1976d2;           /* azul suave */
  background:#eaf4ff;
  border-color:#d3e9ff;
}
.badge--prio-media{
  color:#ac8300;           /* ámbar */
  background:#fff6e5;
  border-color:#ffe9c7;
}
.badge--prio-alta{
  color:#c00000;           /* rojo */
  background:#fdecea;
  border-color:#f9d3cf;
}
.badge--prio-critica{
  color:#fff;              /* crítica destacada */
  background:#111;
  border-color:#000;
}
/* Toolbar en 2 filas: título arriba; filtros + CTA en la misma línea */
.table-toolbar.column{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.table-toolbar .toolbar-top{
  display:flex;
  align-items:center;
}
.table-toolbar .toolbar-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.table-toolbar .toolbar-row .toolbar-filters{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  flex-wrap:wrap;
}
.table-toolbar .toolbar-row .right{
  margin-left:auto;
}
.table-toolbar .toolbar-row input[type="text"]{
  min-width:240px;
}
/* ===== Toolbar Incidencias: alineado inferior + botón compacto ===== */
.inc-toolbar{
  align-items: flex-end;                 /* alinear todo abajo */
}

.inc-toolbar .filters{
  display: flex;
  align-items: flex-end;                 /* inputs/selecs abajo */
  gap: 10px;
  margin-left: 12px;
  flex: 1 1 auto;
}

.inc-toolbar .filters .grow{
  min-width: 320px;                      /* buscador cómodo */
}

.inc-toolbar .right{
  margin-left: auto;
  align-self: flex-end;                  /* botón abajo */
}

/* Botón un poquito menos alto que los inputs */
.inc-toolbar .right .button{
  height: calc(var(--input-height) - 4px);
  padding: 0 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ===== Toolbar Incidencias: misma altura y alineado inferior ===== */
.inc-toolbar{
  display: flex;
  align-items: flex-end;                 /* alinea todo por abajo */
  gap: 10px;
}

.inc-toolbar .filters{
  display: flex;
  align-items: flex-end;                 /* inputs/fechas/botones abajo */
  gap: 10px;
  margin-left: 12px;
  flex: 1 1 auto;
}

/* ===== Toolbar Incidencias: alineado y alturas exactas ===== */
.table-toolbar.inc-toolbar{
  display:flex;
  gap:10px;
  align-items:center;                 /* centra verticalmente todo */
}

.table-toolbar.inc-toolbar .filters{
  display:flex;
  gap:10px;
  align-items:center;                 /* inputs, selects, fechas y botones centrados */
  flex:1 1 auto;
}

/* Misma altura que el buscador para todos los controles */
.table-toolbar.inc-toolbar input[type="text"],
.table-toolbar.inc-toolbar input[type="search"],
.table-toolbar.inc-toolbar input[type="date"],
.table-toolbar.inc-toolbar select{
  height: var(--input-height);
  line-height: calc(var(--input-height) - 2px);
  padding: 0 12px;
  border-radius: 8px;
}

/* Botones (Filtrar, Limpiar y + Nueva incidencia) */
.table-toolbar.inc-toolbar button,
.table-toolbar.inc-toolbar .button{
  height: var(--input-height);
  line-height: var(--input-height);   /* misma caja vertical */
  padding: 0 12px;
  display:inline-flex;
  align-items:center;                 /* centra el texto dentro del botón */
  border-radius: 8px;
}

/* Contenedor del botón de acción a la derecha */
.table-toolbar.inc-toolbar .right{
  margin-left:auto;
  display:flex;
  align-items:center;                 /* alinea el botón con la línea base de los filtros */
}

/* Flecha separadora entre las fechas */
.table-toolbar.inc-toolbar .date-sep{
  display:inline-flex;
  align-items:center;                 /* centra la flecha con los inputs */
  line-height: var(--input-height);
}
/* --- INCIDENCIAS: toolbar perfectamente alineada --- */
.table-toolbar.inc-toolbar{
  display:flex;
  align-items:center;        /* centra verticalmente todo */
  justify-content:space-between;
  gap:10px;
  padding:8px;               /* misma separación que el resto */
  min-height: var(--input-height);
}

.inc-toolbar .filters{
  display:flex;
  align-items:center;
  gap:10px;
}

/* todos los controles con la MISMA altura */
.inc-toolbar input[type="text"],
.inc-toolbar input[type="date"],
.inc-toolbar select,
.inc-toolbar .button.ghost{
  height: var(--input-height);
}

/* la flecha entre fechas alineada al centro y con alto igual */
.inc-toolbar .date-sep{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: var(--input-height);
  line-height: var(--input-height);
  margin: 0 6px;
}

/* contenedor del botón a la derecha centrado verticalmente */
.inc-toolbar .right{
  margin-left:auto;
  display:flex;
  align-items:center;
}

/* botón verde del +Incidencia con la misma altura que los inputs */
.inc-toolbar .right .button{
  height: var(--input-height);
  line-height: var(--input-height);
  padding: 0 12px;
  border-radius: 8px;
}
/* ===== INCIDENCIAS: barra de filtros perfectamente alineada ===== */
.table-wrap > .table-toolbar.inc-toolbar{
  display:flex !important;
  align-items:flex-end !important;        /* alinea por la BASE de todos los controles */
  justify-content:space-between;
  gap:12px;
  padding:8px 8px 6px 8px;                /* un pelín más de padding abajo */
}

.table-wrap > .table-toolbar.inc-toolbar .filters{
  display:flex;
  align-items:flex-end !important;
  gap:10px;
  flex-wrap:nowrap;
}

/* iguala altura y línea base de TODO */
.table-wrap > .table-toolbar.inc-toolbar input[type="text"],
.table-wrap > .table-toolbar.inc-toolbar input[type="date"],
.table-wrap > .table-toolbar.inc-toolbar select,
.table-wrap > .table-toolbar.inc-toolbar .button{
  height: var(--input-height) !important;
  line-height: var(--input-height) !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin:0 !important;
}

/* flecha entre fechas con la misma altura */
.table-wrap > .table-toolbar.inc-toolbar .date-sep{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: var(--input-height) !important;
  line-height: var(--input-height) !important;
  padding:0 6px;
}

/* contenedor del botón a la derecha */
.table-wrap > .table-toolbar.inc-toolbar .right{
  margin-left:auto;
  display:flex;
  align-items:flex-end !important;
}

/* botón verde igual que los inputs */
.table-wrap > .table-toolbar.inc-toolbar .right .button{
  height: var(--input-height) !important;
  line-height: var(--input-height) !important;
  padding:0 12px !important;
  border-radius:8px !important;
}
.flash-stack{position:fixed;top:12px;right:12px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.flash{padding:10px 14px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.08);background:#f5f5f5;color:#222}
.flash.success{background:#e9f8ef;color:#116b2e;border:1px solid #c5efd4}
.flash.error{background:#fdecea;color:#7a0c0c;border:1px solid #f5c2c0}
.flash.info{background:#eef3ff;color:#0b3d91;border:1px solid #cfdcff}
.flash.warning{background:#fff7e6;color:#7a4b00;border:1px solid #ffe2a8}

/* Campo Nombre en Nuevo comercial */
#id_nombre{
  width: 620px;      /* pon el ancho que quieras */
  max-width: 100%;   /* para que no rompa en pantallas pequeñas */
}
.btn-editar {
display: inline-block;
padding: 6px 14px;
border-radius: 10px;
background: #b45309; /* naranja oscuro */
border: 1px solid #b45309;
color: #ffffff;
font-size: 13px;
font-weight: 500;
text-decoration: none;
}

.btn-editar:hover {
background: #92400e;
border-color: #92400e;
}