/* ============================================================
   notaria-tabler.css
   Capa de estilos institucional sobre Tabler (Bootstrap 5).
   NO contiene lógica; solo apariencia. Reutilizable en todas
   las pantallas que se migren a Tabler.
   Paleta institucional tomada del sistema actual:
     rojo  #c53030   vino #7b1d1d   azul marino #1a365d
     gris de fondo #f5f5f5
   ============================================================ */

:root {
  /* Sobrescribe el color primario de Tabler por el rojo institucional */
  --tblr-primary:       #c53030;
  --tblr-primary-rgb:   197, 48, 48;
  --notaria-rojo:       #c53030;
  --notaria-rojo-dark:  #9b2c2c;
  --notaria-vino:       #7b1d1d;
  --notaria-azul:       #1a365d;
  --notaria-gris-bg:    #f5f5f5;
}

body {
  background-color: var(--notaria-gris-bg);
}

/* Botones primarios con el rojo institucional */
.btn-primary {
  --tblr-btn-bg:            var(--notaria-rojo);
  --tblr-btn-border-color:  var(--notaria-rojo);
  --tblr-btn-hover-bg:      var(--notaria-rojo-dark);
  --tblr-btn-hover-border-color: var(--notaria-rojo-dark);
  --tblr-btn-active-bg:     var(--notaria-vino);
}

/* Enlaces y acentos */
a { color: var(--notaria-rojo); }
a:hover { color: var(--notaria-rojo-dark); }

/* Encabezado de página con línea institucional */
.page-title { color: var(--notaria-azul); }

/* ---------- Login ---------- */
.page-center-notaria {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-login {
  max-width: 420px;
  width: 100%;
  border-top: 4px solid var(--notaria-rojo);
}
.card-login .login-logo {
  max-width: 220px;
  height: auto;
}

/* ---------- Badges de estado (para etapas posteriores) ---------- */
.badge-estado { font-weight: 600; letter-spacing: .2px; }
.badge-pendiente   { background: #fed7aa; color: #9c4221; }
.badge-enproceso   { background: #bee3f8; color: #2a4365; }
.badge-autorizado  { background: #c6f6d5; color: #22543d; }
.badge-archivado   { background: #e2e8f0; color: #4a5568; }
.badge-vencido     { background: #fed7d7; color: #9b2c2c; }

/* ---------- Tablas compactas institucionales (etapas posteriores) ---------- */
.table-notaria thead th {
  background: var(--notaria-vino);
  color: #fff;
  white-space: nowrap;
}

/* ---------- Resultados de búsqueda (listar.php / pinta_div1.php) ---------- */
/* Contenedor como tarjeta Tabler con scroll y encabezado fijo */
.tabla-tramites-wrap {
  background: #fff;
  border: 1px solid #e6e7e9;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  overflow: auto;
  max-height: 74vh;
}
/* Tabla compacta, estilo Tabler */
table.tabla-tramites {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  color: #364152;
  background: #fff;
  border: 1px solid #e6e7e9;
  border-radius: 8px;
  /* NUNCA poner overflow:hidden aquí — rompe position:sticky del thead */
  overflow: visible;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
/* Encabezado institucional — cubre tablas con <thead> (listar.php)
   y tablas con <tr bgcolor> sin thead (pinta_div1.php). El fondo de CSS
   prevalece sobre el atributo bgcolor inline. */
table.tabla-tramites th {
  background: #7b1d1d !important;   /* vino institucional; !important vence al bgcolor inline */
  color: #fff !important;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  padding: 8px 10px;
  border-bottom: 2px solid var(--notaria-rojo);
  vertical-align: middle;
}
table.tabla-tramites th a { color: #fff !important; text-decoration: none; }
table.tabla-tramites thead th {
  position: sticky; top: 0; z-index: 3;
}
table.tabla-tramites td {
  padding: 6px 10px;
  border-top: 1px solid #f0f1f3;
  vertical-align: middle;
}
/* Cebra + hover */
table.tabla-tramites tbody tr:nth-child(odd) td { background: #fcfcfd; }
table.tabla-tramites tbody tr:hover td { background: #faf0f0; }
/* Imágenes de acción a tamaño uniforme y discreto */
table.tabla-tramites td img { vertical-align: middle; }

/* Paginación institucional */
.tabla-tramites-paginacion .btn { --tblr-btn-color: var(--notaria-rojo); }