@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap");

:root {
  --color-primary: #1f4e79;
  --color-primary-dark: #163a5f;
  --color-primary-light: #2f6db3;
  --color-celeste: #8fb8dd;
  --color-celeste-light: #c3daee;
  --color-secondary: #b8860b;
  --color-secondary-hover: #9c7108;
  --color-secondary-light: #f7bd48;

  --color-bg: #f5f8fc;
  --color-surface: #ffffff;
  --color-surface-dim: #d6dde6;
  --color-surface-low: #eef4fb;
  --color-surface-high: #e2e9f2;

  --color-text: #191c1d;
  --color-text-muted: #44474d;
  --color-outline: #c5c6ce;

  --color-error: #ba1a1a;
  --color-error-hover: #93000a;
  --color-success: #25d366;

  /* Acento por empresa (body[data-tenant]) -- default = Funeraria del Zulia. Redefinido
     abajo para Legado Holding, para que sea inconfundible a simple vista con cuál de las
     dos empresas se está trabajando (header, borde del ítem activo del menú, insignia). */
  --color-tenant: var(--color-secondary);
  --color-tenant-dark: var(--color-primary-dark);
  --color-tenant-soft: rgba(184, 134, 11, 0.14);

  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;

  --shadow-sm: 0 2px 8px rgba(31, 78, 121, 0.04);
  --shadow-md: 0 4px 20px rgba(31, 78, 121, 0.06);
  --shadow-lg: 0 10px 30px rgba(31, 78, 121, 0.1);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

/* Legado Holding: verde azulado propio, distinto del navy/dorado de Funeraria del Zulia
   pero dentro de la misma familia tonal (no choca con el resto de la paleta). */
body[data-tenant="lh"] {
  --color-tenant: #1c8c74;
  --color-tenant-dark: #0f5c4a;
  --color-tenant-soft: rgba(28, 140, 116, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--color-primary);
  margin-top: 0;
}

h1 {
  font-size: 1.6rem;
}

h2 {
  font-size: 1.2rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

h3 {
  font-size: 1.05rem;
}

a {
  color: var(--color-primary);
}

/* ---------- Íconos ---------- */

.icon {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: -0.15em;
}

h2 .icon,
h3 .icon {
  width: 0.95em;
  height: 0.95em;
  color: var(--color-tenant);
}

/* ---------- Header ---------- */

header.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  /* Fondo siempre navy sólido (no degradé hacia el acento) -- un color de acento
     arbitrario mezclado con negro para el degradé puede salir "sucio" según el tono
     (dorado oscurecido da un olivo turbio); el acento se reserva para el borde, la
     insignia y el ítem activo del menú, que sí quedan bien con cualquier color. */
  background: var(--color-primary-dark);
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-md);
  border-bottom: 3px solid var(--color-tenant);
}

/* El logo es configurable por tenant (TenantConfig.marca, admin.js aplicarMarca()) y no
   todos tienen la misma proporción -- el sello circular de Funeraria del Zulia es
   cuadrado, el de Legado Holding es un rectángulo ancho con texto. object-fit: contain +
   ancho flexible evita recortar cualquiera de los dos; el fondo blanco redondeado da
   contraste sobre el degradé oscuro del header en ambos casos. */
header.topbar img.wordmark {
  height: 42px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: white;
  padding: 3px;
}

header.topbar nav {
  margin-left: auto;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

header.topbar a {
  color: white;
  text-decoration: none;
}

header.topbar a:hover {
  text-decoration: underline;
}

header.topbar #user-info {
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--color-celeste-light);
}

header.topbar button {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

header.topbar button:hover {
  background: rgba(255, 255, 255, 0.22);
}

header.topbar select#tenant-select {
  background: rgba(0, 0, 0, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  padding: 0.35rem 0.5rem;
}

/* Insignia de empresa activa -- el elemento más visible del header después del logo, a
   propósito: es la respuesta directa a "que sea claro en cuál empresa se encuentra". */
header.topbar strong#tenant-label {
  background: var(--color-tenant);
  color: white;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  font-family: var(--font-sans);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* ---------- Layout: sidebar + content ---------- */

.layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 1.5rem auto;
  padding: 0 1.5rem 3rem;
}

