:root{
  /* iOS en modo "app instalada" (standalone) deja un hueco fantasma abajo del tamaño
     de la barra de direcciones de Safari, aunque nunca se muestra -- se compensa
     jalando la barra/FAB hacia abajo ese tanto, solo en ese modo específico. */
  --ios-standalone-gap:0px;
  --brand-red:#A81820;
  --brand-red-dark:#7C1219;
  --brand-red-light:#F6DCDF;
  --brand-black:#161616;
  --brand-black-soft:#221417;
  --ok-green:#116B45;
  --bad-red:#C2301E;
  --bg-page:#F4F4F2;
  --border-soft:#E5E4E0;
  --border-softer:#EEEDEA;
  --border-table:#E9E8E5;
  --text-primary:#18181A;
  --text-muted:#6F6F6B;
  --text-muteder:#85857F;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --bs-primary:#A81820;
  --bs-primary-rgb:168,24,32;
  --bs-link-color:#A81820;
  --bs-link-hover-color:#7C1219;
  --bs-body-font-size:.95rem;
  --bs-body-font-family:'Public Sans',Helvetica,Arial,sans-serif;
  --shadow-sm:0 1px 2px rgba(23,25,27,.05),0 6px 20px -14px rgba(23,25,27,.14);
  --shadow-md:0 1px 2px rgba(23,25,27,.06),0 10px 28px -12px rgba(23,25,27,.16);
  --shadow-lg:0 12px 32px rgba(22,22,22,.14),0 4px 10px rgba(22,22,22,.08);
  --shadow-red:0 1px 2px rgba(124,18,25,.35);
}

/* OJO: nada de overflow/overscroll-behavior en html o body -- en iOS eso convierte a
   html/body en el "techo" de los elementos position:fixed (la barra inferior, el FAB),
   y dejan de pegarse a la pantalla real para pegarse al tamaño del contenido en su
   lugar. Si algo se desborda horizontalmente, se controla en ESE elemento puntual
   (ver .table-responsive), nunca aquí. */
html{min-height:100%;}
body{
  /* Fuerza que la página siempre mida como mínimo la pantalla completa, aunque el
     contenido sea corto (ej. pocas tarjetas). En iOS modo app instalada, si el
     documento queda más corto que la pantalla física, el lienzo no se estira hasta el
     borde real -- deja un hueco vacío abajo donde ni siquiera se dibuja el fondo. */
  min-height:100vh;
  min-height:100dvh;
  /* Fondo con un toque de color muy sutil (no plano) -- dos manchas suaves en las
     esquinas superiores, del mismo rojo de marca, apenitas perceptibles. background-color
     se mantiene sólido como respaldo/base, los gradientes son puro adorno encima. */
  background-color:var(--bg-page);
  background-image:
    radial-gradient(1100px 500px at 100% -5%, rgba(168,24,32,.05), transparent 60%),
    radial-gradient(800px 420px at -5% 0%, rgba(168,24,32,.035), transparent 55%);
  background-repeat:no-repeat;
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.015em;color:#131313;}

/* Cifras y datos tabulares en fuente monoespaciada, igual que el resto del sistema */
.text-end,.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* ---------- Marca / navbar ---------- */
.navbar.bg-dark{
  background:var(--brand-black) !important;
  border-bottom:none;
  box-shadow:none;
  position:sticky;top:0;z-index:1030;
  /* Empuja el contenido debajo del notch/Dynamic Island/barra de estado del celular;
     el fondo negro sigue llegando hasta arriba del todo, solo el contenido baja. */
  padding-top:env(safe-area-inset-top,0px);
}
.navbar-brand{
  --brand-edge-gap:1rem; /* igual al padding-left del .container-fluid (px-3) */
  position:relative;
  align-self:stretch;
  display:flex;align-items:center;gap:.5rem;
  background:#fff;
  border-radius:0;
  box-shadow:none;
  padding:0 1rem 0 .6rem;
  margin-top:calc(-1 * var(--bs-navbar-padding-y,.5rem) - env(safe-area-inset-top,0px));
  margin-bottom:calc(-1 * var(--bs-navbar-padding-y,.5rem));
  margin-left:calc(-1 * var(--brand-edge-gap));
}
@media (min-width:768px){
  .navbar-brand{--brand-edge-gap:1.5rem;} /* igual a px-md-4 */
}
@media (max-width:575.98px){
  .navbar-brand{--brand-edge-gap:.75rem;} /* igual al padding móvil del .container-fluid */
}
.navbar-brand img{filter:none;}
.navbar-brand span{
  letter-spacing:.16em;font-weight:700;font-size:.8rem;text-transform:uppercase;color:var(--brand-black);
}
.navbar .badge{font-weight:500;}
.navbar-collapse .nav-link,
.navbar-collapse a.text-light{
  position:relative;transition:color .15s ease,background-color .15s ease;
  display:inline-flex;align-items:center;gap:.4rem;border-radius:.4rem;padding:.35rem .6rem;
}
.navbar-collapse a.text-light:hover{color:#fff !important;background:#262626;}
.navbar-collapse a.nav-icon-link i{font-size:.95rem;opacity:.85;}

/* En móvil la barra inferior (.bottom-tabbar) ya cubre Usuarios/Roles/Yo, y "cerrar sesión"
   vive en Mi cuenta -- así que el botón de menú de arriba (☰) es puro duplicado, se oculta
   junto con el panel que abría. Sin eso ahí, el logo queda solo: se centra y se le da más
   aire arriba para que no se pegue al reloj/batería del celular. */
@media (max-width:767.98px){
  .navbar.bg-dark{
    background:#fff !important;
    padding-top:calc(env(safe-area-inset-top,0px) + .65rem);
    padding-bottom:.65rem;
  }
  .navbar-toggler,
  .navbar-collapse{display:none !important;}
  .navbar > .container-fluid{justify-content:center;}
  .navbar-brand{
    align-self:auto;
    margin:0;
    padding:.5rem 1.1rem;
    border-radius:.6rem;
    box-shadow:none;
  }
}

.user-avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--brand-red);
  color:#fff;font-weight:700;font-size:.75rem;flex-shrink:0;
}
.role-badge{
  background:rgba(255,255,255,.1) !important;
  border:1px solid rgba(255,255,255,.2);
  text-transform:uppercase;font-size:.65rem;letter-spacing:.06em;font-weight:600;
}

