/* Servicios: Tickets (serviciosPendientes.php) y Áreas y Encargados (areasEncargados.php).
   Mismo lenguaje que catalogosAsucursales/platillos.css (colores, campos, botones, indicadores, tablas y modales),
   con prefijo propio. Todo va bajo .sv (#content y cada .modal-content) para no tocar el resto de Kapital. */
.sv {
  --sv-fondo: #f5f7fa;
  --sv-surface: #ffffff;
  --sv-borde: #e3e8ef;
  --sv-borde-2: #eef1f5;
  --sv-texto: #1e293b;
  --sv-texto-2: #475569;
  --sv-muted: #8a96a8;
  --sv-acento: #2563eb;
  --sv-acento-2: #1d4ed8;
  --sv-acento-suave: #eff4ff;
  --sv-ok: #15803d; --sv-ok-suave: #e8f7ee;
  --sv-alerta: #b45309; --sv-alerta-suave: #fef6e7;
  --sv-peligro: #c02626; --sv-peligro-suave: #fdecec;
  --sv-pos: #7c3aed; --sv-pos-suave: #f3edff;
  --sv-radio: 8px;
  /* Estados del ticket: mismos tonos que siempre (rojo, ámbar, celeste, azul, verde) */
  --sv-e0: #c02626; --sv-e0-suave: #fdecec;
  --sv-e1: #b45309; --sv-e1-suave: #fef6e7;
  --sv-e2: #0369a1; --sv-e2-suave: #e6f4fb;
  --sv-e3: #2563eb; --sv-e3-suave: #eff4ff;
  --sv-e4: #15803d; --sv-e4-suave: #e8f7ee;
  color: var(--sv-texto);
  font-family: 'Open Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
}
.demo, #demo-setting { display: none !important; }
#content.sv { padding: 18px 20px 40px; background: var(--sv-fondo); min-height: calc(100vh - 100px); }
.sv [hidden] { display: none !important; }
.sv td, .sv th { font-size: 13px; }
.sv .sv-muted, .sv .text-muted { color: var(--sv-muted) !important; }
.sv label { font-weight: 600; }

/* ── Campos (sistema.css los deja en 20px) ─────────── */
.sv .form-control {
  height: 36px !important; padding: 7px 11px; font-size: 13px !important; line-height: 20px;
  color: var(--sv-texto); background-color: #fff; border: 1px solid #d5dce6; border-radius: 6px; box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.sv textarea.form-control { height: auto !important; resize: vertical; }
.sv .form-control:focus { border-color: var(--sv-acento); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important; }
.sv .form-control[disabled] { background-color: #f5f7fa; color: var(--sv-muted); }
.sv input[type="checkbox"], .sv input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--sv-acento); cursor: pointer; vertical-align: -3px; }