aside.sidebar {
  flex: 0 0 230px;
  position: sticky;
  top: 4.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-high);
  border-radius: var(--radius-lg);
  padding: 1rem 0;
  box-shadow: var(--shadow-sm);
}

.sidebar nav {
  display: flex;
  flex-direction: column;
}

.sidebar-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.9rem 1rem 0.35rem;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
}

.sidebar nav a .icon {
  color: var(--color-text-muted);
}

.sidebar nav a:hover {
  background: var(--color-surface-low);
  text-decoration: none;
}

.sidebar nav a.active {
  background: var(--color-tenant-soft);
  border-left-color: var(--color-tenant);
  color: var(--color-tenant-dark);
  font-weight: 600;
}

.sidebar nav a.active .icon {
  color: var(--color-tenant);
}

main.content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Páginas sin sidebar (ninguna hoy, pero por si acaso un <main> vive suelto) */
body > main {
  max-width: 1200px;
  margin: 1.5rem auto;
  padding: 0 1.5rem;
}

/* ---------- KPI cards ---------- */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-high);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.kpi-card .icon-badge {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-md);
  background: var(--color-tenant-soft);
  color: var(--color-tenant-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-card .icon-badge .icon {
  width: 1.2em;
  height: 1.2em;
}

.kpi-card .kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kpi-card .kpi-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 0.25rem;
}

.kpi-card.alert .kpi-value {
  color: var(--color-error);
}

/* ---------- Tablas ---------- */

/* Sin `overflow: hidden` a propósito -- recortaba el menú de acciones (details.menu-acciones,
   position:absolute) de la última fila contra el borde inferior de la tabla, sacándolo del
   recuadro visible en vez de desplegarlo por encima del contenido de abajo (bug real,
   reportado con captura). El redondeo de esquinas se logra con border-radius puntual en
   las celdas de la esquina en vez de recortar toda la tabla. */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-high);
  border-radius: var(--radius-lg);
}
thead tr:first-child th:first-child {
  border-top-left-radius: var(--radius-lg);
}
thead tr:first-child th:last-child {
  border-top-right-radius: var(--radius-lg);
}
tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-lg);
}
tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-lg);
}

th,
td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--color-surface-high);
  font-size: 0.88rem;
}

th {
  background: var(--color-surface-low);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

tbody tr:hover {
  background: var(--color-surface-low);
}

tbody tr:last-child td {
  border-bottom: none;
}

td.admin-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.reporte-fila-clicable {
  cursor: pointer;
}

.paginacion {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

/* ---------- Formularios ---------- */
/* .inline-form pasa de "fila apretada" a tarjeta con grid de campos etiquetados -- mismo
   nombre de clase que ya usan las ~12 páginas con formulario, para no tener que tocar el
   HTML más que envolver cada input en un .field. */

.inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  align-items: end;
  margin: 1rem 0 1.5rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-high);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.inline-form > button {
  align-self: end;
}

/* Una regla de autor con display:grid siempre le gana a la regla [hidden] del user-agent
   (display:none), sin importar especificidad -- el origen "autor" pesa más que "user
   agent" en la cascada. Sin esto, un .inline-form con el atributo hidden queda visible
   igual (bug real: pasaba con #cliente-nuevo-form en contratos.html y con los 3
   formularios ocultos de siniestros.html). */
.inline-form[hidden] {
  display: none;
}

/* Mismo bug de cascada que .inline-form[hidden] arriba, esta vez con .field { display:
   flex } -- afectaba en silencio a #p-moneda-field en contrato.html (quedaba visible en
   tenants de moneda única) y ahora también a los selectores de moneda de Fase C. */
.field[hidden] {
  display: none;
}

/* Filas de checkbox/label sueltas (ej. "Es de emergencia") no deben estirarse como un
   campo de ancho fijo -- ocupan todo el ancho disponible de la tarjeta. */
.inline-form > label:has(input[type="checkbox"]) {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text);
}

.form-section-title {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tenant-dark);
  margin: 0.4rem 0 -0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-surface-high);
}

.inline-form > .form-section-title:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Campo con etiqueta -- unidad básica de todos los formularios del panel. */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.field.field-wide {
  grid-column: 1 / -1;
}

.field > label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.field > label .icon {
  color: var(--color-tenant);
  width: 0.9em;
  height: 0.9em;
}

