/* ==== Cecomunica UI (base) ==== */
:root{
  --bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#1976d2;
  --brand-2:#0f5aa4;
  --ok:#2e7d32;
  --warn:#f59e0b;
  --bad:#c62828;
  --soft-ok:#e6ffea;
  --soft-warn:#fff8e1;
  --soft-bad:#fff0f0;
  --card:#f8fafc;
  --chip:#eef2ff;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.04);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#f3f4f6; color:var(--text);
}

/* ====== Contenedores / Layout ====== */
.card{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px;
  box-shadow:var(--shadow);
}
.section{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:14px; }
.toolbar{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.toolbar input,.toolbar select{ padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-size:14px; }

/* ====== Botones ====== */
.btn{
  padding:8px 12px; border-radius:8px; border:1px solid var(--line);
  background:#fff; cursor:pointer; font-size:14px;
}
.btn:hover{ background:#f3f4f6; }
.btn.secondary{ background:#e5e7eb; color:#111827; border-color:#d1d5db; }
.btn.danger{ background:#ef4444; color:#fff; border-color:#dc2626; }
.btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.primary:hover{ background:var(--brand-2); }
.btn.ok{ background:var(--ok); color:#fff; border-color:var(--ok); }
.btn.ghost{ background:#fff; }
.btn-pill{ border-radius:999px; }

/* ====== Chips / Badges ====== */
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  padding:4px 10px; border:1px solid var(--line); border-radius:999px; font-size:12px;
  background:#fff; cursor:pointer;
}
.chip.active{ border-color:var(--brand); color:var(--brand); font-weight:600; }
.estado-aprobado-chip{ background:#e6ffea !important; color:#2e7d32; border-color:#bbf7d0; }


.badge{ padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; display:inline-block; }
.badge.asignar{ background:#eef2ff; color:#3730a3; }
.badge.asignado{ background:#fff7ed; color:#9a3412; }
.badge.completo{ background:#ecfdf5; color:#065f46; }
.badge.pendiente {
  background: var(--soft-warn);
  color: var(--warn);
}

.badge.aprobado {
  background: var(--aprobado-bg);
  color: var(--aprobado-fg);
}


/* Estados dentro de cards móviles */
.card-contrato .estado-activo { background:transparent; color:#0f8a5f; font-weight:600; }
.card-contrato .estado-ok{background:#e6ffea;color:#2e7d32;font-weight:600;padding:2px 8px;border-radius:6px;align-self:flex-start}
.card-contrato .estado-pendiente { background:transparent; color:#b45309; font-weight:600; }
.card-contrato .estado-inactivo { background:transparent; color:#6b7280; font-weight:600; }
.card-contrato .estado-cancelado { background:transparent; color:var(--bad); font-weight:600; }


/* ====== Resumen ====== */
.resumen{ font-size:13px; color:var(--muted); }
.resumen strong{ color:#111827; }

/* ====== Tablas ====== */
.table-wrap{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow:auto; }
table{ width:100%; border-collapse:collapse; background:#fff; }
th, td{ padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; }
thead th{ position:sticky; top:0; background:#f9fafb; z-index:1; }
tbody tr:hover{ background:#f8fbff; }

/* Flecha indicador fila activa */
.flecha{ color:#6b7280; margin-right:6px; display:inline-block; transition:transform .2s ease; }
tr.activo .flecha{ transform:rotate(90deg); }

/* Celdas editables (ordenes/equipos) */
.lapiz{ background:none; border:none; color:#9ca3af; font-size:14px; cursor:pointer; padding:0; margin-left:4px; vertical-align:middle; }
.lapiz:hover{ color:#4b5563; }
.celda-editable{ display:flex; justify-content:space-between; align-items:center; }
.celda-modelo-editando{ display:flex; align-items:center; gap:4px; }

/* ====== Modal Básico ====== */
#overlay,
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  display:none; align-items:center; justify-content:center; z-index:1500;
  backdrop-filter:blur(2px);
}
.modal{
  background:#fff; width:95%; max-width:780px; max-height:90vh; overflow:auto;
  border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); padding:20px;
}
.modal .footer{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }

/* ====== Utilidades ====== */
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.flex{display:flex}.gap-8{gap:8px}.between{justify-content:space-between}.center{align-items:center}
.hidden{display:none}
.nowrap{white-space:nowrap}
.truncate{max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* --- Ordenamiento de tablas con flechitas --- */
th.sortable {
  cursor: pointer;
  position: relative;
  padding-right: 18px; /* espacio para la flecha */
}

th.sortable::after {
  content: "⬍"; /* ícono neutro */
  position: absolute;
  right: 4px;
  color: #aaa;
  font-size: 0.8em;
}

th.ordenado-asc::after {
  content: "▲"; /* ascendente */
  color: #000;
}

th.ordenado-desc::after {
  content: "▼"; /* descendente */
  color: #000;
}
/* ====== Forms (Cecomunica) ====== */
.form { max-width: 980px; margin: 12px auto; }
.section.form { padding: 16px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px){
  .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field label { font-size: 13px; color: var(--muted); }
.form-field input,
.form-field select,
.form-field textarea {
  padding:10px; border:1px solid var(--line); border-radius:8px; font-size:14px; background:#fff;
}
.form-field textarea { min-height: 80px; resize: vertical; }
.form-hint { font-size:12px; color:var(--muted); }

.input-row { display:flex; gap:8px; align-items:center; }
.input-row > * { flex: 1; }
.input-row .fit { flex: 0 0 auto; }

.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top: 12px; }
.form-title { margin: 0 0 8px 0; }

.req::after { content:" *"; color: var(--bad); }

.file { padding: 8px; border:1px dashed var(--line); border-radius:8px; background:#fff; }

.table-wrap.compact table th, 
.table-wrap.compact table td { padding:6px 8px; font-size: 13.5px; }
/* Utilidades adicionales */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.w-100 { width: 100%; }
/* Alineación centrada para toolbars y acciones de formularios */
.toolbar.center { justify-content: center !important; }
.form-actions.center { justify-content: center !important; }
/* ==== Inputs embebidos en tablas ==== */
.table-wrap input[type="text"],
.table-wrap input[type="number"],
.table-wrap input[type="date"],
.table-wrap input[type="email"],
.table-wrap input[type="tel"],
.table-wrap select,
.table-wrap textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;          /* ← más redondeado */
  background: #f9fafb;          /* ← gris muy claro para diferenciar de la celda */
  font-size: 14px;
  line-height: 1.2;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Variante compacta para filas altas de datos */
.table-input.sm { padding: 6px 8px; border-radius: 8px; }

/* Focus bonito (sin outline azul feo) */
.table-wrap input:focus,
.table-wrap select:focus,
.table-wrap textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(25,118,210,.15);
}

/* Placeholders más suaves */
.table-wrap ::placeholder { color: #9ca3af; }

/* Checkbox con color de marca (soporte moderno) */
.table-wrap input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--brand);
  border-radius: 4px;
}

/* Editor inline bonito (input + botones) */
.td-editor { display: flex; align-items: center; gap: 6px; }
.td-editor .btn { padding: 6px 10px; border-radius: 8px; }

/* Selects dentro de tabla con altura consistente */
.table-select { height: 36px; }
/* ====== Menú principal (home) ====== */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1100px; margin:24px auto 16px; padding:0 16px;
}
.topbar h1 { margin:0; font-size:22px; }

.app-wrap { max-width:1100px; margin:0 auto; padding:0 16px 32px; }

.app-tools {
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  margin: 12px auto 8px;
}
.app-search {
  display:flex; gap:8px; align-items:center; flex:1;
}
.app-search input {
  flex:1; padding:10px; border:1px solid var(--line); border-radius:8px; background:#fff;
}

.app-grid {
  display:grid; grid-template-columns: repeat(1, minmax(0, 1fr));
  gap:16px; margin-top:18px;
}
@media (min-width: 560px){ .app-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px){ .app-grid { grid-template-columns: repeat(3, 1fr); } }

.app-card {
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:18px; display:flex; gap:14px; align-items:center; cursor:pointer; transition:transform .06s ease, box-shadow .06s ease, border-color .06s ease;
}
.app-card:hover { transform: translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.06); border-color:#dbe3ea; }
.app-card .ico { font-size:36px; }
.app-card .meta { display:flex; flex-direction:column; }
.app-card .meta .t { font-weight:700; }
.app-card .meta .s { color:var(--muted); font-size:13px; }

.btn-top { background:var(--brand); color:#fff; border:1px solid var(--brand); padding:8px 12px; border-radius:8px; cursor:pointer; }
.btn-top:hover { background:var(--brand-2); }

/* Helpers de rol */
[data-visible="false"] { display:none !important; }
/* ====== Auth 2.0 (Login / Reset) ====== */
.auth-hero{
  min-height:100vh; display:grid; place-items:center;
  background: radial-gradient(60% 50% at 20% 10%, #2a529820 0%, transparent 60%),
              radial-gradient(60% 60% at 90% 90%, #1976d220 0%, transparent 60%),
              linear-gradient(135deg, #1e3c72, #2a5298);
  padding: 28px 16px;
}
.auth-grid{
  width: 100%; max-width: 1080px;
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .auth-grid{ grid-template-columns: 1.15fr 1fr; }
}

/* Panel de marca (izq) */
.auth-brand{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
  padding: 22px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.15) inset;
}
.auth-brand .logo{
  display:flex; align-items:center; gap:12px; margin-bottom: 14px;
}
.auth-brand .logo .circle{
  width:64px; height:64px; border-radius:50%;
  background: #fff; display:grid; place-items:center; color:#2a5298; font-size:32px; font-weight:700;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}
.auth-brand h2{ margin: 8px 0 6px 0; font-weight:800; letter-spacing:.2px; }
.auth-brand p{ margin: 0 0 10px 0; opacity:.95 }
.auth-bullets{ margin: 8px 0 0 0; padding-left: 18px; }
.auth-bullets li{ margin: 6px 0; }

/* Tarjeta del formulario (der) */
.auth-card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow: var(--shadow);
  padding: 26px 22px;
}
.auth-title{ margin: 0 0 12px 0; }
.auth-sub{ margin: 0 0 16px 0; color: var(--muted); }

.auth-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.auth-field label{ font-size:13px; color: var(--muted); }
.auth-input{
  width:100%; padding: 12px 14px; border:1px solid var(--line); border-radius:12px;
  background:#fff; font-size:16px;
}
.auth-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(25,118,210,.15); }

.input-with-toggle{ position:relative; }
.input-with-toggle .toggle{
  position:absolute; top:50%; right:10px; transform:translateY(-50%);
  border:0; background:transparent; cursor:pointer; font-size:18px; color:#6b7280;
}
.input-with-toggle .toggle:hover{ color:#111827; }

.auth-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.auth-remember{ display:flex; align-items:center; gap:8px; font-size:13px; color:#374151; }

.auth-actions{ display:flex; gap:10px; margin-top:12px; }
.auth-actions .grow{ flex:1; }

/* Botones grandes */
.btn-lg{ padding: 12px 16px; font-size:16px; border-radius:12px; }

/* Divisor */
.divider{
  display:flex; align-items:center; gap:10px; margin: 14px 0;
}
.divider::before,.divider::after{ content:""; flex:1; height:1px; background: var(--line); }
.divider span{ color: var(--muted); font-size: 13px; }

/* Alertas */
.alert{
  margin:10px 0; padding:10px 12px; border-radius:10px; font-size:14px;
  background:#fff8e1; color:#9a3412; border:1px solid #f4e5c2;
}
.alert.ok{ background:#ecfdf5; color:#065f46; border-color:#bbf7d0; }
/* ====== Vendedores Batch (standalone) ====== */
.mod-topbar{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--line);
}
.mod-topbar .inner{
  max-width:1100px; margin:0 auto; padding:10px 16px;
  display:flex; gap:10px; align-items:center; justify-content:space-between;
}
.mod-title{ margin:0; font-size:18px; font-weight:800; }
.mod-sub{ color:var(--muted); font-size:13px; }

.kbd{ font-family:ui-monospace,Menlo,Consolas,monospace; background:#eef2ff; border:1px solid #c7d2fe; border-radius:6px; padding:0 6px; font-size:12px; }
.stepper{ display:flex; gap:8px; align-items:center; }
.step{ padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid var(--line); background:#fff; }
.step.active{ border-color:var(--brand); color:var(--brand); font-weight:700; }

.fab-actions{
  position:sticky; bottom:0; z-index:40;
  background:linear-gradient(180deg, rgba(243,244,246,0) 0%, #f3f4f6 32%);
  padding:14px 10px 18px; margin-top: 10px;
}
.fab-actions .inner{
  max-width:1100px; margin:0 auto; display:flex; gap:10px; justify-content:center;
}

/* Chips editor para grupos */
.chips-editor{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.chip-x{
  display:inline-flex; gap:6px; align-items:center; padding:4px 10px;
  border:1px solid var(--line); border-radius:999px; background:#fff; font-size:12px;
}
.chip-x button{ border:0; background:transparent; cursor:pointer; font-size:14px; line-height:1; }

/* Toasts */
.toast-wrap{ position:fixed; right:14px; bottom:14px; display:flex; flex-direction:column; gap:8px; z-index:999; }
.toast{ background:#111827; color:#fff; padding:10px 12px; border-radius:8px; box-shadow:var(--shadow); font-size:14px; opacity:.98; }
.toast.ok{ background:#065f46; } .toast.bad{ background:#7f1d1d }

/* Tabla mejorada */
.table-sticky-first td:first-child, .table-sticky-first th:first-child{
  position:sticky; left:0; background:#fff; z-index:1;
}
tr.selected{ outline:2px solid #c7d2fe; background:#f8fbff; }
.combobox { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.combobox > #clienteCombo { width: 100%; }
.combo-actions { display:flex; gap:6px; }
.combo-list {
  position: absolute; top: 100%; left: 0; right: 90px;
  background: #fff; border: 1px solid #ddd; max-height: 240px;
  overflow-y: auto; z-index: 1000; border-radius: 6px; margin-top: 4px;
}
.combo-item { padding: 8px 10px; cursor: pointer; }
.combo-item:hover, .combo-item.active { background: #f0f4ff; }
.combo-empty { padding: 8px 10px; color: #777; }
.combo-sub { display:block; font-size: 12px; color:#666; }
.btn.sm { padding: 6px 10px; font-size: 12.5px; }
.table-actions { display: flex; gap: 6px; justify-content: flex-end; }
th.actions, td.actions { white-space: nowrap; text-align: right; }
/* Badges/colors already defined? Keep or adjust as needed */
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; }
.badge.completo { background:#e7f7ef; color:#0f8a5f; }
.badge.danger { background:#fde8e8; color:#b91c1c; }

:root {
  --aprobado-bg: #eff6ff; /* azul muy claro */
  --aprobado-fg: #1d4ed8; /* azul intenso */
}

/* Estados (global – tablas/escritorio) */
.estado-activo   { background-color: var(--soft-ok); color: var(--ok); font-weight:700; }
.estado-aprobado { background-color: var(--aprobado-bg); color: var(--aprobado-fg); font-weight:700; }
.estado-pendiente{ background-color: var(--soft-warn); color: var(--warn); font-weight:700; }
.estado-anulado  { background-color: var(--soft-bad); color: var(--bad); font-weight:700; }
.estado-cancelado{ background-color: #fef2f2; color:#991b1b; font-weight:700; }
.estado-inactivo { background-color: #f3f4f6; color:#6b7280; font-weight:700; }


.cards-list { display:none; gap:10px; padding:10px; }
.card-contrato {
  background:#fff; border:1px solid var(--line,#e5e7eb); border-radius:12px;
  padding:12px; box-shadow:0 1px 2px rgba(0,0,0,.04);
  display:flex; flex-direction:column; gap:8px; animation:fadeIn .15s ease-out;
}
.card-contrato .row { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.card-contrato .t1 { font-weight:700; font-size:15px; }
.card-contrato .t2 { color:#6b7280; font-size:13px; }
.card-contrato .acciones { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.card-contrato .btn { min-height:44px; padding:8px 12px; }

.btn.block { width:100%; justify-content:center; }

/* Responsive switch: hide table on small screens, show cards */
@media (max-width: 760px) {
  .table-wrap { display:none; }
  .cards-list { display:grid; }
  .toolbar .left, .toolbar .right { gap:6px; flex-wrap:wrap; }
  #filtros { width:100%; }
  #filtros input, #filtros select, #btnFiltrar { width:100%; }
}
#btnSoloPendientes.active { background: var(--brand); color:#fff; }
#btnSoloPendientes { min-height: 44px; }
@media (max-width:760px){
 
  .cards-list{ display:grid; grid-template-columns:1fr; gap:12px; }
  .card-contrato{
    border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff;
  }
  .card-contrato .row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
  .card-contrato .t1{ font-weight:600; }
  .card-contrato .t2{ opacity:.85; font-size:.95rem; }
  .card-contrato .acciones{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
  .btn.block{ grid-column:1 / -1; }
}
td.acciones, th.acciones { white-space: nowrap; text-align: right; }
/* Lock scroll cuando el sheet esté abierto */
body.lock-scroll { overflow: hidden; height: 100vh; }

/* ====== Overlay unificado (Desktop centrado + Mobile sheet) ====== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1500;
  display: none; /* lo enciendes con JS → style.display='flex' */
  align-items: center;  /* por defecto centrado (desktop) */
  justify-content: center;
  backdrop-filter: blur(2px);
}

.overlay .modal {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 20px;
  width: 95%;
  max-width: 640px;
  max-height: 90vh;
  overflow: auto;
}

/* Footer dentro del modal */
.overlay .footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}

/* En móviles: estilo “sheet” pegado abajo */
@media (max-width: 760px) {
  .overlay {
    align-items: flex-end; /* baja el modal al fondo */
    justify-content: center;
  }
  .overlay .modal {
    width: 100vw;
    max-width: 100vw;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    padding: 16px;
  }
  .overlay .footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 12px;
  }
}


/* Header del sheet con “handle” */
.sheet-header{
  position: sticky; top: 0; z-index: 5;
  background:#fff; border-bottom:1px solid var(--line);
  padding: 10px 8px; display:flex; align-items:center; gap:8px;
}
.sheet-header .handle{
  width:44px; height:4px; background:#e5e7eb; border-radius:999px;
  position:absolute; left:50%; transform:translateX(-50%); top:6px;
}
.sheet-title{ margin:0 auto; font-weight:800; font-size:16px; }

/* Cuerpo con altura controlada + scroll interno */
.sheet-body{
  max-height: 60vh;
  overflow: auto;
  padding: 8px;
}

/* Ajustes móviles */
@media (max-width:760px){
  .overlay .modal{
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: 92vh;
  }
  .sheet-body{
    /* reserva para header+footer y safe-area inferior */
    max-height: calc(92vh - 140px - env(safe-area-inset-bottom));
  }
}


/* Tabla desplazable horizontal si no cabe */
.table-scroll{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* evita que al llegar al borde se mueva el fondo */
}

.firma-canvas {
  border: 2px solid var(--line);
  border-radius: 12px;
  width: 100%;
  min-height: 240px;
  background: #fff;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (max-width: 760px) {
  .firma-canvas { min-height: 280px; }
}
td.acciones, td.flujo {
  text-align: left !important;
  vertical-align: middle;
  white-space: nowrap; /* para que no se bajen los iconos */
}

/* Placeholder para mantener alineación de botones */
.btn-placeholder {
  padding: 8px 12px;              /* igual que .btn */
  border-radius: 8px;             /* igual que .btn */
  border: 1px solid var(--line);  /* igual que .btn */
  background: #fff;               /* igual que .btn */
  font-size: 14px;                /* igual que .btn */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 0.4;         /* grisado */
  cursor: not-allowed;  /* no clickeable */
  pointer-events: none;
}
 .btn.working{
    background:#fef3c7;            /* ámbar suave */
    border-color:#f59e0b;
    color:#92400e;
  }
  .dot-work{
    display:inline-block;
    width:8px; height:8px; border-radius:999px;
    background:#f59e0b; margin-right:6px;
    box-shadow:0 0 0 2px rgba(245,158,11,.25);
    vertical-align:middle;
  }
    .dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-right:6px;background:#d1d5db;vertical-align:middle}
  .dot.green{background:#22c55e}
  .dot.orange{ background:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,.25); }
  .btn.warn{background:#f59e0b;color:#fff;border-color:#f59e0b}