/* ── Botones ──────────────────────────────────────── */
.sv .btn { border-radius: 6px; font-weight: 600; font-size: 13px; padding: 7px 14px; line-height: 20px; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.sv .btn-xs { padding: 3px 9px; font-size: 12px; line-height: 18px; border-radius: 5px; }
.sv .btn-default { background: #fff; border: 1px solid #d5dce6; color: var(--sv-texto); }
.sv .btn-default:hover, .sv .btn-default:focus { background: #f5f7fa; border-color: #c3ccd8; color: var(--sv-texto); }
.sv .btn-primary { background: var(--sv-acento); border-color: var(--sv-acento); color: #fff; }
.sv .btn-primary:hover, .sv .btn-primary:focus { background: var(--sv-acento-2); border-color: var(--sv-acento-2); color: #fff; }
.sv .btn-success { background: #16a34a; border-color: #16a34a; color: #fff; }
.sv .btn-success:hover, .sv .btn-success:focus { background: #15803d; border-color: #15803d; color: #fff; }
.sv .btn-warning { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.sv .btn-warning:hover, .sv .btn-warning:focus { background: #d97706; border-color: #d97706; color: #fff; }
.sv .btn-info { background: #0284c7; border-color: #0284c7; color: #fff; }
.sv .btn-info:hover, .sv .btn-info:focus { background: #0369a1; border-color: #0369a1; color: #fff; }
.sv .btn-link { color: var(--sv-acento); font-weight: 600; }
.sv .btn-link:hover, .sv .btn-link:focus { color: var(--sv-acento-2); text-decoration: none; }
.sv .btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.sv .btn[disabled] { opacity: .55; }
.sv .btn-group-sm > .btn { padding: 5px 10px; }
.sv .btn-group > .btn:first-child:not(:last-child) { border-radius: 6px 0 0 6px; }
.sv .btn-group > .btn:last-child:not(:first-child) { border-radius: 0 6px 6px 0; }

/* ── Encabezado ───────────────────────────────────── */
.sv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sv-head h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--sv-texto); }
.sv-head h1 .fa { color: var(--sv-acento); margin-right: 8px; }
.sv-head p { margin: 4px 0 0; color: var(--sv-texto-2); }
.sv-head-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sv-actualizado { font-size: 12px; color: var(--sv-muted); }

.sv-card { padding: 14px 16px; margin-bottom: 14px; background: var(--sv-surface); border: 1px solid var(--sv-borde); border-radius: var(--sv-radio); }

/* ── Indicadores (en Tickets también son filtros por estado) ── */
.sv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0 0 14px; }
.sv-kpi {
  --k: var(--sv-acento);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; margin: 0;
  padding: 12px 16px 12px 18px; text-align: left; font: inherit; color: var(--sv-texto);
  background: var(--sv-surface); border: 1px solid var(--sv-borde); border-radius: var(--sv-radio);
  transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.sv-kpi::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--k); }
.sv-kpi .val { order: 1; font-size: 24px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--sv-texto); }
.sv-kpi .et { order: 2; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--sv-texto-2); }
.sv-kpi .sub { order: 3; font-size: 11px; color: var(--sv-muted); }
button.sv-kpi { cursor: pointer; }
button.sv-kpi:hover { border-color: #c3ccd8; }
button.sv-kpi:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.sv-kpi.apagado { opacity: .6; }
.sv-kpi.apagado::before { background: #cbd5e1; }
.sv-kpi.apagado .val { color: var(--sv-texto-2); }
.sv-kpi .check { position: absolute; top: 10px; right: 12px; font-size: 13px; color: var(--k); }
.sv-kpi.apagado .check { color: #cbd5e1; }
.sv-kpi[data-estado="0"] { --k: #ef4444; }
.sv-kpi[data-estado="1"] { --k: #f59e0b; }
.sv-kpi[data-estado="2"] { --k: #0ea5e9; }
.sv-kpi[data-estado="3"] { --k: #2563eb; }
.sv-kpi[data-estado="4"] { --k: #22c55e; }
.sv-kpi.k-peligro { --k: #ef4444; }
.sv-kpi.k-alerta { --k: #f59e0b; }
.sv-kpi.k-peligro .val { color: var(--sv-peligro); }
.sv-kpi.k-peligro.apagado .val { color: var(--sv-texto-2); }

/* ── Filtros ──────────────────────────────────────── */
.sv-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
.sv-campo { display: flex; flex-direction: column; gap: 5px; min-width: 150px; flex: 0 1 180px; }
.sv-campo > label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sv-muted); }
.sv-campo-buscar { flex: 1 1 240px; max-width: 360px; }
.sv-buscar { position: relative; }
.sv-buscar .fa { position: absolute; left: 12px; top: 11px; color: var(--sv-muted); pointer-events: none; z-index: 1; }
.sv .sv-buscar .form-control { padding-left: 34px; }
.sv-rango { display: flex; align-items: center; gap: 6px; }
.sv-rango .form-control { min-width: 0; }
.sv-campo-check { flex: 0 0 auto; min-width: 0; }
.sv-campo-check > label { display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: 0; font-weight: 600; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--sv-texto); cursor: pointer; white-space: nowrap; }
.sv-filtros-fin { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Botones segmentados (estado, tipo de responsable, atajos de fecha) */
.sv-segmento { display: inline-flex; height: 36px; border: 1px solid #d5dce6; border-radius: 6px; overflow: hidden; background: #fff; }
.sv-segmento button { border: 0; background: none; padding: 0 13px; font-size: 13px; font-weight: 600; color: var(--sv-texto-2); white-space: nowrap; transition: background-color .15s, color .15s; }
.sv-segmento button + button { border-left: 1px solid #d5dce6; }
.sv-segmento button:hover { background: #f5f7fa; color: var(--sv-texto); }
.sv-segmento button.sel { background: var(--sv-acento-suave); color: var(--sv-acento); }
.sv-segmento button:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .35); }

/* ── Barra arriba de la tabla ─────────────────────── */
.sv-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sv-conteo { font-size: 13px; color: var(--sv-texto-2); }
.sv-conteo b { color: var(--sv-texto); }
.sv-conteo a { font-weight: 600; color: var(--sv-acento); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--sv-acento-suave); color: var(--sv-acento-2); font-size: 12px; font-weight: 600; }
.sv-chip button { border: 0; background: none; color: inherit; padding: 0 5px; line-height: 1; font-size: 15px; border-radius: 50%; }
.sv-chip button:hover { color: var(--sv-peligro); }

/* ── Tabla ────────────────────────────────────────── */
.sv-tabla-wrap { overflow-x: auto; background: var(--sv-surface); border: 1px solid var(--sv-borde); border-radius: var(--sv-radio); }
.sv-tabla { width: 100%; border-collapse: collapse; }
.sv-tabla thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 10px; background: #fbfcfd; border-bottom: 1px solid var(--sv-borde);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sv-muted);
  text-align: left; vertical-align: bottom; white-space: nowrap;
}
.sv-tabla thead th.ordenable { cursor: pointer; user-select: none; }
.sv-tabla thead th.ordenable:hover { color: var(--sv-texto-2); }
.sv-tabla thead th .fa { margin-left: 4px; color: #cbd5e1; }
.sv-tabla thead th.ordenado, .sv-tabla thead th.ordenado .fa { color: var(--sv-acento); }
.sv-tabla tbody td { padding: 9px 10px; border-top: 1px solid var(--sv-borde-2); vertical-align: middle; color: var(--sv-texto); }
.sv-tabla tbody tr:first-child td { border-top: 0; }
.sv-tabla tbody tr.clic { cursor: pointer; }
.sv-tabla tbody tr:hover td { background: #fafbfe; }
.sv-tabla tbody tr.inactiva td { color: var(--sv-muted); background: #fafbfc; }
.sv-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-tabla th.num { text-align: right; }
.sv-tabla .centro { text-align: center; }
.sv-tabla .nowrap { white-space: nowrap; }
.sv-tabla .acciones { text-align: right; white-space: nowrap; }
.sv-principal { font-weight: 700; color: var(--sv-texto); }
.sv-tabla tr.inactiva .sv-principal { color: var(--sv-muted); }
.sv-secundario { display: block; margin-top: 1px; font-size: 12px; color: var(--sv-muted); }
.sv-desc { display: block; max-width: 340px; margin-top: 1px; font-size: 12px; color: var(--sv-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-codigo { font-family: Consolas, monospace; font-weight: 700; white-space: nowrap; color: var(--sv-texto); }

.sv-vacio { padding: 44px 16px !important; text-align: center; color: var(--sv-muted) !important; background: #fff !important; }
.sv-vacio .fa { display: block; margin-bottom: 10px; font-size: 30px; color: #cbd5e1; }
.sv-vacio a { font-weight: 600; color: var(--sv-acento); }

/* Paginación */
.sv-paginas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--sv-muted); }
.sv-paginas .btn-group .btn { min-width: 36px; }

/* ── Etiquetas ────────────────────────────────────── */
.sv-estado { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sv-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sv-estado.e0 { background: var(--sv-e0-suave); color: var(--sv-e0); }
.sv-estado.e1 { background: var(--sv-e1-suave); color: var(--sv-e1); }
.sv-estado.e2 { background: var(--sv-e2-suave); color: var(--sv-e2); }
.sv-estado.e3 { background: var(--sv-e3-suave); color: var(--sv-e3); }
.sv-estado.e4 { background: var(--sv-e4-suave); color: var(--sv-e4); }

.sv-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 17px; vertical-align: 1px; white-space: nowrap; background: #f1f3f6; color: #64748b; }
.sv-tag.pos { background: var(--sv-pos-suave); color: var(--sv-pos); }
.sv-tag.peligro { background: var(--sv-peligro-suave); color: var(--sv-peligro); }
.sv-tag.alerta { background: var(--sv-alerta-suave); color: var(--sv-alerta); }
.sv-tag.ok { background: var(--sv-ok-suave); color: var(--sv-ok); }
.sv-tag + .sv-tag { margin-left: 4px; }

.sv-fecha-vencida { color: var(--sv-peligro); font-weight: 700; }
.sv-fecha-hoy { color: var(--sv-alerta); font-weight: 700; }

/* Botones de la fila: el paso siguiente con nombre y los demás como íconos */
.sv .sv-accion { padding: 3px 10px; margin-right: 4px; font-size: 12px; line-height: 18px; white-space: nowrap; vertical-align: middle; }
.sv-icono {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: 2px; padding: 0; vertical-align: middle;
  border: 1px solid transparent; border-radius: 6px; background: none; color: var(--sv-texto-2); font-size: 13px;
  transition: background-color .15s, border-color .15s, color .15s;
}
.sv-icono:hover, .sv-icono:focus-visible { border-color: var(--sv-borde); background: #f5f7fa; color: var(--sv-texto); text-decoration: none; outline: 0; }
.sv-icono.peligro:hover { border-color: #f3c4c4; background: var(--sv-peligro-suave); color: var(--sv-peligro); }

/* ── Avisos ───────────────────────────────────────── */
.sv-aviso { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px 10px 16px; margin-bottom: 12px; border: 1px solid #f6e2bd; border-radius: var(--sv-radio); background: var(--sv-alerta-suave); color: var(--sv-texto-2); line-height: 1.55; }
.sv-aviso::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--sv-radio) 0 0 var(--sv-radio); background: #f59e0b; }
.sv-aviso .fa { margin-top: 3px; color: var(--sv-alerta); }
.sv-aviso.error { border-color: #f3c4c4; background: var(--sv-peligro-suave); color: #7f1d1d; }
.sv-aviso.error::before { background: #ef4444; }
.sv-aviso.error .fa { color: var(--sv-peligro); }

/* ── Modales ──────────────────────────────────────── */
.sv-modal .modal-dialog { margin: 24px auto; }
.sv-modal .modal-content.sv { display: flex; flex-direction: column; max-height: calc(100vh - 48px); border: 0; border-radius: 12px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); overflow: hidden; }
.sv-modal .modal-header, .sv-modal .modal-footer { flex: 0 0 auto; }
.sv-modal .modal-header { position: relative; padding: 16px 52px 14px 20px; border-bottom: 1px solid var(--sv-borde); background: #fff; }
.sv-modal .modal-header::before, .sv-modal .modal-header::after { display: none; }
.sv-modal .modal-header .close { position: absolute; top: 14px; right: 16px; margin: 0; font-size: 24px; color: var(--sv-muted); opacity: 1; text-shadow: none; }
.sv-modal .modal-header .close:hover { color: var(--sv-texto); }
.sv-modal .modal-title { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: var(--sv-texto); }
.sv-modal .modal-title small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--sv-muted); }
.sv-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px; }
.sv-modal .modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--sv-borde); background: #fff; border-radius: 0; }
.sv-modal .modal-footer::before, .sv-modal .modal-footer::after { display: none; }
.sv-modal .modal-footer .btn + .btn { margin-left: 0; }
.sv-modal .modal-footer .pull-left { float: none !important; margin-right: auto; }
.sv-modal .modal-footer > span { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.sv-modal .form-group { margin-bottom: 14px; }
.sv-modal .form-group > label, .sv-modal .sv-agregar label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--sv-texto-2); }
.sv-modal .modal-body > p { line-height: 1.55; }
.sv-seccion { margin: 18px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sv-muted); }
.sv-seccion:first-child { margin-top: 0; }

/* Línea de tiempo del ticket */
.sv-linea { display: flex; flex-wrap: wrap; margin: 0 0 18px; padding: 12px 14px 10px; list-style: none; background: var(--sv-fondo); border: 1px solid var(--sv-borde); border-radius: var(--sv-radio); }
.sv-linea li { flex: 1 1 110px; position: relative; padding: 10px 8px 0 0; border-top: 3px solid #dfe5ec; font-size: 12px; }
.sv-linea li::before { content: ""; position: absolute; left: 0; top: -7px; width: 11px; height: 11px; border-radius: 50%; background: #cbd5e1; box-shadow: 0 0 0 2px var(--sv-fondo); }
.sv-linea li.hecho { border-top-color: var(--sv-acento); }
.sv-linea li.hecho::before { background: var(--sv-acento); }
.sv-linea li strong { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sv-texto-2); }
.sv-linea li span { color: var(--sv-texto); font-variant-numeric: tabular-nums; }
.sv-linea li.pendiente strong, .sv-linea li.pendiente span { color: var(--sv-muted); }

/* Petición (campos capturados) */
.sv-peticion { display: grid; gap: 10px; margin: 0; }
.sv-peticion > div { padding: 10px 12px; background: var(--sv-fondo); border-left: 3px solid var(--sv-acento); border-radius: 0 6px 6px 0; }
.sv-peticion dt { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sv-muted); }
.sv-peticion dd { margin: 0; white-space: pre-wrap; word-break: break-word; color: var(--sv-texto); }

/* Comentarios */
.sv-comentarios { display: grid; gap: 8px; max-height: 300px; overflow-y: auto; margin: 0 0 10px; padding: 0; list-style: none; }
.sv-comentarios li { padding: 8px 12px; border: 1px solid var(--sv-borde); border-radius: var(--sv-radio); background: #fff; white-space: pre-wrap; word-break: break-word; }
.sv-comentarios li.mio { background: var(--sv-acento-suave); border-color: #d6e2fb; }
.sv-comentarios li.pos { background: var(--sv-pos-suave); border-color: #e6dcfb; }
.sv-comentarios .autor { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--sv-muted); }
.sv-comentar { display: flex; gap: 8px; align-items: flex-end; }
.sv-comentar textarea { flex: 1; }
.sv-comentar .btn { height: 36px; }

/* Listas de encargados y campos */
.sv-lista { margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--sv-borde); border-radius: var(--sv-radio); }
.sv-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 14px; border-top: 1px solid var(--sv-borde-2); }
.sv-lista li:first-child { border-top: 0; }
.sv-lista li:hover { background: #fafbfe; }
.sv-lista .vacio { justify-content: center; padding: 18px 14px; color: var(--sv-muted); }
.sv-lista .vacio:hover { background: none; }
.sv-agregar { display: flex; gap: 8px; align-items: flex-end; padding: 14px 16px; margin-bottom: 12px; background: var(--sv-fondo); border: 1px solid var(--sv-borde); border-radius: var(--sv-radio); }
.sv-agregar > :first-child { flex: 1; min-width: 0; }
.sv-agregar .select2-container { width: 100% !important; }
.sv-agregar .btn { height: 36px; }

/* ── select2 (mismo alto y flecha que los campos) ─── */
.sv .select2-container .select2-selection--single { height: 36px; border: 1px solid #d5dce6; border-radius: 6px; background: #fff; }
.sv .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 11px; padding-right: 30px; line-height: 34px; color: var(--sv-texto); font-size: 13px; }
.sv .select2-container .select2-selection--single .select2-selection__placeholder { color: var(--sv-muted); }
.sv .select2-container .select2-selection--single .select2-selection__arrow { width: 30px !important; height: 34px !important; top: 0 !important; right: 2px !important; border: 0 !important; background: none !important; }
.sv .select2-selection__arrow b { display: none !important; }
.sv .select2-selection__arrow::after { content: "\f107"; position: absolute; inset: 0; font-family: FontAwesome; font-size: 15px; line-height: 34px; text-align: center; color: var(--sv-muted); }
.sv .select2-container--open .select2-selection__arrow::after { content: "\f106"; color: var(--sv-acento); }
.sv .select2-container--open .select2-selection--single, .sv .select2-container--focus .select2-selection--single { border-color: var(--sv-acento); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
/* La lista se abre dentro del modal (dropdownParent), fuera de .sv */
.sv-modal .select2-dropdown { border-color: #d5dce6; border-radius: 6px; box-shadow: 0 10px 30px rgba(15, 23, 42, .14); overflow: hidden; font-family: 'Open Sans', -apple-system, 'Segoe UI', Arial, sans-serif; }
.sv-modal .select2-search--dropdown { padding: 8px; }
.sv-modal .select2-search--dropdown .select2-search__field { height: 32px; padding: 5px 9px; border: 1px solid #d5dce6; border-radius: 5px; font-size: 13px; }
.sv-modal .select2-results__option { padding: 8px 12px; font-size: 13px; }
.sv-modal .select2-results__option--highlighted[aria-selected] { background: #eff4ff !important; color: #1e293b !important; }
.sv-modal .select2-results__option[aria-selected="true"] { background: #f1f5fb; font-weight: 600; }

@media (max-width: 767px) {
  #content.sv { padding: 14px 12px 30px; }
  .sv-filtros-fin { margin-left: 0; }
  .sv-campo, .sv-campo-buscar { flex: 1 1 100%; max-width: none; }
  .sv-desc { max-width: 220px; }
  .sv-agregar { flex-wrap: wrap; }
  .sv-agregar > * { flex: 1 1 100% !important; }
}

/* ── Formulario para levantar ticket (levantarTicket.js) ── */
.sl-desc { margin: -4px 0 12px; padding: 8px 12px; background: var(--sv-fondo); border-left: 3px solid var(--sv-acento); border-radius: 0 6px 6px 0; }
.sv .sl-productos td { padding: 6px 6px; }
.sv .sl-productos td:first-child { padding-left: 12px; }
.sv .sl-productos .form-control { height: 32px !important; padding: 4px 9px; }
.sv .sl-productos tbody tr:hover td { background: none; }
.sl-productos-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 12px; }

/* ── Asignación, compras y papeles ─────────────────── */
.sv-tag.compra { background: #ecfdf5; color: #047857; }
.sv-tag.equipo { background: var(--sv-pos-suave); color: var(--sv-pos); }
.sv-tag.encargado { background: var(--sv-acento-suave); color: var(--sv-acento-2); }
.sv-asignado { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sv-asignado .fa { color: var(--sv-muted); }
.sv-asignado.mio { font-weight: 700; color: var(--sv-acento-2); }
.sv-asignado.mio .fa { color: var(--sv-acento); }
.sv-asignar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 12px 14px; margin-bottom: 16px; background: var(--sv-fondo); border: 1px solid var(--sv-borde); border-radius: var(--sv-radio); }
.sv-asignar > div { flex: 1 1 220px; min-width: 0; }
.sv-asignar label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--sv-texto-2); }
.sv-asignar .sv-muted { flex: 1 1 100%; font-size: 12px; }
.sv-productos { width: 100%; margin: 0; border-collapse: collapse; background: #fff; border: 1px solid var(--sv-borde); border-radius: var(--sv-radio); }
.sv-productos th { padding: 7px 10px; background: #fbfcfd; border-bottom: 1px solid var(--sv-borde); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sv-muted); text-align: left; }
.sv-productos td { padding: 7px 10px; border-top: 1px solid var(--sv-borde-2); vertical-align: top; }
.sv-productos .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.sv-lista .sv-persona { display: flex; flex-direction: column; min-width: 0; }
.sv-lista .sv-persona small { color: var(--sv-muted); font-size: 11px; }
.sv-lista-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 16px 0 8px; }
.sv-lista-titulo:first-child { margin-top: 0; }
.sv-lista-titulo h5 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sv-muted); }
.sv-lista-titulo span { font-size: 12px; color: var(--sv-muted); }
.sv-rol-btn { padding: 3px 9px !important; font-size: 11px !important; line-height: 16px !important; }
.sv-desc.corta { max-width: 190px; }
#tabla .sv-desc { max-width: 250px; } #tabla .sv-desc.corta { max-width: 170px; }

/* ── Reporte de Tickets (reporteTickets.php) ───────── */
.sv-kpi.k-ok { --k: #22c55e; }
.rp-seccion { padding: 16px; }
.rp-titulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; }
.rp-titulo h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--sv-texto); }
.rp-titulo h2 .fa { color: var(--sv-acento); margin-right: 6px; }
.rp-titulo > .sv-muted { font-size: 12px; }
.rp-nota { margin: -6px 0 10px; font-size: 12px; }
.rp-check { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 600; color: var(--sv-texto); cursor: pointer; }
.rp-barra { display: inline-block; width: 70px; height: 8px; margin-right: 8px; vertical-align: middle; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.rp-barra span { display: block; height: 100%; border-radius: 999px; background: var(--sv-acento); }
.rp-barra.ok span { background: #22c55e; }
.rp-barra.alerta span { background: #f59e0b; }
.rp-barra.peligro span { background: #ef4444; }
.rp-pct { font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: middle; }
.rp-det { display: block; margin-top: 2px; font-size: 11px; }
.sv-tabla tr.rp-grupo td { padding-top: 12px; padding-bottom: 6px; background: #fbfcfd !important; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sv-texto-2); border-top: 1px solid var(--sv-borde); }
.sv-tabla tr.rp-grupo td .sv-muted { text-transform: none; letter-spacing: 0; font-weight: 600; }
.sv-tabla td.rp-sangria { padding-left: 22px; }
.rp-fuerte { font-size: 14px; }
.rp-pila { display: flex; height: 10px; min-width: 8px; max-width: 220px; border-radius: 999px; overflow: hidden; background: #eef1f5; }
.rp-pila span { display: block; height: 100%; }
.rp-pila .e0 { background: #ef4444; }
.rp-pila .e1 { background: #f59e0b; }
.rp-pila .e2 { background: #0ea5e9; }

/* ── Áreas y Encargados: modal Editar área (2026-10-21) ── */
.sv-tag.rh { background: #fdf2f8; color: #be185d; }
.sv-tag.wa { background: var(--sv-ok-suave); color: var(--sv-ok); }
@media (min-width: 768px) { #modalArea .modal-dialog { width: 900px; max-width: calc(100% - 32px); } }
#modalArea .modal-body { padding: 16px 20px 18px; }
.sv-ma-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 26px; }
.sv-ma-col + .sv-ma-col { padding-left: 26px; border-left: 1px solid var(--sv-borde-2); }
.sv-ma-sec { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sv-texto-2); }
.sv-ma-sec .fa { margin-right: 4px; font-size: 13px; }
#modalArea .form-group { margin-bottom: 12px; }
#modalArea textarea { resize: vertical; min-height: 64px; }
.sv-contador { float: right; font-size: 11px; color: var(--sv-muted); font-variant-numeric: tabular-nums; }
.sv-ma-ayuda { display: block; margin-top: 7px; font-size: 12px; line-height: 1.45; color: var(--sv-muted); }

.sv-opciones { display: grid; gap: 8px; }
.sv-opciones-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-opcion { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center;
  width: 100%; padding: 9px 11px; text-align: left; font: inherit; background: #fff; border: 1px solid #d5dce6; border-radius: 8px; color: var(--sv-texto);
  transition: border-color .15s, background-color .15s, box-shadow .15s; }
.sv-opcion > .fa { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: #f1f3f6; color: var(--sv-texto-2); font-size: 14px; }
.sv-opcion > b { font-size: 13px; line-height: 1.25; }
.sv-opcion > span { font-size: 11.5px; line-height: 1.3; color: var(--sv-muted); }
.sv-opcion:hover { border-color: #b9c4d3; background: #fafbfd; }
.sv-opcion:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(37, 99, 235, .2); }
.sv-opcion.sel { border-color: var(--sv-acento); background: var(--sv-acento-suave); box-shadow: inset 0 0 0 1px var(--sv-acento); }
.sv-opcion.sel > .fa { background: var(--sv-acento); color: #fff; }
.sv-opcion.sel > span { color: var(--sv-texto-2); }
/* Tipo de área en 3 columnas: icono arriba, texto abajo */
.sv-opciones-3 .sv-opcion { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 4px; justify-items: start; align-content: start; padding: 10px 11px; }
.sv-opciones-3 .sv-opcion > .fa { grid-row: auto; margin-bottom: 2px; }
.sv-opcion[data-valor="0"].sel { border-color: #94a3b8; background: #f5f7fa; box-shadow: inset 0 0 0 1px #94a3b8; }
.sv-opcion[data-valor="0"].sel > .fa { background: #64748b; }

.sv-ma-resp { display: flex; flex-direction: column; gap: 8px; }
.sv-ma-resp .sv-segmento { align-self: flex-start; }
.sv-ma-externo { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
.sv-ma-resp-campos[hidden] { display: none; }

@media (max-width: 767px) {
  .sv-ma-grid { grid-template-columns: minmax(0, 1fr); }
  .sv-ma-col + .sv-ma-col { padding-left: 0; border-left: 0; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sv-borde-2); }
  .sv-opciones-3 { grid-template-columns: minmax(0, 1fr); }
  .sv-opciones-3 .sv-opcion { grid-template-columns: 30px minmax(0, 1fr); column-gap: 9px; row-gap: 0; }
  .sv-opciones-3 .sv-opcion > .fa { grid-row: 1 / span 2; margin: 0; }
  .sv-ma-externo { grid-template-columns: minmax(0, 1fr); }
}

/* ── Levantar ticket: solicitudes de RH (tipo de solicitud y campos nuevos) ── */
.sl-tipos { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sl-rango { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl-rango input { flex: 1 1 150px; max-width: 200px; }
.sl-rango .sl-dias { min-width: 60px; color: var(--sv-acento); }
/* Solicitudes de RH: estado Rechazada y resultado en el detalle */
.sv-estado.rechazada { background: var(--sv-peligro-suave); color: var(--sv-peligro); }
.sv-resolucion { padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; }
.sv-resolucion.aprobada { background: var(--sv-ok-suave); }
.sv-resolucion.aprobada dt { color: var(--sv-ok); }
.sv-resolucion.rechazada { background: var(--sv-peligro-suave); }
.sv-resolucion.rechazada dt { color: var(--sv-peligro); }
.sv-accion + .sv-accion { margin-left: 4px; }
/* Áreas y Encargados: modal Tipos de solicitud (RH) */
@media (min-width: 768px) { #modalTipos .modal-dialog { width: 960px; max-width: calc(100% - 32px); } }
.sv-ts-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0 22px; min-height: 360px; }
.sv-ts-tipos { padding-right: 22px; border-right: 1px solid var(--sv-borde-2); }
.sv-ts-lista { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sv-ts-lista .vacio { font-size: 12px; color: var(--sv-muted); padding: 6px 0; }
.sv-ts-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 11px; text-align: left; font: inherit;
  background: #fff; border: 1px solid #d5dce6; border-radius: 8px; color: var(--sv-texto); }
.sv-ts-item b { font-size: 13px; }
.sv-ts-item span { font-size: 11.5px; color: var(--sv-muted); }
.sv-ts-item:hover { border-color: #b9c4d3; background: #fafbfd; }
.sv-ts-item.sel { border-color: var(--sv-acento); background: var(--sv-acento-suave); box-shadow: inset 0 0 0 1px var(--sv-acento); }
.sv-ts-nuevo { display: flex; gap: 6px; }
.sv-ts-detalle .sv-vacio { margin-top: 60px; }
.sv-ts-cab { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.sv-ts-cab .form-group { margin-bottom: 10px; }
.sv-ts-cab-acciones { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.sv-ts-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--sv-borde); }
.sv-ts-campo #mtsCampoNombre { flex: 2 1 200px; }
.sv-ts-campo #mtsCampoTipo { flex: 1 1 160px; width: auto; }
.sv-ts-oblig { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: var(--sv-texto-2); cursor: pointer; }
.sv-ts-opciones { flex: 1 1 100%; }
.sv-ts-opciones[hidden] { display: none; }
@media (max-width: 767px) {
  .sv-ts-grid { grid-template-columns: minmax(0, 1fr); }
  .sv-ts-tipos { padding-right: 0; border-right: 0; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--sv-borde-2); }
}
/* Puestos elegidos (select2 múltiple dentro del modal) */
.sv-modal .select2-container--default .select2-selection--multiple { min-height: 38px; border-color: #d5dce6; border-radius: 6px; padding: 2px 4px; }
.sv-modal .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--sv-acento); }
.sv-modal .select2-container--default .select2-selection--multiple .select2-selection__choice {
  max-width: none; margin-top: 4px; padding: 2px 8px; border: 1px solid #c7d7fe; border-radius: 999px; background: var(--sv-acento-suave);
  color: var(--sv-acento-2); font-size: 12px; font-weight: 600; opacity: 1; }
.sv-modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { margin-right: 5px; color: var(--sv-acento); }
@media (max-width: 767px) {
  .sl-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-tipos .sv-opcion { grid-template-columns: minmax(0, 1fr); }
  .sl-tipos .sv-opcion > .fa, .sl-tipos .sv-opcion > span { display: none; }
}
.sv-modal .select2-container--default .select2-selection--multiple .select2-selection__choice { display: inline-flex; align-items: center; }
.sv-modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { position: static !important; float: none; display: inline-block; margin: 0 5px 0 0; padding: 0; border: 0; background: none; font-size: 14px; line-height: 1; }
.sv-modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { font-size: 0; height: 14px; }
.sv-modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove::before { font-size: 13px; }

/* ── Nuevo ticket (levantarTicket.js v4): cabecera en un renglón y campos en cuadrícula ── */
#svLevantar .modal-body { padding: 16px 20px; }
.sl-cabeza { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.sl-cabeza.con-tipo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.sl-cabeza [hidden] { display: none; }
.sl-c > label, .sl-campo > label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--sv-texto-2); }
.sl-ayuda { margin: 8px 0 0; font-size: 12px; color: var(--sv-muted); }
.sl-ayuda::before { content: "\f05a"; font-family: FontAwesome; margin-right: 6px; color: var(--sv-acento); }
#slCampos:not(:empty) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sv-borde-2); }
#slCampos .sv-seccion { margin-top: 0; }
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-flow: dense; gap: 12px 14px; }
.sl-campo { min-width: 0; }
.sl-campo small { display: block; margin-top: 3px; }
.sl-campo textarea { min-height: 58px; resize: vertical; }
.sl-rango input { flex: 1 1 120px; max-width: none; }
.sl-sin-datos { margin: 0; }
#slProductosGrupo:not([hidden]) { margin-top: 14px; }
.sl-pie-nota { font-size: 12px; }
@media (max-width: 767px) {
  .sl-cabeza, .sl-cabeza.con-tipo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sl-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-campo { grid-column: auto !important; }
  #svLevantar .sl-pie-nota { display: none; }
}