.field-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Combo de color de acento (public/empresa.html) -- swatch nativo (abre el selector del
   navegador/SO al hacer clic) + campo de texto para seguir pudiendo escribir el hex a
   mano, sincronizados entre sí en empresa.js. */
.color-picker-combo {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.color-picker-combo input[type="color"] {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.4rem;
  padding: 0.2rem;
  cursor: pointer;
}

.color-picker-combo input[type="text"] {
  flex: 1 1 auto;
}

input,
select,
textarea {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-text);
}

/* Los checkbox/radio no llevan el tratamiento de campo de texto (borde/padding/ancho
   completo distorsiona su control nativo) -- solo heredan tipografía/color de la regla
   de arriba y ganan el color de acento de la empresa activa. */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  accent-color: var(--color-tenant);
  flex: 0 0 auto;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  width: 100%;
}

textarea {
  resize: vertical;
  min-height: 4.5rem;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-tenant);
  box-shadow: 0 0 0 3px var(--color-tenant-soft);
}

label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Buscadores sueltos (fuera de .inline-form, ej. clientes.html) */
.field-search {
  max-width: 22rem;
  margin: 0.5rem 0 0.75rem;
}

/* Lista de resultados del buscador de cliente en "Crear contrato" (contratos.html) --
   empuja el layout hacia abajo en vez de superponerse, mismo estilo plano que el resto
   del panel (sin overlay/z-index). */
.autocomplete-resultados {
  display: flex;
  flex-direction: column;
  margin-top: 0.35rem;
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.autocomplete-resultados button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  color: var(--color-text);
  border: none;
  border-radius: 0;
  font-weight: 400;
  padding: 0.5rem 0.75rem;
}

.autocomplete-resultados button:hover {
  background: var(--color-surface-low);
}

.autocomplete-resultados button + button {
  border-top: 1px solid var(--color-surface-high);
}

