/* ============================================================
   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 ---------- */
.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 ---------- */
.table-notaria thead th {
  background: var(--notaria-vino);
  color: #fff;
  white-space: nowrap;
}

/* ---------- Resultados de búsqueda (listar.php / pinta_div1.php y grids de módulo) ---------- */
/* 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> y tablas con
   <tr>/<th bgcolor> sin thead. El fondo de CSS prevalece sobre 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 — vence a los width/height
   HTML heredados (30/40/50/65px según la celda) que antes hacían la tabla
   mucho más ancha de lo necesario. */
table.tabla-tramites td img { vertical-align: middle; width: 22px; height: 22px; object-fit: contain; }
/* Las celdas de datos SÍ pueden envolver texto (a diferencia del thead, que
   se mantiene en una sola línea); así columnas de descripción/observaciones
   no fuerzan el ancho total de la tabla más allá de la pantalla. */
table.tabla-tramites td { white-space: normal; word-break: break-word; max-width: 260px; }
table.tabla-tramites td.nowrap, table.tabla-tramites td[nowrap] { white-space: nowrap; max-width: none; }
/* Columna de descripción/observaciones: más ancha que el resto y con texto
   más compacto, para que el contenido largo respire sin estirar la tabla. */
table.tabla-tramites td.td-desc {
  min-width: 280px;
  max-width: 420px;
  font-size: 11px;
  line-height: 1.35;
}
/* Celda "informativa" (ID, folio/expediente, volumen, fecha...) — reemplaza
   el inline style="color:firebrick;font:bold;font-size:12px" repetido en
   los grids de trámites, con el color institucional en vez de rojo puro. */
table.tabla-tramites td.td-info {
  color: #7b1d1d;
  font-weight: 600;
  font-size: 12px;
}
/* Sub-tabla horizontal dentro de una celda (ej. Presupuesto/Recibos/Entregas
   en una sola fila). Neutraliza la cebra y bordes que heredaría de
   .tabla-tramites, y el recuadro con sombra que el reset legacy
   (style-clientes.css: table{box-shadow:1px 1px 5px black}) aplica a
   CUALQUIER <table> de la página. */
table.tabla-tramites table.celdas-horiz {
  width: 100%;
  border-collapse: collapse;
  box-shadow: none !important;
  border: none !important;
}
table.tabla-tramites table.celdas-horiz td {
  background: transparent !important;
  border: none;
  border-top: none !important;
  box-shadow: none !important;
  padding: 3px 6px;
  max-width: none;
  text-align: center;
  vertical-align: top;
}
table.tabla-tramites table.celdas-horiz td + td { border-left: 1px dashed #e2e8f0 !important; }

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

/* Paginación reusable de grids (Poderes/Actas/Ratificaciones, Escrituras
   Públicas, RENAP, etc.) — mismo patrón visual en todos los módulos. */
.paginacion-renap { text-align: center; margin: 10px 0; }
.paginacion-renap a, .paginacion-renap span {
    display: inline-block; padding: 5px 10px; margin: 0 2px; border-radius: 4px;
    text-decoration: none; font-size: 12px;
}
.paginacion-renap a { background: #edf2f7; color: #2c5282; }
.paginacion-renap a:hover { background: #cbd5e0; }
.paginacion-renap span.activa { background: #2c5282; color: #fff; font-weight: bold; }

/* Metadatos de Word (creador/version) mostrados junto a los enlaces de
   descarga de documentos .docx subidos por el usuario. Solo informativo. */
.meta-word-doc {
  font-size: 10px;
  color: #718096;
  margin-top: 2px;
  line-height: 1.3;
}
.meta-word-doc-error {
  color: #c53030;
  font-weight: 600;
}