/* ---------- Botones, links, acentos ---------- */
a{color:var(--brand-red);}
a:hover{color:var(--brand-red-dark);}
.btn{font-weight:600;border-radius:.5rem;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
.btn-primary{
  background:linear-gradient(155deg,var(--brand-red),var(--brand-red-dark));
  border-color:var(--brand-red-dark);
  box-shadow:var(--shadow-red);
}
.btn-primary:hover,.btn-primary:focus{
  background:linear-gradient(155deg,#b81f28,var(--brand-red-dark)) !important;
  border-color:var(--brand-red-dark) !important;
  box-shadow:0 6px 16px -4px rgba(124,18,25,.45);
  transform:translateY(-1px);
}
.btn-primary:active{background-color:var(--brand-red-dark) !important;border-color:var(--brand-red-dark) !important;transform:translateY(0);}
.btn-outline-primary{color:var(--brand-red);border-color:var(--brand-red);}
.btn-outline-primary:hover{background-color:var(--brand-red);border-color:var(--brand-red);transform:translateY(-1px);}
.btn-outline-secondary{border-color:#DCDBD7;color:#1A1A19;}
.btn-outline-secondary:hover{border-color:var(--brand-red);color:var(--brand-red);background:transparent;transform:translateY(-1px);}
.btn-outline-danger:hover{transform:translateY(-1px);}
.btn-outline-success{color:var(--ok-green);border-color:var(--ok-green);}
.btn-sm{border-radius:.45rem;}
@media (max-width:767.98px){.btn:hover{transform:none;}} /* el "hover" persistente en touch se ve pegado -- solo aplica en desktop */

.badge{font-weight:600;letter-spacing:.02em;border-radius:.35rem;padding:.4em .65em;}
/* Diagnóstico = azul claro, Proyecto = azul sólido (mismos colores del mockup) */
.badge.bg-info{background:#E3EFFB !important;color:#1C6FBD !important;}
.badge.bg-primary{background:#1C5C9E !important;}
.badge.bg-secondary{background-color:#EFEFEC !important;color:#6D6D67 !important;}
.role-badge.bg-secondary{background-color:rgba(255,255,255,.1) !important;color:#fff !important;}
/* activo/cerrado ya usan bg-success/bg-secondary en las tablas */
.badge.bg-success{background:#E7F4EC !important;color:#0F6B41 !important;}

.nav-tabs{border-bottom-color:var(--border-soft);}
.nav-tabs .nav-link{color:#787872;font-weight:600;border:none;border-bottom:2px solid transparent;border-radius:0;padding:0 .2rem .7rem;margin-right:1.5rem;transition:color .15s ease,border-color .15s ease;}
.nav-tabs .nav-link:hover{color:var(--text-primary);}
.nav-tabs .nav-link.active{color:var(--text-primary);font-weight:600;background:transparent;border-bottom-color:var(--brand-red);}

.form-control,.form-select{border-radius:.5rem;border-color:#DCDBD7;}
.form-control:focus,.form-select:focus{border-color:var(--brand-red);box-shadow:0 0 0 3px rgba(168,24,32,.14);}
.form-check-input:checked{background-color:var(--brand-red);border-color:var(--brand-red);}
.form-label{font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muteder);}

.alert{border-radius:.6rem;border:none;box-shadow:var(--shadow-sm);}
.alert-success{--bs-alert-bg:#e9f7ef;--bs-alert-color:#0f5132;}
.alert-danger{--bs-alert-bg:#fdecee;--bs-alert-color:#7C1219;}
.alert-warning{--bs-alert-bg:#fff6e5;--bs-alert-color:#7a5200;}
.alert-light{background:#fff;box-shadow:var(--shadow-sm);}

.breadcrumb{font-size:.78rem;}
.breadcrumb-item a{color:var(--text-muted);font-weight:500;}
.breadcrumb-item + .breadcrumb-item::before{color:#c2c2bd;}
.breadcrumb-item.active{color:var(--text-primary);font-weight:600;}

/* ---------- Tarjetas / superficies ---------- */
.card{
  border:1px solid var(--border-soft);border-radius:.75rem;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.row.g-3 > div > .card.h-100:hover{border-color:#CFCEC9;box-shadow:var(--shadow-md);transform:translateY(-3px);}
@media (max-width:767.98px){.row.g-3 > div > .card.h-100:hover{transform:none;}}
.card.h-100 h5 a{color:var(--text-primary);font-weight:700;}
.card.h-100 h5 a:hover{color:var(--brand-red);}

.text-brand{color:var(--brand-red);}

/* Chip de color detrás del icono de un título de página (ej. "Empresas (clientes)") */
.page-title-icon{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:34px;height:34px;border-radius:.6rem;
  background:linear-gradient(155deg,var(--brand-red),var(--brand-red-dark));
  color:#fff;font-size:.95rem;
  box-shadow:0 4px 12px -4px rgba(124,18,25,.5);
}

.empresa-card{display:flex;flex-direction:column;position:relative;overflow:hidden;}
.empresa-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand-red-dark),var(--brand-red),#d9636b);
  opacity:.55;transition:opacity .2s ease;
}
.empresa-card:hover::before{opacity:1;}
.empresa-icon{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:44px;height:44px;border-radius:.65rem;margin-top:.1rem;
  background:linear-gradient(155deg,var(--brand-red-light),#f0c5ca);
  color:var(--brand-red-dark);font-size:1.2rem;
  box-shadow:0 3px 10px -4px rgba(168,24,32,.35);
  transition:transform .2s ease;
}
.empresa-card:hover .empresa-icon,
.empresa-card:hover .empresa-logo{transform:scale(1.06);}
.empresa-logo{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:44px;height:44px;border-radius:.65rem;margin-top:.1rem;
  background:#fff;border:1px solid var(--border-soft);overflow:hidden;padding:.2rem;
  box-shadow:var(--shadow-sm);transition:transform .2s ease;
}
.empresa-logo img{width:100%;height:100%;object-fit:contain;}
.empresa-logo-lg{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:56px;height:56px;border-radius:.7rem;
  background:#fff;border:1px solid var(--border-soft);overflow:hidden;padding:.25rem;
  box-shadow:var(--shadow-sm);
}
.empresa-logo-lg img{width:100%;height:100%;object-fit:contain;}
.empresa-card h5{font-size:1.08rem;}
.empresa-card h5 a{transition:color .15s ease;}
.empresa-card .text-muted.small{font-size:.8rem;}
.lineas-badge{
  background:var(--brand-red-light) !important;color:var(--brand-red-dark) !important;
  font-size:.72rem;display:inline-flex;align-items:center;gap:.35rem;padding:.42em .7em;
}
.lineas-badge i{font-size:.85em;}

/* ---------- Tarjetas de semáforo (Reporte de utilidad) ---------- */
.utilidad-card{
  border-radius:.9rem;padding:1.75rem 1.9rem 1.6rem;color:#fff;
  box-shadow:0 1px 2px rgba(23,25,27,.08);
}
.utilidad-card.ok{background:var(--ok-green);box-shadow:0 1px 2px rgba(23,25,27,.08),0 18px 40px -24px rgba(17,107,69,.55);}
.utilidad-card.bad{background:var(--bad-red);box-shadow:0 1px 2px rgba(23,25,27,.08),0 18px 40px -24px rgba(194,48,30,.5);}
.utilidad-card .uc-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);}
.utilidad-card .uc-pct{font-family:var(--font-mono);font-weight:600;letter-spacing:-.03em;line-height:.95;color:#fff;margin:1rem 0 0;font-size:clamp(2.5rem,7vw,4.2rem);}
.utilidad-card .uc-foot{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.22);}
.utilidad-card .uc-amount{font-family:var(--font-mono);font-size:1.35rem;font-weight:500;color:#fff;letter-spacing:-.02em;}
.utilidad-card .uc-base{margin-top:.25rem;font-size:.8rem;color:rgba(255,255,255,.78);}
.utilidad-card .role-badge{color:#fff;white-space:nowrap;}

/* ---------- Tablas responsive ---------- */
.table-responsive{border-radius:.7rem;overflow-x:auto;overflow-y:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border-soft);}
table.table{margin-bottom:0;border-collapse:collapse;}
.table-sm td,.table-sm th{padding:.65rem .75rem;vertical-align:middle;}
/* Cuadrícula visible tipo Excel: línea entre cada celda, no solo entre filas.
   En móvil, la media query de table-cards de más abajo sobreescribe esto con !important. */
.table th,
.table td{border:1px solid var(--border-table);}
.table thead th{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muteder);
  background:#FAFAF8;border-color:var(--border-table);
}
.table tbody tr{transition:background-color .12s ease;border-color:var(--border-softer);}
.table-hover tbody tr:hover,
table.table tbody tr:hover{background-color:#FBFBF9;}

/* ---------- Encabezados de página: apilan en móvil ---------- */
.page-header{
  display:flex;flex-direction:column;gap:.6rem;
  margin-bottom:1rem;
}
.page-header .page-actions{display:flex;flex-wrap:wrap;gap:.4rem;}
@media (min-width:576px){
  .page-header{flex-direction:row;align-items:center;justify-content:space-between;}
}

/* ---------- Utilidades responsive ---------- */
.week-input{max-width:130px;}

@media (max-width:575.98px){
  .container-fluid{padding-left:.75rem;padding-right:.75rem;}
  h4{font-size:1.15rem;}
  .btn-sm{padding:.3rem .55rem;font-size:.8rem;}
  .card{padding:.85rem !important;}
  .modal-dialog{margin:.5rem;}
  .navbar-brand img{height:20px !important;}
  .breadcrumb{font-size:.75rem;flex-wrap:wrap;}
}

/* Formularios dentro de modales: que los inputs no obliguen a hacer zoom/scroll horizontal en iOS */
input,select,textarea{font-size:16px;}
@media (min-width:576px){
  input,select,textarea{font-size:1rem;}
}

/* ---------- Tablas -> tarjetas de verdad en móvil (sin scroll lateral) ----------
   Cada <tr> se vuelve una tarjeta con layout flex + `order`, para poder armar un
   encabezado real (título + badge de estatus), un cuerpo en cuadrícula de 2 columnas
   con etiqueta arriba/valor abajo, y un pie de acciones con botones grandes al tacto.
   Los campos que deben protagonizar la tarjeta llevan las clases `tc-title`/`tc-badge`
   directamente en el <td> correspondiente (ver linea.php, facturas.php, etc.). */
@media (max-width:767.98px){
  .table-responsive{overflow-x:visible !important;box-shadow:none;border:none;}
  table.table-cards{border-collapse:separate;border-spacing:0;}
  table.table-cards thead{display:none;}
  table.table-cards, table.table-cards tbody{display:block; width:100%;}
  table.table-cards{background:transparent !important;}
  /* Algunas tablas llevan table-layout:fixed y min-width en línea para el ancho fijo de
     escritorio (ver linea.php, roles.php, facturas.php) -- hay que anularlo aquí, si no
     la tarjeta hereda ese ancho mínimo y no cabe en la pantalla. */
  table.table-cards{table-layout:auto !important; width:100% !important; min-width:0 !important;}

  table.table-cards tr{
    display:flex; flex-wrap:wrap; align-items:flex-start;
    background:#fff; border-radius:1rem;
    box-shadow:0 1px 2px rgba(23,25,27,.06), 0 10px 24px -14px rgba(23,25,27,.18);
    margin-bottom:.85rem; padding:1rem 1.1rem 0.15rem; border:1px solid var(--border-soft);
  }
  table.table-cards tr.table-cards-foot{background:#FAFAF8;}

  /* Título: primera línea de la tarjeta, grande y a la izquierda */
  table.table-cards td.tc-title{
    order:1; flex:1 1 auto; min-width:0; display:block; text-align:left;
    font-size:1.05rem; font-weight:700; color:var(--text-primary); line-height:1.25;
    padding:0 0 .75rem; border:none !important;
  }
  table.table-cards td.tc-title::before{content:none;}

  /* Badge/estatus: junto al título, alineado arriba a la derecha */
  table.table-cards td.tc-badge{
    order:2; flex:0 0 auto; display:block; text-align:right;
    padding:0 0 .75rem; border:none !important;
  }
  table.table-cards td.tc-badge::before{content:none;}

  /* Subtítulo opcional: línea completa, texto secundario */
  table.table-cards td.tc-subtitle{
    order:3; flex:1 1 100%; display:block; text-align:left;
    font-size:.82rem; color:var(--text-muted); margin-top:-.5rem;
    padding:0 0 .75rem; border:none !important;
  }
  table.table-cards td.tc-subtitle::before{content:none;}

  /* Quiebre de línea forzado: un item invisible que exige el 100% del ancho, para que
     nada de la cuadrícula (order:4) pueda colarse en la fila del título aunque le
     alcance el espacio de sobra (flexbox permite encoger antes de saltar de línea). */
  table.table-cards tr::after{content:''; order:3; flex-basis:100%; width:0;}

  /* Campos normales: cuadrícula de 2 columnas, etiqueta arriba / valor abajo.
     :not() excluye explícitamente los roles especiales -- así no compite en
     especificidad CSS con .tc-title/.tc-badge/etc. cuando la celda tiene ambos
     data-label y una de esas clases. */
  table.table-cards td[data-label]:not(.tc-title):not(.tc-badge):not(.tc-subtitle):not(.tc-full):not(.tc-actions){
    order:4; flex:1 1 46%; min-width:120px; display:block; text-align:left;
    padding:.6rem 0; border:none !important; border-top:1px solid #f1f0ed !important;
    font-size:.88rem; font-weight:600; color:var(--text-primary);
  }
  table.table-cards td[data-label]:not(.tc-title):not(.tc-badge):not(.tc-subtitle)::before{
    content:attr(data-label); display:block; margin-bottom:.2rem;
    font-weight:700; color:var(--text-muteder); font-size:.64rem;
    text-transform:uppercase; letter-spacing:.06em; font-family:'Public Sans',sans-serif;
  }
  table.table-cards td:not([data-label])::before,
  table.table-cards td[data-label=""]::before{content:none;}

  /* Bloque de ancho completo (ej. archivos adjuntos) */
  table.table-cards td.tc-full{
    order:5; flex:1 1 100%; display:block; text-align:left;
    padding:.6rem 0; border:none !important; border-top:1px solid #f1f0ed !important;
  }
  table.table-cards td.tc-full::before{display:block; margin-bottom:.3rem;}

  /* Acciones: pie de la tarjeta, botones grandes y cómodos al tacto */
  table.table-cards td.tc-actions{
    order:99; flex:1 1 100%; display:flex; gap:.5rem;
    padding:.75rem 0 .85rem; margin-top:.4rem;
    border:none !important; border-top:1px solid var(--border-soft) !important;
  }
  table.table-cards td.tc-actions::before{content:none;}
  table.table-cards td.tc-actions > .btn,
  table.table-cards td.tc-actions > form{flex:1;}
  table.table-cards td.tc-actions .btn{
    width:100%; min-height:2.6rem; display:inline-flex; align-items:center; justify-content:center;
  }
}

/* Iconos en botones de accion */
.btn-icon{display:inline-flex; align-items:center; gap:.3rem; line-height:1;}

/* Un monto que en realidad es un botón: "de dónde salió este número" -- se ve como el número
   normal de la tabla (mismo mono/tabular-nums), pero con guión punteado de subrayado y cambia
   a rojo de marca al pasar el mouse, para que se note que es clicable sin gritarlo. */
.btn-link-monto{
  background:none;border:none;padding:0;margin:0;font:inherit;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
  cursor:pointer;transition:color .12s ease;
}
.btn-link-monto:hover,.btn-link-monto:focus{color:var(--brand-red);}

/* ---------- Barra de navegación inferior + botón flotante (solo móvil) ----------
   Hace que la app se sienta como una app instalada de verdad: tabs fijos abajo
   (como iOS/Android) y un botón "+" flotante para la acción principal de cada
   pantalla, en vez del botón de ancho completo arriba. */
.bottom-tabbar,.fab{display:none;}
@media (max-width:767.98px){
  body{padding-bottom:calc(4.35rem + env(safe-area-inset-bottom,0px));}

  .bottom-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1035;
    background:#fff; border-top:1px solid var(--border-soft);
    padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 20px -8px rgba(23,25,27,.15);
    -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
  }
  .bottom-tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem;
    color:var(--text-muted); text-decoration:none; font-size:.64rem; font-weight:600;
    padding:.35rem 0 .15rem; border-radius:.6rem; transition:color .12s ease;
  }
  .bottom-tabbar a i{font-size:1.3rem; line-height:1;}
  .bottom-tabbar a.active{color:var(--brand-red);}
  .bottom-tabbar a:active{background:#f4f4f2;}
  .bottom-tabbar a .tab-avatar{
    width:22px;height:22px;border-radius:50%;background:var(--brand-black);color:#fff;
    font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;
    object-fit:cover;
  }

  .fab{
    display:flex; position:fixed; z-index:1040; right:1.1rem;
    bottom:calc(4.7rem + env(safe-area-inset-bottom,0px) - var(--ios-standalone-gap));
    width:56px; height:56px; border-radius:50%; border:none;
    background:linear-gradient(155deg,var(--brand-red),var(--brand-red-dark)); color:#fff;
    align-items:center; justify-content:center; font-size:1.55rem;
    box-shadow:0 10px 22px -6px rgba(124,18,25,.55), 0 2px 8px rgba(0,0,0,.18);
    -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
    transition:transform .1s ease;
  }
  .fab:active{transform:scale(.92); background:var(--brand-red-dark);}
  .fab i{line-height:1;}
}

/* Las tarjetas de tabla se sienten "presionables" al tacto */
@media (max-width:767.98px){
  table.table-cards tr:active{background:#fbfbfa;}
}

/* ---------- Modales ---------- */
.modal-content{border:1px solid var(--border-soft);border-radius:.75rem;box-shadow:var(--shadow-lg);overflow:hidden;}
.modal-header{background:#FCFCFB;border-bottom:1px solid var(--border-softer);}
.modal-header .modal-title{font-weight:700;font-size:1rem;}

/* ---------- Scrollbar sutil ---------- */
::-webkit-scrollbar{height:8px;width:8px;}
::-webkit-scrollbar-thumb{background:#d8d3d4;border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--brand-red);}

/* Se quitó la animación de entrada (.container-fluid > * {animation:...}) que había aquí:
   CUALQUIER elemento con una animación/transición de opacity o transform crea su propia
   "capa de apilamiento" (stacking context) de forma PERMANENTE mientras esa regla CSS le
   siga aplicando -- no solo mientras se está reproduciendo. Como casi todos los modales de
   la app viven anidados adentro de .container-fluid, quedaban atrapados en esa capa y el
   fondo oscuro del modal (que Bootstrap agrega aparte, al final de <body>) les quedaba
   ENCIMA aunque su z-index fuera mayor -- se veían bien pero no se podía hacer clic en nada
   de adentro. Si se quiere una animación de entrada, tiene que ir en un elemento que NUNCA
   contenga un modal (o limpiarse con JS después de que termine), no aquí.