.autocomplete-vacio {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---------- Botones ---------- */

button {
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

button:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

button.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

button.btn-outline:hover {
  background: var(--color-primary);
  color: white;
}

button.btn-danger {
  background: transparent;
  color: var(--color-error);
  border-color: var(--color-error);
}

/* Botones-enlace (ej. "Llamar"/"WhatsApp" en aliados.js): mismo look que button.btn-outline
   pero sobre un <a>, para que el navegador maneje tel:/https:// nativamente en vez de un
   onclick con window.location -- el selector de button.btn-outline no alcanza a <a>. */
a.btn-outline {
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

a.btn-outline:hover {
  background: var(--color-primary);
  color: white;
}

button.btn-danger:hover {
  background: var(--color-error);
  color: white;
  border-color: var(--color-error-hover);
}

/* ---------- Badges de estado ---------- */

.badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-green {
  background: rgba(37, 211, 102, 0.15);
  color: #1a7a43;
}

.badge-amber {
  background: rgba(184, 134, 11, 0.15);
  color: #9c7108;
}

.badge-gray {
  background: var(--color-surface-high);
  color: var(--color-text-muted);
}

.badge-blue {
  background: rgba(31, 78, 121, 0.1);
  color: var(--color-primary);
}

.badge-red {
  background: rgba(186, 26, 26, 0.12);
  color: var(--color-error);
}

/* ---------- Mensajes de error ---------- */

.error {
  color: var(--color-error);
  background: rgba(186, 26, 26, 0.08);
  border: 1px solid rgba(186, 26, 26, 0.2);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md);
}

/* ---------- Avisos (informativo, menos urgente que .error) ---------- */

.aviso {
  color: #9c7108;
  background: rgba(184, 134, 11, 0.1);
  border: 1px solid rgba(184, 134, 11, 0.25);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md);
  font-weight: 600;
}

/* ---------- Login ---------- */

body:has(.login-box) {
  background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
  min-height: 100vh;
}

.login-box {
  max-width: 360px;
  margin: 6rem auto;
  padding: 2rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.login-box img.wordmark {
  display: block;
  height: 96px;
  width: 96px;
  margin: 0 auto 1rem;
}

.login-box h1 {
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
  justify-content: center;
}

.login-box form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.login-box .field {
  gap: 0.35rem;
}

.login-box .field > label {
  font-size: 0.88rem;
  color: var(--color-text);
  font-weight: 600;
}

.login-box button {
  margin-top: 0.25rem;
  justify-content: center;
}

.login-links {
  margin-top: 1rem;
  font-size: 0.85rem;
}

/* Modo solo lectura (rol tenant_read_only). El banner lo inserta admin.js; el selector
   [data-solo-escritura] lo pueden adoptar las páginas para ocultar sus botones de
   acción. El backend es igual la fuente de autorización -- esto es solo cosmético. */
.readonly-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md, 8px);
  background: var(--color-amber-soft, #fef3c7);
  color: var(--color-amber-text, #92400e);
  font-size: 0.9rem;
}

.soporte-banner {
  background: #fee2e2;
  color: #991b1b;
  font-weight: 600;
}

.qr-box {
  width: 220px;
  max-width: 100%;
  padding: 12px;
  margin: 0.5rem 0 1rem;
  background: #fff;
  border: 1px solid var(--color-surface-high);
  border-radius: var(--radius-md, 8px);
}

.qr-box svg {
  display: block;
  width: 100%;
  height: auto;
  shape-rendering: crispEdges;
}

body[data-rol="tenant_read_only"] [data-solo-escritura] {
  display: none !important;
}

/* ---------- Consola de plataforma ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-high);
  border-radius: var(--radius-lg, 12px);
  padding: 1rem 1.1rem;
  margin-bottom: 0.9rem;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.miembros-slot:not(:empty) {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--color-surface-high);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  margin: 0 0.3rem 0.3rem 0;
  border-radius: 999px;
  background: var(--color-surface-low);
  border: 1px solid var(--color-surface-high);
  font-size: 0.8rem;
}

.chip button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--color-red, #b91c1c);
  padding: 0;
}

.login-box .ok {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--color-text);
}

/* ---------- Portal de plataforma (public/plataforma/*) ---------- */

header.topbar .portal-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: white;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

body[data-portal="plataforma"] {
  --color-tenant: #334155;
  --color-tenant-dark: #1e293b;
  --color-tenant-soft: rgba(51, 65, 85, 0.12);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.stat-card {
  background: var(--color-surface-low);
  border: 1px solid var(--color-surface-high);
  border-radius: 10px;
  padding: 1rem;
}

.stat-card .stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
}

.stat-card .stat-label {
  font-size: 0.85rem;
  color: var(--color-text-soft, #64748b);
  margin-top: 0.25rem;
}

/* Barra proporcional en las tablas de análisis (public/atribucion.js) */
.mini-bar {
  display: inline-block;
  width: 90px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-surface-high, #e2e8f0);
  vertical-align: middle;
  overflow: hidden;
}
.mini-bar-fill {
  display: block;
  height: 100%;
  background: var(--color-tenant, #2563eb);
}

/* Checkbox + etiqueta en una fila, dentro de un .field de formulario inline */
.check-inline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
}
.check-inline input {
  width: auto;
}

/* Checklist de permisos de un rol (public/roles.js) -- ocupa todo el ancho del grid del
   formulario, los checkboxes se acomodan en columnas según el espacio disponible. */
.permisos-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem 1rem;
}
.permisos-grid label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 400;
}
.permisos-grid input {
  width: auto;
}

/* "El contrato ya existe" -- recurso secundario para vincular por ID en Solicitudes
   (el camino principal es "Crear contrato", que abre la conversión unificada). */
.vincular-existente {
  margin-top: 0.4rem;
}
.vincular-existente > summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-text-soft, #64748b);
}
.vincular-existente[open] > summary {
  margin-bottom: 0.4rem;
}

/* ---------- Menú de acciones por fila (menuAcciones en admin.js) ---------- */
/* Una sola celda "Acciones" con un botón "⋯" que despliega la lista. <details> nativo:
   el panel es HTML/CSS/JS plano, sin librería de dropdown. */
details.menu-acciones {
  position: relative;
  display: inline-block;
}
details.menu-acciones > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}
details.menu-acciones > summary:hover,
details.menu-acciones[open] > summary {
  background: var(--color-primary);
  color: white;
}
details.menu-acciones > summary::-webkit-details-marker {
  display: none;
}
details.menu-acciones > summary .icon {
  display: block;
}
.menu-acciones-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 12rem;
  padding: 0.45rem;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-high);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.menu-acciones-lista button {
  justify-content: flex-start;
  width: 100%;
}

