:root {
  --bg: #f2f4f8;
  --card: #ffffff;
  --border: #dde3ec;
  --text: #22303f;
  --muted: #7a8794;
  --bg2: #eef1f6;
  --field: #ffffff;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --ok: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
}
/* Tema por defecto: oscuro, pensado para visualización continua en turnos largos.
   El agente (y cualquier usuario) lo cambia desde el menú lateral y se guarda por
   usuario en BBDD (GET/PUT /api/tema), con copia local en localStorage. */
body[data-tema="oscuro"] {
  --bg: #0d1423;
  --card: #16203a;
  --border: #27324e;
  --text: #dce4f3;
  --muted: #8b94ab;
  --bg2: #121c30;
  --field: #16203a;
  --accent: #4f83f7;
  --accent-dark: #3a6ae0;
  --ok: #2fbf71;
  --warn: #f5a623;
  --bad: #f05559;
}
body[data-tema="ambar"] {
  --bg: #16110b;
  --card: #262018;
  --border: #443828;
  --text: #f2e8d5;
  --muted: #a29276;
  --bg2: #201a12;
  --field: #2a231a;
  --accent: #e8a93d;
  --accent-dark: #d0851f;
  --ok: #8fca6b;
  --warn: #e59a2c;
  --bad: #e35b48;
}
body[data-tema="verde"] {
  --bg: #08120c;
  --card: #0f2118;
  --border: #1f3d2e;
  --text: #cbefd9;
  --muted: #6f9483;
  --bg2: #0b1a12;
  --field: #0e1f16;
  --accent: #37c881;
  --accent-dark: #1f9a61;
  --ok: #46d98c;
  --warn: #d0b03d;
  --bad: #e0515a;
}
body[data-tema="azul"] {
  --bg: #080d1c;
  --card: #11182e;
  --border: #233052;
  --text: #d9e3f8;
  --muted: #8290b0;
  --bg2: #0d1427;
  --field: #10172b;
  --accent: #5b8cff;
  --accent-dark: #3d6de0;
  --ok: #2fd08a;
  --warn: #ffb454;
  --bad: #ff5f66;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.hidden { display: none !important; }
.error { color: var(--bad); }

/* Login */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  width: 360px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.login-card h1 { font-size: 20px; margin-bottom: 18px; text-align: center; }
.login-card form { display: flex; flex-direction: column; gap: 10px; }
.login-card input { padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
.login-card button {
  padding: 11px; background: var(--accent); color: #fff; border: 0; border-radius: 6px;
  font-size: 15px; cursor: pointer;
}
.login-card button:hover { background: var(--accent-dark); }

/* App layout */
#view-app { display: flex; min-height: 100vh; }
#sidebar {
  width: 230px;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  transition: transform .2s ease;
}
#view-app.sidebar-hidden #sidebar { transform: translateX(-100%); }
.sidebar-head { padding: 16px 18px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.sidebar-head #brand-logo {
  width: 180px; height: 52px; border-radius: 6px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.sidebar-head #brand-logo.con-logo { background-color: #fff; }
#nav-tabs { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; flex: 1; }
#nav-tabs button {
  padding: 10px 14px; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 14px; text-align: left;
}
#nav-tabs button.active { background: var(--accent); color: #fff; }
.user-box { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 10px; border-top: 1px solid var(--border); }
.user-box span { color: var(--muted); font-size: 13px; padding: 0 4px; }
#btn-logout { padding: 6px 12px; border: 1px solid var(--border); background: var(--field); border-radius: 6px; cursor: pointer; }
/* Selector de tema (paletas para visualización continua en turnos largos) */
.theme-box { padding: 10px 10px; border-top: 1px solid var(--border); }
.theme-box p { color: var(--muted); font-size: 12px; padding: 0 4px 6px; }
.theme-swatches { display: flex; gap: 6px; justify-content: flex-start; }
.theme-swatches button.theme-btn {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border);
  padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); font-size: 12px; line-height: 1; transition: transform .12s ease;
}
.theme-swatches button.theme-btn:hover { transform: scale(1.15); }
.theme-swatches button.theme-btn.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-swatches button.theme-btn::after { content: attr(data-sigla); font-size: 11px; }