.text-soft {
  font-size: 0.78rem;
  color: var(--color-text-soft, #64748b);
  margin-top: 0.15rem;
}

/* Cobranza (auditoría 2026-09-14): una tarjeta por contrato del cliente elegido, dentro
   de public/cobranza.js -- mismo look de tarjeta que .kpi-card, sin reusar esa clase
   porque esta tiene su propio padding/gap para la tabla+formulario que contiene. */
.cobranza-contrato {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-high);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.cobranza-contrato h3 {
  margin-top: 0;
}

/* Facturas (plan de fases 2026-09-13): imprimir el detalle de una factura sin el resto
   del panel (topbar, sidebar, tabla, config) -- .no-print marca lo que nunca debe salir
   en el papel; genérica a propósito, sirve para cualquier página que después necesite lo
   mismo. */
@media print {
  .no-print {
    display: none !important;
  }
}

/* Migración 0044: layout fiscal real de la factura (membrete + tabla con bordes +
   desglose de totales), reemplaza el print de párrafos sueltos que había antes.
   public/facturas.js lo arma dentro de #detalle-contenido -- se ve igual en pantalla
   (dentro del panel) y en @media print (donde .no-print ya esconde el resto del panel). */
.factura-impresion {
  max-width: 720px;
  margin: 0 auto;
  font-size: 0.95rem;
}
.factura-membrete {
  border-bottom: 2px solid #1c1c1c;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}
.factura-membrete strong {
  font-size: 1.15rem;
  display: block;
}
.factura-membrete p {
  margin: 0.1rem 0;
  font-size: 0.85rem;
}
.factura-titulo {
  margin-bottom: 0.75rem;
}
.factura-titulo h2 {
  margin: 0 0 0.2rem;
}
.factura-cliente {
  margin-bottom: 1rem;
}
.factura-cliente p {
  margin: 0.1rem 0;
}
.factura-items-tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.factura-items-tabla th,
.factura-items-tabla td {
  border: 1px solid #333;
  padding: 0.4rem 0.6rem;
  text-align: left;
}
.factura-items-tabla th:nth-child(n + 2),
.factura-items-tabla td:nth-child(n + 2) {
  text-align: right;
}
.factura-totales {
  text-align: right;
}
.factura-totales p {
  margin: 0.15rem 0;
}
.factura-total-final {
  font-size: 1.1rem;
  font-weight: 700;
  border-top: 1px solid #333;
  padding-top: 0.3rem;
}
.factura-anulada-sello {
  color: #b91c1c;
  font-weight: 700;
  text-align: center;
  border: 2px solid #b91c1c;
  padding: 0.5rem;
  margin-top: 1rem;
}
@media print {
  .factura-impresion {
    max-width: none;
  }
}

/* Recibo de pago (public/contrato.js imprimirRecibo) -- reusa las clases .factura-* de
   arriba (membrete/título/cliente/tabla) para no duplicar estilo, con su propio ancho más
   angosto de comprobante en vez de factura. */
.recibo-impresion {
  max-width: 480px;
  margin: 0 auto;
  font-size: 0.95rem;
}
.recibo-impresion .factura-items-tabla td:first-child {
  font-weight: 600;
  width: 45%;
}
@media print {
  .recibo-impresion {
    max-width: none;
  }
}

/* Migración 0045: par tipo+valor del campo de descuento (public/cobro-widget.js), mismo
   criterio de layout que .color-picker-combo. */
.field-combo {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.field-combo select {
  flex: 1 1 auto;
}
.field-combo input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Desglose en vivo del cobro (public/cobro-widget.js, solo facturaModo): Precio de lista
   -> Descuento -> Base imponible -> Impuesto -> Total, mismo espíritu que el encabezado
   de a2 Softway. */
.cobro-desglose {
  background: var(--color-surface-high, #f1f5f9);
  border-radius: var(--radius-md, 0.5rem);
  padding: 0.6rem 0.9rem;
  margin: 0.5rem 0;
}
.cobro-desglose-fila,
.cobro-desglose-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.15rem 0;
}
.cobro-desglose-total {
  font-weight: 700;
  border-top: 1px solid var(--color-surface, #fff);
  padding-top: 0.3rem;
  margin-top: 0.3rem;
}