#app-main { flex: 1; min-width: 0; margin-left: 230px; transition: margin-left .2s ease; }
#view-app.sidebar-hidden #app-main { margin-left: 0; }
#app-main header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 30;
}
#btn-toggle-sidebar {
  width: 38px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px; background: var(--field);
  cursor: pointer; color: var(--text); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#btn-toggle-sidebar::before {
  content: "";
  width: 16px; height: 2px; border-radius: 1px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
}
#btn-toggle-sidebar:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.logo-preview {
  width: 260px; height: 140px; border: 1px dashed var(--border); border-radius: 8px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  margin-top: 10px;
}
.logo-preview.con-logo { border-style: solid; background-color: #fff; }
#login-logo {
  width: 240px; height: 140px; margin: 0 auto 14px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* Telefonía (barra del agente) */
#telefonia-bar { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 6px; }
#telefonia-bar .tf-linea { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; width: 100%; }
#telefonia-bar .tf-logout { margin-left: 18px; border-left: 1px solid var(--border); border-radius: 8px; }
.tf-pill {
  display: inline-block; padding: 6px 14px; border-radius: 12px; font-size: 15px; color: #fff; background: var(--ok);
}
.tf-pill.llamada { background: var(--bad); }
.tf-pill.pausa { background: var(--warn); }
.tf-pill.wrapup { background: var(--accent); }
.tf-pill.ringing { background: #f97316; }
.tf-contador { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
/* Resalto por umbrales de métricas (amarillo -> rojo), común a panel y topbar */
.umbral-warn { color: var(--warn); font-weight: 700; }
.umbral-bad { color: var(--bad); font-weight: 700; }
.panext-time { font-variant-numeric: tabular-nums; font-weight: 600; }
a.panext-time.umbral-warn, b.panext-time.umbral-warn, .panext-time.umbral-warn { color: var(--warn); }
a.panext-time.umbral-bad, b.panext-time.umbral-bad, .panext-time.umbral-bad { color: var(--bad); }
.tf-numero { font-size: 15px; font-weight: 600; color: var(--text); min-width: 90px; }
.tf-colas { font-size: 15px; color: var(--text); font-weight: 500; display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.tf-colas .qe { display: inline-block; padding: 3px 10px; border-radius: 10px; background: var(--bg2); }
.tf-colas .qe.pausado { background: var(--warn); color: #000; }
.tf-colas .qe-razon { opacity: .8; }
.tf-colas .qe-time { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 2px; }
#telefonia-bar input { width: 140px; padding: 6px 8px; font-size: 14px; }
/* Botones de acciones de telefonía: neutrales e integrados en el tema (ni azul ghost
   ni rojo brillante). Colgar (y "Fin descanso") se resaltan en un rojo apagado, menos
   estridente, que sigue siendo visible de forma continuada en turnos largos. */
#telefonia-bar button {
  padding: 6px 12px; font-size: 14px;
  background: var(--field); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}
#telefonia-bar button:hover:not(:disabled) { background: var(--bg2); border-color: var(--accent); }
#telefonia-bar button:disabled { opacity: .45; cursor: not-allowed; }
#telefonia-bar #tf-colgar,
#telefonia-bar button.danger {
  background: #b3544f; border-color: #b3544f; color: #fff;
}
#telefonia-bar #tf-colgar:hover:not(:disabled),
#telefonia-bar button.danger:hover:not(:disabled) { background: #9c4540; border-color: #9c4540; }

.motivos-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.motivos-grid button {
  flex: 1 1 auto; min-width: 130px; padding: 10px 12px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg2); color: var(--text); cursor: pointer;
}
.motivos-grid button:hover { border-color: var(--accent, #4da3ff); background: rgba(77,163,255,.12); }

#sidebar-scrim {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 35;
}
@media (max-width: 900px) {
  #sidebar { transform: translateX(-100%); box-shadow: 2px 0 12px rgba(0,0,0,.15); }
  #view-app.sidebar-open #sidebar { transform: translateX(0); }
  #app-main { margin-left: 0; }
  #view-app.sidebar-open #sidebar-scrim { display: block; }
  #view-app.sidebar-hidden #sidebar { transform: translateX(-100%); }
}

main { padding: 20px; }
.view { display: block; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.card h2 { font-size: 15px; margin-bottom: 10px; color: var(--text); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Badge Colas: cada cola en su propio sub-badge con sus agentes */
.live-cola-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cola-subcard { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.cola-subcard > strong { display: block; font-size: 14px; margin-bottom: 4px; }
.cola-subcard ul { margin: 8px 0 0; padding: 0; list-style: none; }
.cola-subcard li { padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.cola-subcard li:last-child { border-bottom: none; }
.cola-subcard li button { margin-left: 8px; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }
table.compact th, table.compact td { padding: 5px 8px; }

/* Status pills */
.pill { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 12px; color: #fff; }
.pill.idle { background: var(--ok); }
.pill.inuse { background: var(--bad); }
.pill.ringing { background: var(--warn); }
.pill.unknown { background: #94a3b8; }
.pill.paused { background: var(--warn); }

/* Forms */
.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.inline-form label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
input, select, textarea {
  padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: inherit;
  background: var(--field); color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
button {
  padding: 8px 14px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; font-size: 14px;
}
button:hover { background: var(--accent-dark); }
button.ghost { background: var(--field); color: var(--accent); border: 1px solid var(--border); }
button.danger { background: var(--bad); }
button.danger:hover { background: #b91c1c; }
.hint { color: var(--muted); font-size: 13px; margin-top: 6px; }
.hint.warn { color: var(--warn); }

/* Modal */
.modal {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal-card {
  background: var(--card); border-radius: 10px; padding: 22px; width: 420px; max-width: 92vw;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.modal-card h3 { margin-bottom: 14px; font-size: 16px; }
.modal-card form { display: flex; flex-direction: column; gap: 10px; }
.modal-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.usuario-colas { display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 140px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 6px; }
.usuario-cola { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 13px !important; color: var(--text) !important; cursor: pointer; }

/* CRM */
.ficha-head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ficha-head h2 { font-size: 17px; margin: 0; }
.ficha-head button { margin-left: 0; }
.ficha-head #ficha-borrar { margin-left: 0; }
.ficha-head #contacto-cancel { margin-right: auto; }
.ficha-head #ficha-borrar { margin-left: auto; }
#form-contacto { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
#form-contacto .grid2 { grid-template-columns: 1fr 1fr; }
#form-contacto label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
#form-contacto .crm-llamar { justify-content: center; }
#form-contacto .modal-actions { justify-content: center; }
/* ---- Informes y métricas (supervisor/admin) ---- */
.suma-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; }
.suma-cell { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.suma-cell b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.suma-cell span { font-size: 12px; color: var(--muted); }
.crm-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.crm-tab {
  background: var(--field); color: var(--muted); border: 1px solid transparent; border-bottom: 2px solid transparent;
  margin-bottom: -1px; font-size: 13px; padding: 8px 14px; border-radius: 6px 6px 0 0;
}
.crm-tab.active { color: var(--accent); border-color: var(--accent); background: var(--field); }
.crm-pane { display: none; }
.crm-pane.active { display: block; }
.crm-pane .grid2 label { font-size: 12px; }
.crm-llamar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-resultados { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.crm-resultados.hidden { display: none; }
.crm-item {
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px;
}
.crm-item p { margin: 4px 0 0; color: var(--muted); }
.crm-item.llamada { border-left: 3px solid var(--accent); }
.crm-item.hecha strong { text-decoration: line-through; color: var(--muted); }
.tipificacion { margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--accent); border-radius: var(--radius, 8px); background: var(--bg-soft, transparent); }
.tipificacion h3 { margin: 0 0 4px; font-size: 14px; color: var(--accent); }
.tipificacion-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 10px; }
.tipificacion-campos > label { display: grid; gap: 6px; width: 100%; color: var(--muted); font-size: 13px; text-align: center; }
.tipificacion-campos select, .tipificacion-campos textarea { display: block; width: 100%; min-width: 0; box-sizing: border-box; margin: 0 auto; }
.tipificacion-campos textarea { resize: vertical; }
.tipificacion-campos .hint { text-align: center; }
.tipificacion .modal-actions { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.tipificacion #tipificacion-estado.ok { color: var(--ok, green); font-weight: bold; }
.pill.tag { background: #64748b; margin-right: 2px; }
.chk { display: inline-flex; align-items: center; width: auto; }
.chk-line { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border, #374151);
  border-bottom: 1px solid rgba(255,255,255,0.08); }
.guion-pasos { list-style: none; margin: 10px 0; padding: 0; }
.guion-pasos li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 13px; }
.guion-pasos li input { margin-top: 2px; }
.hint.ok { color: var(--ok); }

/* Facturas: estados de factura y editor de lineas */
.pill.fact-st-pendiente { background: #64748b; }
.pill.fact-st-pagada { background: var(--ok); }
.pill.fact-st-cancelada { background: var(--bad); }
.pill.fact-st-vencida { background: var(--warn); }
#fact-tabla-lineas, #plan-tabla-lineas, #fact-detalle-lineas { margin-top: 8px; }
#fact-tabla-lineas input, #plan-tabla-lineas input { width: 100%; min-width: 60px; box-sizing: border-box; }
#fact-tabla-lineas th:nth-child(2), #fact-tabla-lineas td:nth-child(2),
#fact-tabla-lineas th:nth-child(3), #fact-tabla-lineas td:nth-child(3),
#fact-tabla-lineas th:nth-child(4), #fact-tabla-lineas td:nth-child(4) { width: 90px; }
#plan-tabla-lineas th:nth-child(2), #plan-tabla-lineas td:nth-child(2),
#plan-tabla-lineas th:nth-child(3), #plan-tabla-lineas td:nth-child(3),
#plan-tabla-lineas th:nth-child(4), #plan-tabla-lineas td:nth-child(4) { width: 90px; }
#fact-tabla-lineas td:last-child, #plan-tabla-lineas td:last-child { width: 34px; }
#fact-tabla-lineas th:last-child, #plan-tabla-lineas th:last-child { width: 34px; }
#fact-detalle-lineas td:not(:first-child), #fact-detalle-lineas th:not(:first-child) { text-align: right; }
.modal-card .suma-grid { margin-top: 14px; }
.inline-form input[type="date"] { width: auto; }

/* Modal de factura: ancho propio y campos que no se salen de la tarjeta.
   Todo scoped a #modal-factura para no tocar el resto de modales, que siguen
   con los 420px de .modal-card. Motivo: aqui caben un .grid2 de dos columnas
   (con un select de contacto ancho y varios input[type=date]) mas la tabla de
   lineas de 6 columnas, que no entran en 420px. */
#modal-factura .modal-card {
  width: 760px;
  max-width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
}
/* minmax(0, 1fr) en vez de 1fr: 1fr equivale a minmax(auto, 1fr) y las columnas
   no pueden bajar del min-content del select de contacto ni de los input de fecha,
   que es lo que empujaba el contenido fuera del modal. */
#modal-factura .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modal-factura .grid2 label > input,
#modal-factura .grid2 label > select,
#modal-factura .grid2 label > textarea,
#modal-factura form > label > textarea { width: 100%; min-width: 0; }
#modal-factura #fact-tabla-lineas { width: 100%; }

@media (max-width: 820px) {
  #modal-factura .grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* Servicios contratados: estados del contrato y modal de alta/edición. */
.pill.sv-st-activo { background: var(--ok); }
.pill.sv-st-en_proceso { background: var(--warn); }
.pill.sv-st-suspendido { background: #f97316; }
.pill.sv-st-finalizado { background: #64748b; }
.pill.sv-st-cancelado { background: var(--bad); }
.pill.sv-st-desconocido { background: #64748b; }
/* Mismo caso que #modal-factura: un .grid2 con un select de catálogo ancho y tres
   input[type=date] no caben en los 420px de .modal-card, y un "1fr 1fr" no deja
   encoger las columnas por debajo del min-content. */
#modal-servicio .modal-card {
  width: 620px;
  max-width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
}
#modal-servicio .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modal-servicio .grid2 label > input,
#modal-servicio .grid2 label > select,
#modal-servicio form > label > textarea { width: 100%; min-width: 0; }
#modal-servicio-detalle h4 { margin: 16px 0 6px; font-size: 13px; color: var(--muted, #94a3b8); }
#modal-servicio-detalle table { width: 100%; }

/* Precios por periodicidad del servicio. Van apilados en una columna, no en el .grid2:
   el mensual es lo unico editable y los otros dos son calculados, asi que una fila por
   precio se lee mejor que tres celdas sueltas. El bloque se separa del resto del
   formulario con un borde para que se vea que es un grupo propio. */
/* Precios por periodicidad. El bloque es el mismo en el modal de PRODUCTO (donde se
   teclea el mensual y de ahi sale el x3/x12) y en el de SERVICIO (que solo lo muestra
   heredado), asi que las reglas no van atadas a #modal-servicio. */
.serv-precios {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0;
}
.serv-precios-titulo {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
/* El label del mensual lo pone ya .modal-card label (columna flex). Las dos filas
   calculadas son <div>, no <label>, asi que hay que darles la misma forma. */
.serv-precio-fila { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.serv-precio-fila > input { width: 100%; min-width: 0; }
.serv-precio-calc { display: flex; align-items: baseline; gap: 6px; }
/* Los dos calculados no se editan a mano: el backend es el unico que los saca del
   mensual (x3 y x12). Van con readonly y tabindex="-1" para que no paren el tabulado,
   y el fondo gris los distingue de un campo editable. */
.serv-precio-valor {
  background: rgba(148, 163, 184, .12);
  color: var(--muted);
  cursor: not-allowed;
}
.serv-precios-aviso:empty { display: none; }
.serv-precios-aviso { margin: 0; }
.serv-precios-aviso.warn { color: var(--warn); }
/* En el servicio el desglose ya no se teclea: viene del producto. */
.serv-precios.heredado .serv-precio-fila > input { background: rgba(148, 163, 184, .12); color: var(--muted); cursor: not-allowed; }

@media (max-width: 820px) {
  #modal-servicio .grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* Tickets: estados y prioridades. Los colores van en la misma linea que los .pill.sv-st-*. */
.pill.tk-est-abierto { background: var(--warn); }
.pill.tk-est-en_proceso { background: #0ea5e9; }
.pill.tk-est-espera_cliente { background: #f97316; }
.pill.tk-est-espera_tecnico { background: #a855f7; }
.pill.tk-est-cerrado { background: var(--ok); }
.pill.tk-est-anulado { background: #64748b; }
.pill.tk-est-desconocido { background: #64748b; }
.pill.tk-pri-urgente { background: var(--bad); }
.pill.tk-pri-alta { background: #f97316; }
.pill.tk-pri-media { background: #0ea5e9; }
.pill.tk-pri-baja { background: #64748b; }

/* Mismo caso que #modal-factura y #modal-servicio: el formulario de ticket tiene un .grid2
   con un input[type=date] y un select de usuarios con texto largo, y no caben en los 420px
   de .modal-card. El de detalle lleva ademas una tabla de 6 columnas. */
#modal-ticket .modal-card,
#modal-ticket-detalle .modal-card {
  width: 720px;
  max-width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
}
#modal-ticket .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modal-ticket .grid2 label > input,
#modal-ticket .grid2 label > select,
#modal-ticket .grid2 label > textarea,
#modal-ticket form > label > input,
#modal-ticket form > label > textarea { width: 100%; min-width: 0; }
#modal-ticket-detalle h4 { margin: 16px 0 6px; font-size: 13px; color: var(--muted, #94a3b8); }
#modal-ticket-detalle table { width: 100%; }
#modal-ticket-detalle .inline-form { flex-wrap: wrap; }

@media (max-width: 820px) {
  #modal-ticket .grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* Listado global de Tickets: 10 columnas no caben en el ancho de la tarjeta y, sin
   min-width, el navegador las aplasta hasta hacerlas ilegibles. Se deja que la tabla
   desborde en horizontal dentro de su propio contenedor en vez de estirar la página. */
#tktg-scroll { overflow-x: auto; }
#tabla-tickets-global { min-width: 1040px; }
#tktg-resumen { margin-top: 0; }

/* Pedidos: estados. El ciclo va de gris (borrador) a azul (en curso), verde al entregarlo
   y rojo al cancelarlo. Van en la misma linea que los .pill.tk-est-*. */
.pill.pd-est-borrador { background: #64748b; }
.pill.pd-est-confirmado { background: #0ea5e9; }
.pill.pd-est-en_proceso { background: #f97316; }
.pill.pd-est-preparado { background: #a855f7; }
.pill.pd-est-entregado { background: var(--ok); }
.pill.pd-est-cancelado { background: var(--bad); }
.pill.pd-est-desconocido { background: #64748b; }

/* Mismo caso que #modal-ticket: el formulario de pedido lleva un .grid2 y una tabla de
   líneas, y el de detalle, una tabla de líneas y otra de historial de 6 columnas; no caben
   en los 420px por defecto de .modal-card. */
#modal-pedido .modal-card,
#modal-pedido-detalle .modal-card {
  width: 860px;
  max-width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
}
#modal-pedido .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modal-pedido .grid2 label > input,
#modal-pedido .grid2 label > select,
#modal-pedido .grid2 label > textarea,
#modal-pedido form > label > input,
#modal-pedido form > label > textarea { width: 100%; min-width: 0; }
#modal-pedido #pd-lineas-cabecera th { vertical-align: bottom; }
#modal-pedido-detalle h4 { margin: 16px 0 6px; font-size: 13px; color: var(--muted, #94a3b8); }
#modal-pedido-detalle table { width: 100%; }
#modal-pedido-detalle .inline-form { flex-wrap: wrap; }
#modal-pedido .pill { font-size: 12px; }

@media (max-width: 860px) {
  #modal-pedido .grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Ajustes visuales aislados: scroll lateral en "Nuevo pedido" y campos fuera
   de pantalla en "Nuevo plan recurrente". Los dos van scoped a su modal para no
   tocar .modal-card, .grid2 ni las demas tablas, que siguen como estaban. ---- */

/* "Nuevo pedido": la tabla de lineas se salia del ancho de la tarjeta (898px de
   tabla contra 816px utiles). Con .modal-card en overflow-y:auto, el overflow-x
   pasa a auto segun la especificacion CSS y aparecia la barra de scroll
   horizontal. La causa no es el width:100% de la linea 272, que en
   table-layout:auto es solo un minimo: los input de linea tienen un ancho
   intrinseco (su atributo size) y la tabla crecia por encima del 100%. Se fija
   el reparto con table-layout:fixed, que si respeta el ancho de la tabla, y se
   deja que las celdas encojan. */
#modal-pedido table { table-layout: fixed; }
#modal-pedido table input,
#modal-pedido table select { width: 100%; min-width: 0; box-sizing: border-box; }
#modal-pedido #pd-lineas-cabecera th:last-child { width: 44px; }
#modal-pedido table td { overflow: hidden; }

/* "Nuevo plan recurrente": era el unico formulario que se quedaba en los 420px
   de .modal-card. Con un .grid2 de dos columnas y su tabla de 6 columnas no
   cabia (la tabla medía 433px contra 376px utiles) y, sobre todo, no tenia
   max-height: la tarjeta crecia mas que la ventana (993px contra 900vh) con
   overflow:visible, asi que el titulo y los botones de guardar quedaban
   centrados fuera de la pantalla y no se alcanzaban. Mismo tratamiento que
   #modal-factura, #modal-servicio, #modal-ticket y #modal-pedido. */
#modal-plan .modal-card {
  width: 860px;
  max-width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
}
#modal-plan .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modal-plan .grid2 label > input,
#modal-plan .grid2 label > select,
#modal-plan .grid2 label > textarea,
#modal-plan form > label > input,
#modal-plan form > label > textarea { width: 100%; min-width: 0; }
#modal-plan table { table-layout: fixed; }
#modal-plan table input,
#modal-plan table select { width: 100%; min-width: 0; box-sizing: border-box; }
#modal-plan table td { overflow: hidden; }
#modal-plan h4 { margin: 16px 0 6px; font-size: 13px; color: var(--muted, #94a3b8); }

@media (max-width: 860px) {
  #modal-plan .grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* Listado global de Pedidos: 9 columnas no caben en el ancho de la tarjeta y, sin min-width,
   el navegador las aplasta hasta hacerlas ilegibles. Se deja que la tabla desborde en
   horizontal dentro de su propio contenedor en vez de estirar la página. */
#pdg-scroll { overflow-x: auto; }
#tabla-pedidos-global { min-width: 1040px; }
#pdg-resumen { margin-top: 0; }

/* Toast */
#toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #111827; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 100;
}

@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; }
  #form-contacto .grid2 { grid-template-columns: 1fr; }
}

/* Detalle de contrato: ficha en lugar de parrafos apilados. Solo este modal. */
.ct-card {
  width: min(760px, 94vw); max-height: 92vh; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.ct-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px; border-bottom: 1px solid var(--border); background: var(--card);
}
.ct-head h3 { margin: 0; font-size: 16px; }
.ct-head .pill { flex: 0 0 auto; font-size: 13px; padding: 5px 12px; }
.ct-body { padding: 16px 20px 4px; overflow-y: auto; min-height: 0; }
.ct-body h4 {
  margin: 18px 0 8px; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ct-producto { margin-bottom: 12px; }
.ct-producto-nombre { font-size: 16px; font-weight: 600; }
.ct-producto-cat { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-bottom: 10px; }
.ct-dato { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; min-width: 0; }
.ct-dato-ancho { grid-column: 1 / -1; }
.ct-dato-l { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ct-dato-v { display: block; margin-top: 3px; font-size: 18px; font-variant-numeric: tabular-nums; }
.ct-dato-s { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; }
.ct-grid-precios .ct-dato:first-child { border-color: var(--accent); }
.ct-aviso {
  margin: 0 0 10px; padding: 8px 11px; font-size: 13px;
  background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 8px;
}
.ct-recurrencia { margin-bottom: 10px; }
.ct-notas {
  margin-bottom: 10px; padding: 8px 11px;
  background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px;
}
.ct-notas p { margin: 3px 0 0; font-size: 13px; }
.ct-alta { margin: 2px 0 0; }
.ct-scroll { max-height: 190px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.ct-scroll table { font-size: 12px; }
.ct-scroll th { position: sticky; top: 0; background: var(--card); }
/* La flecha va dentro del estado anterior para que no se quede sola al final de una linea. */
.ct-estado-antes { color: var(--muted); white-space: nowrap; }
.ct-flecha { color: var(--muted); margin: 0 3px; }
.ct-card .modal-actions { margin: 0; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--card); }

@media (max-width: 620px) {
  .ct-card { width: 96vw; }
  .ct-head { flex-wrap: wrap; }
  .ct-grid { grid-template-columns: 1fr 1fr; }
  .ct-body { padding: 14px 14px 4px; }
  /* La pastilla es inline-block, y eso la hace indivisible: a este ancho se parte en varias
     lineas y la tabla pasa a ancho fijo por columna, para que quepa en vez de desbordar. */
  .ct-scroll table { table-layout: fixed; }
  .ct-scroll table.compact th, .ct-scroll table.compact td { padding: 5px 6px; }
  .ct-scroll tr > :nth-child(1) { width: 25%; }
  .ct-scroll tr > :nth-child(2) { width: 29%; }
  .ct-scroll tr > :nth-child(3) { width: 16%; }
  .ct-scroll tr > :nth-child(4) { width: 30%; }
  .ct-scroll td.ct-estado .pill { display: block; max-width: 100%; }
}