:root {
  /* Paleta Empresarial / Corporativa */
  --verde: #000000;
  /* Azul Corporativo Clásico (Primary) */
  --verde-oscuro: #000000;
  /* Slate muy oscuro (Navbar, Headers) */
  --verde-claro: #e0f2fe;
  /* Azul muy claro (Fondos, hovers sutiles) */
  --verde-mid: #0284c7;
  /* Azul vibrante/intermedio (Botones principales) */

  --azul: #1d4ed8;
  --azul-claro: #eff6ff;
  --rojo: #dc2626;
  --rojo-claro: #fef2f2;
  --naranja: #ea580c;
  --naranja-claro: #fff7ed;

  --gris-1: #f8fafc;
  --gris-2: #f1f5f9;
  --gris-3: #e2e8f0;
  --gris-4: #cbd5e1;
  --gris-5: #94a3b8;
  --gris-6: #64748b;
  --gris-7: #334155;
  --negro: #000000;
  --blanco: #ffffff;

  /* Sombras más sutiles y elegantes */
  --sombra: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sombra-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --sombra-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);

  /* Bordes ligeramente más definidos (estilo corporativo) */
  --r: 6px;
}

html {
  overflow-x: clip;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow-x: clip;
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--gris-2);
  color: var(--negro);
  font-size: 14px;
  line-height: 1.5;
}

/* ── TOP NAVBAR ── */
.navbar {
  background: var(--verde-oscuro);
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 56px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbar-logo {
  width: 32px;
  height: 32px;
  background: var(--verde-mid);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

.navbar-brand h1 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.navbar-brand span {
  color: #ffffff;
  font-size: 11px;
  display: none;
}

@media (min-width: 480px) {
  .navbar-brand span {
    display: inline;
  }
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-nav-outline {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-nav-outline:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-nav-primary {
  background: var(--verde-mid);
  color: #fff;
}

.btn-nav-primary:hover {
  background: #0369a1;
}

.btn-nav-pdf {
  background: #dc2626;
  color: #fff;
}

.btn-nav-pdf:hover {
  background: #b91c1c;
}

.btn-nav .label-text {
  display: none;
}

@media (min-width: 600px) {
  .btn-nav .label-text {
    display: inline;
  }
}

/* ── PROGRESS BAR ── */
.progress-bar-wrap {
  background: var(--gris-3);
  height: 3px;
}

.progress-bar-fill {
  height: 100%;
  background: var(--verde-mid);
  transition: width 0.3s ease;
  width: 0%;
}

/* ── LAYOUT ── */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

/* ── STEP HEADER ── */
.form-header {
  background: var(--verde-oscuro);
  border-radius: 12px;
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--sombra-lg);
}

.form-header-left h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.form-header-left p {
  color: #ffffff;
  font-size: 12px;
  margin-top: 2px;
}

.folio-wrap {
  display: flex;
  align-items: stretch;
  background: var(--blanco);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--sombra-md);
  border: 1.5px solid transparent;
  transition: all 0.2s ease;
  height: 48px;
}

.folio-wrap:has(input:focus) {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-claro);
}

/* Contorno rojo eliminado por petición del usuario */

.folio-wrap label {
  background: var(--gris-1);
  color: var(--gris-7);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--gris-3);
  margin: 0;
}

.folio-wrap input {
  background: var(--blanco);
  border: none;
  color: var(--negro);
  font-size: 17px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  width: 120px;
  padding: 0 15px;
  outline: none;
  text-transform: uppercase;
}

.folio-wrap input::placeholder {
  color: var(--gris-4);
  font-weight: 500;
}

/* ── STEP INDICATOR ── */
.steps-dropdown {
  margin-bottom: 1.5rem;
  position: relative;
}

.btn-step-menu {
  width: 100%;
  background: var(--blanco);
  border: 1px solid var(--gris-3);
  padding: 0.8rem 1.25rem;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  color: var(--negro);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: all 0.2s;
}

.btn-step-menu:hover {
  border-color: var(--verde);
  color: var(--verde);
}

.btn-step-menu i {
  color: var(--verde);
  font-size: 16px;
}

.steps-nav {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 1rem;
  background: var(--blanco);
  border: 1px solid var(--gris-3);
  border-radius: var(--r);
  margin-top: 0.5rem;
  box-shadow: var(--sombra-md);
}

.steps-nav.show {
  display: flex;
}

.step-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.45rem 0.9rem;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: var(--blanco);
  border: 1px solid var(--gris-3);
  color: var(--gris-6);
  transition: all 0.15s;
  white-space: nowrap;
}

.step-pill:hover {
  border-color: var(--verde);
  color: var(--verde);
}

.step-pill.active {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.step-pill.done {
  background: var(--verde-claro);
  border-color: var(--verde);
  color: var(--verde-oscuro);
}

.step-pill .num {
  width: 18px;
  height: 18px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.step-pill.active .num {
  background: rgba(255, 255, 255, 0.25);
}

/* ── CARDS ── */
.card {
  background: var(--blanco);
  border: 1px solid var(--gris-3);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  margin-bottom: 1rem;
  overflow: hidden;
}

.card-header {
  background: var(--gris-1);
  border-bottom: 1px solid var(--gris-3);
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.ci-verde {
  background: var(--verde-claro);
  color: var(--verde);
}

.ci-azul {
  background: var(--azul-claro);
  color: var(--azul);
}

.ci-rojo {
  background: var(--rojo-claro);
  color: var(--rojo);
}

.ci-naranja {
  background: var(--naranja-claro);
  color: var(--naranja);
}

.card-header h3 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--negro);
}

.card-body {
  padding: 1.25rem;
}

/* ── FORM GRID ── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gris-7);
}

.req {
  color: var(--rojo);
  margin-left: 2px;
}

.form-group input,
.form-group select,
.form-group textarea {
  border: 1.5px solid var(--gris-3);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-size: 13px;
  color: var(--negro);
  background: var(--blanco);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.form-group select {
  cursor: pointer;
}

.form-group input.valid {
  border-color: var(--verde);
}

.form-group input.invalid {
  border-color: var(--rojo);
}

.field-hint {
  font-size: 10px;
  color: var(--gris-5);
  margin-top: 2px;
}

/* ── TABLES ── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 480px;
}

table.audit-table th {
  background: #1e293b;
  color: #fff;
  padding: 0.5rem 0.65rem;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

table.audit-table th.accion {
  text-align: left;
  background: #0570f2;
  background: #1e293b;
  min-width: 160px;
}

.h-pemex {
  background: #059669 !important;
}

.h-comp {
  background: #000000 !important;
}

.h-sub-pemex {
  background: #34d399 !important;
  font-weight: 500 !important;
}

.h-sub-comp {
  background: #3b82f6 !important;
  font-weight: 500 !important;
}

table.audit-table td {
  border: 1px solid var(--gris-3);
  padding: 0.4rem 0.55rem;
  vertical-align: middle;
}

table.audit-table tr:nth-child(even) td {
  background: var(--gris-1);
}

table.audit-table tr:hover td {
  background: #f0fdf6;
}

table.audit-table td:first-child {
  font-weight: 700;
  color: var(--negro);
  text-align: left;
  background: var(--verde-claro) !important;
  font-size: 14px;
  border-left: 5px solid var(--azul);
  padding: 0.6rem 0.85rem;
}

table.audit-table td input[type="number"] {
  width: 100%;
  min-width: 50px;
  border: 1px solid var(--gris-3);
  border-radius: 5px;
  padding: 0.3rem 0.3rem;
  font-size: 12px;
  text-align: center;
  background: var(--blanco);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
}

table.audit-table td input:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ── EVALUATION CARDS (Replaces old audit-table) ── */
.eval-cards-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.eval-card {
  background: var(--blanco);
  border: 1px solid var(--gris-4);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.eval-card-title {
  background: transparent;
  color: var(--negro);
  font-size: 15px;
  font-weight: 700;
  padding: 1.25rem 1.25rem 0.5rem 1.25rem;
  border-bottom: none;
  border-left: none;
}

.eval-card-content {
  display: flex;
  flex-direction: column;
}

.eval-card-entity {
  flex: 1;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: transparent;
}

.eval-card-entity:first-child {
  border-bottom: 1px dashed var(--gris-4);
}

.eval-card-entity:last-child {
  background: transparent;
}

.eval-card-entity-header {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.eval-card-entity-badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-block;
  padding: 0;
  border: none;
}

.badge-pemex {
  color: #059669;
  background: transparent;
}

.badge-comp {
  color: #000000;
  background: transparent;
}

.eval-card-inputs {
  display: flex;
  gap: 15px;
  justify-content: space-around;
  padding: 0 10px;
}

.eval-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.eval-input-group label {
  font-size: 13px;
  font-weight: 700;
  color: var(--gris-7);
}

.eval-input-group input[type="number"] {
  width: 100%;
  max-width: 60px;
  border: 1.5px solid var(--gris-4);
  border-radius: 4px;
  padding: 0.5rem;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  background: #fff;
  transition: border-color 0.2s;
}

.eval-input-group input[type="number"]:focus {
  outline: none;
  border-color: var(--azul);
}

/* ── EVAL TABLE ── */
.eval-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--gris-4);
}

.eval-table th {
  background: var(--gris-7);
  color: #fff;
  padding: 0.6rem 0.8rem;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid var(--gris-4);
}

.eval-table th:first-child {
  text-align: left;
}

.eval-table td {
  border: 1px solid var(--gris-4);
  padding: 0.6rem 0.8rem;
  vertical-align: middle;
}

.eval-table tr:nth-child(even) td {
  background: var(--gris-1);
}

.eval-table td:first-child {
  font-weight: 600;
  color: var(--gris-8);
}

.eval-table td:nth-child(2) {
  text-align: center;
  font-weight: 700;
  color: var(--naranja);
  font-size: 15px;
  font-family: 'IBM Plex Mono', monospace;
}

.eval-table td:nth-child(3) {
  text-align: center;
  color: var(--gris-6);
}

.eval-table td:last-child {
  text-align: center;
  font-weight: 700;
  color: var(--azul);
  font-size: 15px;
  font-family: 'IBM Plex Mono', monospace;
}

.eval-table tr.total-row td {
  background: var(--gris-2) !important;
  color: var(--negro) !important;
  font-weight: 700;
  font-size: 14px;
  border-top: 2px solid var(--gris-5);
}

.eval-table tr.total-row td:last-child {
  color: var(--azul) !important;
}

/* ── RESULTADOS ── */
.resultados-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 480px) {
  .resultados-grid {
    grid-template-columns: 1fr;
  }
}

.resultado-card {
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  text-align: center;
  border: 1px solid;
}

.resultado-card.c-total {
  background: var(--azul-claro);
  border-color: #93c5fd;
}

.resultado-card.c-iai {
  background: var(--rojo-claro);
  border-color: #fca5a5;
}

.resultado-card.c-ias {
  background: var(--verde-claro);
  border-color: #86efa7;
}

.resultado-card .val {
  font-size: 26px;
  font-weight: 800;
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1;
  margin-bottom: 4px;
}

.c-total .val {
  color: var(--azul);
}

.c-iai .val {
  color: var(--rojo);
}

.c-ias .val {
  color: var(--verde);
}

.resultado-card .lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gris-6);
}

/* ── OBSERVADOS ── */
.observados-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .observados-grid {
    grid-template-columns: 1fr;
  }
}

.observado-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1.5px solid var(--gris-3);
  border-left-width: 4px;
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  gap: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.observado-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.observado-item label {
  font-weight: 700;
  font-size: 14px;
  color: var(--gris-7);
  display: flex;
  align-items: center;
}

.observado-item.pemex {
  border-left-color: #10b981;
}

.observado-item.pemex label i {
  color: #10b981;
}

.observado-item.comp {
  border-left-color: #000000;
}

.observado-item.comp label i {
  color: #000000;
}

.observado-item input {
  width: 80px;
  border: 1.5px solid var(--gris-3);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
}

.observado-item input:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* ── TEXTAREAS ── */
.obs-textarea {
  width: 100%;
  border: 1.5px solid var(--gris-3);
  border-radius: var(--r);
  padding: 0.75rem 1rem;
  font-size: 13px;
  color: var(--negro);
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
}

.obs-textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 500px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ── REC TABLE ── */
.rec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 800px;
  background: var(--blanco);
  table-layout: fixed;
}

.rec-table th {
  background: var(--verde-oscuro);
  color: #fff;
  padding: 0.65rem 0.8rem;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Anchos de columnas en PC */
.rec-table th:nth-child(1) {
  width: 5%;
}

.rec-table th:nth-child(2) {
  width: 45%;
}

.rec-table th:nth-child(3) {
  width: 18%;
}

.rec-table th:nth-child(4) {
  width: 12%;
}

.rec-table th:nth-child(5) {
  width: 15%;
}

.rec-table th:nth-child(6) {
  width: 5%;
}

.rec-table th:nth-child(1),
.rec-table td:nth-child(1),
.rec-table th:nth-child(6),
.rec-table td:nth-child(6) {
  text-align: center;
}

/* Botón eliminar fila premium */
.btn-eliminar-fila {
  background: #fee2e2;
  color: #ef4444;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.btn-eliminar-fila:hover {
  background: #ef4444;
  color: #fff;
  transform: scale(1.08);
}

.rec-table td {
  border: 1px solid var(--gris-3);
  padding: 0.6rem 0.75rem;
  vertical-align: top;
}

.rec-table td:first-child {
  text-align: center;
  font-weight: 700;
  background: var(--gris-1);
  font-family: 'IBM Plex Mono', monospace;
  vertical-align: middle;
  color: var(--azul);
}

.rec-table td input,
.rec-table td select,
.rec-table td textarea,
.contacto-table td input,
.contacto-table td select,
.contacto-table td textarea {
  width: 100%;
  border: 1.5px solid var(--gris-3);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--negro);
  font-family: inherit;
  resize: vertical;
  background: var(--blanco);
  transition: all 0.2s ease;
}

.rec-table td select {
  margin-top: 6px;
}

.rec-table td input:focus,
.rec-table td select:focus,
.rec-table td textarea:focus,
.contacto-table td input:focus,
.contacto-table td select:focus,
.contacto-table td textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Aplicamos el diseño responsivo (tipo tarjeta) en todas las pantallas para la tabla de recomendaciones */
.rec-table {
  display: block !important;
  width: 100% !important;
  min-width: unset !important;
  border: none !important;
}

.rec-table thead {
  display: none !important;
}

.rec-table tbody {
  display: block !important;
  width: 100% !important;
}

.rec-table tr {
  display: block !important;
  width: 100% !important;
  border: 1.5px solid var(--gris-3) !important;
  border-top: 4px solid var(--verde) !important;
  border-radius: var(--r) !important;
  padding: 1.25rem !important;
  background: #f8fafc !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 1.5rem !important;
}

.rec-table td {
  display: block !important;
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 0.85rem !important;
  background: transparent !important;
}

.rec-table td:last-child {
  margin-bottom: 0 !important;
}

.rec-table td:nth-child(1) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: var(--verde-claro) !important;
  padding: 0.5rem 1rem !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--verde-oscuro) !important;
  border-radius: 6px !important;
  border-bottom: none !important;
  margin-bottom: 1.25rem !important;
  width: max-content !important;
}

.rec-table td:nth-child(1)::before {
  content: "Recomendación #";
  margin-right: 4px;
  font-weight: 700;
  color: var(--verde-oscuro);
}

.rec-table td:nth-child(2)::before {
  content: "Hallazgo / Recomendación (e imágenes):";
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--negro);
  margin-bottom: 4px;
  text-align: left;
}

.rec-table td:nth-child(3)::before {
  content: "Responsable y Empresa:";
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--negro);
  margin-bottom: 4px;
  text-align: left;
}

.rec-table td:nth-child(4)::before {
  content: "Fecha Compromiso:";
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--negro);
  margin-bottom: 4px;
  text-align: left;
}

.rec-table td:nth-child(5)::before {
  content: "Acción Inmediata:";
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--negro);
  margin-bottom: 4px;
  text-align: left;
}

.rec-table td:nth-child(6) {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-top: 0.5rem !important;
}

@media (min-width: 600px) {
  .rec-table tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
  }

  .rec-table td {
    margin-bottom: 0 !important;
  }

  .rec-table td:nth-child(1) {
    grid-column: 1 / span 3;
    margin-bottom: 0 !important;
  }

  .rec-table td:nth-child(2) {
    grid-column: 1 / span 3;
  }

  .rec-table td:nth-child(3) {
    grid-column: 1 / span 2;
  }

  .rec-table td:nth-child(4) {
    grid-column: 3;
  }

  .rec-table td:nth-child(5) {
    grid-column: 1 / span 2;
  }

  .rec-table td:nth-child(6) {
    grid-column: 3;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    margin-top: 0 !important;
  }
}

/* ── CONTACTO TABLE ── */
.contacto-table {
  display: block !important;
  width: 100% !important;
  min-width: unset !important;
  border: none !important;
}

.contacto-table thead {
  display: none !important;
}

.contacto-table tbody {
  display: block !important;
  width: 100% !important;
}

.contacto-table tr {
  display: block !important;
  width: 100% !important;
  border: 1.5px solid var(--gris-3) !important;
  border-top: 4px solid var(--verde) !important;
  border-radius: var(--r) !important;
  padding: 1.25rem !important;
  background: #f8fafc !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 1.5rem !important;
}

.contacto-table td {
  display: block !important;
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 0.85rem !important;
  background: transparent !important;
}

.contacto-table td:last-child {
  margin-bottom: 0 !important;
}

.contacto-table td:nth-child(1) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: var(--verde-claro) !important;
  padding: 0.5rem 1rem !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--verde-oscuro) !important;
  border-radius: 6px !important;
  border-bottom: none !important;
  margin-bottom: 1.25rem !important;
  width: max-content !important;
}

.contacto-table td:nth-child(1)::before {
  content: "Contacto #";
  margin-right: 4px;
  font-weight: 700;
  color: var(--verde-oscuro);
}

.contacto-table td:nth-child(2)::before {
  content: "Nombre del Contacto:";
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--negro);
  margin-bottom: 4px;
  text-align: left;
}

.contacto-table td:nth-child(3)::before {
  content: "Empresa:";
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--negro);
  margin-bottom: 4px;
  text-align: left;
}

.contacto-table td:nth-child(4)::before {
  content: "Comentario:";
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--negro);
  margin-bottom: 4px;
  text-align: left;
}

.contacto-table td:nth-child(5) {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-top: 0.5rem !important;
}

@media (min-width: 600px) {
  .contacto-table tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
  }

  .contacto-table td {
    margin-bottom: 0 !important;
  }

  .contacto-table td:nth-child(1) {
    grid-column: 1 / span 3;
    margin-bottom: 0 !important;
  }

  .contacto-table td:nth-child(2) {
    grid-column: 1 / span 2;
  }

  .contacto-table td:nth-child(3) {
    grid-column: 3;
  }

  .contacto-table td:nth-child(4) {
    grid-column: 1 / span 3;
    margin-top: 10px;
  }

  .contacto-table td:nth-child(5) {
    grid-column: 3;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    margin-top: 0 !important;
  }
}

.td-foto {
  text-align: center;
}

.foto-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px dashed var(--gris-4);
  border-radius: 6px;
  cursor: pointer;
  color: var(--gris-5);
  font-size: 16px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.foto-container:hover {
  border-color: var(--verde);
  color: var(--verde);
}

.foto-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── FIRMAS ── */
.firmas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 600px) {
  .firmas-grid {
    grid-template-columns: 1fr;
  }
}

.firma-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.preview-firma {
  width: 100%;
  height: 110px;
  background: var(--gris-1);
  border: 2px dashed var(--gris-4);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.2s;
}

.preview-firma img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preview-firma span {
  font-size: 11px;
  color: var(--gris-5);
}

.file-input {
  display: none;
}

.btn-subir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.85rem;
  background: var(--verde-claro);
  color: var(--verde-oscuro);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  border: 1px solid #86efae;
}

.btn-subir:hover {
  background: var(--verde);
  color: #fff;
}

.firma-nombre {
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--gris-4);
  text-align: center;
  padding: 0.4rem;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: transparent;
  color: var(--negro);
}

.firma-nombre:focus {
  border-bottom-color: var(--verde);
}

.firma-linea {
  width: 100%;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris-6);
  padding-top: 6px;
  border-top: 2px solid var(--verde-oscuro);
}

/* ── BUTTONS ── */
.btn-reset {
  width: 100%;
  background: var(--gris-1);
  color: var(--gris-6);
  border: 1px solid var(--gris-3);
  padding: 0.55rem;
  border-radius: var(--r);
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  margin-top: 0.75rem;
  font-family: inherit;
}

.btn-reset:hover {
  background: var(--rojo-claro);
  color: var(--rojo);
  border-color: #fca5a5;
}

.btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--blanco);
  border: 2px solid var(--verde);
  color: var(--verde);
  padding: 0.75rem 1.5rem;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(15, 76, 129, 0.08);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  margin-top: 1rem;
}

.btn-add:hover {
  background-color: var(--verde);
  color: var(--blanco);
  box-shadow: 0 4px 12px rgba(15, 76, 129, 0.2);
  transform: translateY(-2px);
}

.btn-add:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(15, 76, 129, 0.1);
}

.btn-add i {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.btn-add:hover i {
  transform: rotate(90deg);
}

.btn-eliminar-fila {
  background: none;
  border: none;
  color: var(--gris-5);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.15s;
  font-size: 13px;
}

.btn-eliminar-fila:hover {
  color: var(--rojo);
}

/* ── STEP SECTIONS ── */
.step-section {
  display: none;
}

.step-section.active {
  display: block;
}

/* ── STEP NAVIGATION BUTTONS ── */
.step-nav-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  gap: 1rem;
}

.btn-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.65rem 1.4rem;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.15s;
}

.btn-prev {
  background: var(--blanco);
  color: var(--gris-7);
  border: 1.5px solid var(--gris-3);
}

.btn-prev:hover {
  border-color: var(--gris-5);
  background: var(--gris-1);
}

.btn-next {
  background: var(--verde);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
  margin-left: auto;
}

.btn-next:hover {
  background: var(--verde-mid);
}

/* ── SAVE TOAST ── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--negro);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--sombra-lg);
  transform: translateY(80px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  z-index: 300;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast i {
  color: #86efac;
}

/* ── SECTION STEP LABEL ── */
.section-step-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

.step-num-badge {
  width: 24px;
  height: 24px;
  background: var(--verde);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.section-step-label span {
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-7);
}

/* ── RESPONSIVE MISC ── */
@media (max-width: 768px) {
  .container {
    padding: 1rem 0.75rem 4rem;
  }

  .form-header {
    padding: 1.25rem;
  }

  .form-header-left h2 {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
  }

  .form-header-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .folio-wrap {
    width: 100%;
    max-width: 280px;
  }

  .folio-wrap input {
    flex-grow: 1;
    width: auto;
  }
}

/* ── NAV TABS: Archivo / Seguimiento ── */
.btn-nav-tab {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  padding: 0.4rem 0.85rem;
  border-radius: 10px;
  transition: all 0.15s;
}

.btn-nav-tab:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.btn-nav-tab i {
  opacity: 0.95;
}

.btn-nav-tab .label-text {
  display: none;
}

@media (min-width: 600px) {
  .btn-nav-tab .label-text {
    display: inline;
  }
}

/* Estilo específico para botón Seguimiento (más “alerta”) */
#tab-seguimiento {
  background: var(--naranja);
  border-color: #b45309;
  color: #fff;
}

#tab-seguimiento:hover {
  background: #b45309;
  border-color: #92400e;
}

:root {
  --primary: #4f46e5;
  --success: #22c55e;
  --danger: #ef4444;
  --gray: #64748b;
  --bg-card: #ffffff;
  --bg-item: #f8fafc;
}


/* Contenedor Principal */
.card-archivo {
  background: var(--bg-card);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.card-archivo h3 {
  margin-bottom: 20px;
  color: #1e293b;
  font-size: 1.25rem;
}

/* Item de Archivo */
.archivo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-item);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: transform 0.2s;
}

.archivo-item:hover {
  transform: translateY(-2px);
}

.archivo-nombre {
  font-weight: 500;
  color: #334155;
}

/* Estilo Base de Botones */
.btn {
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 6px;
}

/* Variantes de Botones */
.btn-ver {
  background: #e0e7ff;
  color: var(--primary);
}

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

.btn-descargar {
  background: #dcfce7;
  color: var(--success);
}

.btn-descargar:hover {
  background: var(--success);
  color: white;
}

.btn-eliminar {
  background: #fee2e2;
  color: var(--danger);
}

.btn-eliminar:hover {
  background: var(--danger);
  color: white;
}

/* Botón Subir (Principal) */
.btn-subir {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);
  transition: opacity 0.2s;
}

.btn-subir:hover {
  opacity: 0.9;
}

/* ── SEGUIMIENTO BADGES ── */
.badge-pendiente {
  background-color: var(--naranja-claro);
  color: var(--naranja);
}

.badge-proceso {
  background-color: var(--azul-claro);
  color: var(--azul);
}

.badge-completado {
  background-color: var(--verde-claro);
  color: var(--verde-oscuro);
}

/* ── QUESTION CARDS (NEW UI) ── */
.questions-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.question-card {
  background: var(--blanco);
  border: 1px solid var(--gris-3);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.qc-title {
  background: var(--gris-1);
  padding: 12px 15px;
  font-weight: 600;
  font-size: 14px;
  color: var(--negro);
  border-bottom: 1px solid var(--gris-3);
}

.qc-body {
  padding: 10px 15px;
}

.qc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--gris-3);
  flex-wrap: wrap;
  gap: 10px;
}

.qc-row:last-child {
  border-bottom: none;
}

.qc-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--gris-7);
  width: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.qc-controls {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}

.qc-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.qc-sub {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gris-5);
}

.qty-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--gris-3);
  border-radius: 6px;
  overflow: hidden;
  background: var(--blanco);
}

.btn-qty {
  width: 28px;
  height: 28px;
  background: var(--gris-1);
  border: none;
  color: var(--gris-7);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.btn-qty:hover {
  background: var(--gris-3);
}

.qty-input {
  width: 35px;
  height: 28px;
  border: none;
  border-left: 1.5px solid var(--gris-3);
  border-right: 1.5px solid var(--gris-3);
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--azul);
  padding: 0;
  margin: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input:focus {
  outline: none;
  background: var(--azul-claro);
}

/* Colores para etiquetas */
.qc-label.pemex i {
  color: #059669;
}

.qc-label.comp i {
  color: #000000;
}

/* ── FILE CARDS (archivos.html) ── */
.file-card {
  background: var(--blanco);
  border: 1px solid var(--gris-3);
  border-radius: var(--r);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.file-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  border-color: var(--gris-4);
}

.file-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
}

.file-card.borrador {
  background: linear-gradient(to right, #f8fafc 0%, var(--blanco) 100%);
  border-color: #d1fae5;
}

.file-card.borrador::before {
  background: #10b981;
}

.file-card.pdf {
  background: linear-gradient(to right, #f8fafc 0%, var(--blanco) 100%);
  border-color: #fee2e2;
}

.file-card.pdf::before {
  background: #ef4444;
}

.file-card-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.file-card-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.file-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--negro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}

.borrador .file-card-name {
  color: #064e3b;
}

.pdf .file-card-name {
  color: #7f1d1d;
}

.file-card-date {
  font-size: 11px;
  font-weight: 500;
  color: var(--gris-5);
}

.borrador .file-card-date {
  color: #047857;
}

.pdf .file-card-date {
  color: #991b1b;
}

.file-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.btn-file-action {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-edit {
  background: #d1fae5;
  color: #047857;
}

.btn-edit:hover {
  background: #10b981;
  color: white;
}

.btn-open {
  background: #fee2e2;
  color: #b91c1c;
}

.btn-open:hover {
  background: #ef4444;
  color: white;
}

.btn-download {
  background: #e0f2fe;
  color: #0369a1;
}

.btn-download:hover {
  background: #0ea5e9;
  color: white;
}

.btn-delete {
  background: transparent;
  border: 1px solid #fca5a5;
  color: #ef4444;
  padding: 5px 10px;
  border-radius: 50%;
}

.btn-delete:hover {
  background: #ef4444;
  color: white;
}

.file-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--gris-5);
  background: var(--gris-1);
  border: 2px dashed var(--gris-3);
  border-radius: var(--r);
}

.file-empty-icon {
  font-size: 40px;
  color: var(--gris-4);
  margin-bottom: 12px;
}

.file-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gris-6);
  margin-bottom: 5px;
}

.file-empty-desc {
  font-size: 13px;
  max-width: 250px;
}

/* ── EVALUATION CARDS (Sustituto de Tablas Antiguas) ── */
.eval-cards-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.eval-card {
  background: var(--blanco);
  border: 1px solid var(--gris-3);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.eval-card-title {
  background: var(--gris-1);
  padding: 12px 15px;
  font-weight: 600;
  font-size: 14px;
  color: var(--negro);
  border-bottom: 1px solid var(--gris-3);
}

.eval-card-content {
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eval-card-entity {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
}

/* Colorear la barra completa dependiendo de si es PEMEX o Compañía */
.eval-card-entity:has(.badge-pemex) {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
}

.eval-card-entity:has(.badge-comp) {
  background-color: #eef2ff;
  border-color: #c7d2fe;
}

.eval-card-entity-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.eval-card-entity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.badge-pemex {
  background-color: #dcfce7;
  color: #047857;
  border: 1px solid #34d399;
}

.badge-comp {
  background-color: #e0e7ff;
  color: #4338ca;
  border: 1px solid #818cf8;
}

.eval-card-inputs {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.eval-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.eval-input-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gris-6);
}

.eval-input-group input {
  width: 45px;
  height: 35px;
  text-align: center;
  border: 1.5px solid var(--gris-3);
  border-radius: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 14px;
  color: var(--azul);
  transition: all 0.2s;
  background: var(--blanco);
}

.eval-input-group input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-claro);
}

/* Remover flechas de los input type number */
.eval-input-group input::-webkit-outer-spin-button,
.eval-input-group input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.eval-input-group input {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* ── RESPONSIVE TABLE SEGUIMIENTO ── */
@media (max-width: 768px) {
  .table-seguimiento thead {
    display: none;
  }

  .table-seguimiento,
  .table-seguimiento tbody,
  .table-seguimiento tr,
  .table-seguimiento td {
    display: block;
    width: 100%;
  }

  .table-seguimiento tr {
    margin-bottom: 1.5rem;
    border: 1px solid var(--gris-3);
    border-radius: var(--r);
    background: var(--blanco);
    box-shadow: var(--sombra-md);
  }

  .table-seguimiento td {
    border: none !important;
    border-bottom: 1px solid var(--gris-2) !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left !important;
    padding: 0.75rem 1rem !important;
    gap: 5px;
  }

  .table-seguimiento td:last-child {
    border-bottom: none !important;
    justify-content: center;
    background: var(--gris-1);
    align-items: center;
  }

  .table-seguimiento td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--gris-6);
    text-transform: uppercase;
    font-size: 11px;
    margin-right: 0;
    margin-bottom: 2px;
    flex-shrink: 0;
  }

  .table-seguimiento td:first-child {
    background: var(--verde-claro) !important;
    border-left: 5px solid var(--azul) !important;
    border-bottom: 1px solid var(--gris-3) !important;
    font-size: 14px;
    color: var(--negro);
    text-align: left !important;
    justify-content: flex-start;
  }

  .table-seguimiento td:first-child::before {
    margin-right: 8px;
    color: var(--azul);
  }

  .table-seguimiento td.td-foto {
    flex-direction: row;
    align-items: center;
  }

  .table-seguimiento td.td-foto .foto-wrap {
    align-items: flex-end !important;
  }

  .table-seguimiento td.td-foto .foto-container {
    margin: 0 !important;
  }
}

/* EVALUATION CHECKBOXES (EXAM STYLE) */
.eval-checkbox-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.eval-checkbox {
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  border: 2px solid var(--gris-4);
  border-radius: 50%;
  display: grid;
  place-content: center;
  transition: all 0.2s ease;
}

.eval-checkbox::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
}

.eval-checkbox:checked::before {
  transform: scale(1);
}

.eval-checkbox-label {
  font-weight: 600;
  font-size: 16px;
  color: var(--gris-7);
  user-select: none;
}

/* COMPAÑÍA (Azul) */
.eval-card-entity:nth-child(1) .eval-checkbox:checked {
  border-color: var(--azul);
}

.eval-card-entity:nth-child(1) .eval-checkbox:checked::before {
  background-color: var(--azul);
}

/* PEMEX (Verde) */
.eval-card-entity:nth-child(2) .eval-checkbox:checked {
  border-color: var(--verde);
}

.eval-card-entity:nth-child(2) .eval-checkbox:checked::before {
  background-color: var(--verde);
}

/* ── BANNER DE INFORMACIÓN / ACCESO DIRECTO ── */
.info-banner {
  background-color: var(--azul-claro);
  border: 1px solid #000000;
  color: var(--verde-oscuro);
  padding: 10px 14px;
  border-radius: var(--r);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  box-shadow: var(--sombra);
}

.info-banner i {
  color: var(--azul);
  font-size: 1.1rem;
}

.info-banner a {
  color: var(--azul);
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}

.btn-banner-link {
  background-color: var(--azul);
  color: white !important;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background-color 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-banner-link:hover {
  background-color: #1e40af;
}

/* Tarjetas individuales de Personas Observadas */
.obs-card-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.obs-card-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

.obs-card-item input:focus {
  border-color: currentColor !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Responsive Tracking Dashboard Overrides */
@media (max-width: 768px) {
  #seguimiento-dashboard .metrics-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  #seguimiento-dashboard .metric-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px !important;
    gap: 10px !important;
  }
  #seguimiento-dashboard .metric-card > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #seguimiento-dashboard .charts-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  #seguimiento-dashboard .charts-row > div {
    padding: 12px !important;
  }
}

@media (max-width: 480px) {
  #seguimiento-dashboard .metrics-row {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================
   ── ESTILOS PREMIUM MODERNOS SWEETALERT2 ──
   ========================================== */

/* Fondo desenfocado de alta gama (Glassmorphism overlay) */
.swal2-backdrop-show {
  backdrop-filter: blur(4px) !important;
  background: rgba(15, 23, 42, 0.4) !important;
}

/* Forzar centrado absoluto en pantalla */
.swal2-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
}

/* Animaciones fluidas de entrada y salida sin deformación ni saltos de texto */
.swal2-popup.swal2-show {
  animation: swal2-smooth-show 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.swal2-popup.swal2-hide {
  animation: swal2-smooth-hide 0.15s cubic-bezier(0.7, 0, 0.84, 0) !important;
}

@keyframes swal2-smooth-show {
  0% {
    opacity: 0;
    transform: scale(0.93) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes swal2-smooth-hide {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateY(6px);
  }
}

/* Contenedor del Modal Premium con Bordes Suaves */
.swal2-popup {
  font-family: 'IBM Plex Sans', sans-serif !important;
  border-radius: 16px !important; /* Esquinas redondeadas premium */
  padding: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  width: 90% !important;
  max-width: 480px !important;
  min-width: 280px !important;
  box-sizing: border-box !important;
  margin: auto !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transform-origin: center center;
}

/* Iconos Rediseñados: Escala limpia sin distorsionar trazos ni SVGs internos */
.swal2-icon {
  transform: scale(0.75) !important;
  transform-origin: center center !important;
  margin: -6px auto 10px auto !important;
  flex-shrink: 0 !important;
  will-change: transform;
}

.swal2-icon .swal2-icon-content {
  font-size: 20px !important;
}

/* Título */
.swal2-title {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  text-align: center !important;
  word-break: break-word !important;
}

/* Contenedor de contenido */
.swal2-html-container {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 6px 0 16px 0 !important;
  text-align: center !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* Etiquetas de formulario */
.swal2-input-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #475569 !important;
  margin-bottom: 6px !important;
  text-align: left !important;
  display: block !important;
}

/* Inputs de texto en SweetAlert */
.swal2-input, .swal2-textarea, .swal2-select {
  font-family: inherit !important;
  font-size: 13px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  height: auto !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  color: #0f172a !important;
  background-color: #ffffff !important;
  margin: 8px 0 12px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

/* Pie de página de botones moderno y centrado */
.swal2-actions {
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  border-top: none !important;
  display: flex !important;
  justify-content: center !important; /* Centrado */
  gap: 10px !important;
  width: 100% !important;
}

/* Botones con estilo moderno redondeado */
.swal2-confirm, .swal2-cancel, .swal2-deny {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  border-radius: 8px !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

/* Botón Confirmar (Estilo Azul Moderno) */
.swal2-confirm {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2) !important;
}

.swal2-confirm:hover {
  background-color: #2563eb !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3) !important;
}

.swal2-confirm:active {
  transform: translateY(0) !important;
}

/* Botón Cancelar (Gris Suave) */
.swal2-cancel {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
}

.swal2-cancel:hover {
  background-color: #e2e8f0 !important;
  transform: translateY(-1px) !important;
}

.swal2-cancel:active {
  transform: translateY(0) !important;
}

/* Mensajes de Validación/Errores */
.swal2-validation-message {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  border: 1px solid #fca5a5 !important;
  padding: 8px 12px !important;
  margin-top: 8px !important;
}

/* Botones de Éxito / Peligro específicos */
.swal-btn-success {
  background-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2) !important;
  border-radius: 8px !important;
}

.swal-btn-success:hover {
  background-color: #059669 !important;
  transform: translateY(-1px) !important;
}

.swal-btn-danger {
  background-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.2) !important;
  border-radius: 8px !important;
}

.swal-btn-danger:hover {
  background-color: #fef2f2 !important;
}

.swal-btn-danger:active {
  background-color: #fee2e2 !important;
}

/* ==========================================
   ── MODO OSCURO (DARK THEME) PARA AUDITORÍA ──
   ========================================== */
body.dark-theme {
  --negro: #e8eaed;
  --gris-1: #202124;
  --gris-2: #121212;
  --gris-3: #52525b;
  --gris-4: #71717a;
  --gris-5: #9aa0a6;
  --gris-6: #9aa0a6;
  --gris-7: #e8eaed;
  --blanco: #202124;
  
  --azul: #e8eaed; /* En vez de azul, usar gris/plata para textos y bordes de realce */
  --azul-claro: #27272a; /* Fondo gris oscuro */
  --verde-claro: #27272a;
  --rojo-claro: #7f1d1d;
  --naranja-claro: #7c2d12;
  
  --verde: #a1a1aa; /* Pestañas/pills activas en gris zinc */
  --verde-mid: #3f3f46; /* Botones principales en gris zinc intermedio */
  --verde-oscuro: #1c1d1f; /* Fondo de navbar igual a la barra lateral de archivos */
}

/* Evitar flashes de fondo en firma digital y otros elementos */
body.dark-theme #modalFirma .modal-content {
  background: #202124 !important;
  color: #e8eaed !important;
  border: 1px solid #2c2c2c !important;
}

/* Overrides para evitar colores claros hardcodeados en tablas */
body.dark-theme .rec-table tr,
body.dark-theme .contacto-table tr {
  background: var(--gris-1) !important;
  border-color: var(--gris-3) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

body.dark-theme .rec-table td:nth-child(1),
body.dark-theme .contacto-table td:nth-child(1) {
  background: #27272a !important;
  color: #e8eaed !important;
}
body.dark-theme .rec-table td:nth-child(1)::before,
body.dark-theme .contacto-table td:nth-child(1)::before {
  color: #e8eaed !important;
}

body.dark-theme table.audit-table tr:hover td {
  background: #303134 !important;
}

body.dark-theme .observado-item {
  background: var(--blanco) !important;
}
body.dark-theme .observado-item input {
  background: var(--gris-2) !important;
  color: var(--negro) !important;
  border-color: var(--gris-3) !important;
}

body.dark-theme .observado-item.pemex {
  background-color: #14251c !important;
  border-color: #1e3f2d !important;
}
body.dark-theme .observado-item.pemex label,
body.dark-theme .observado-item.pemex span {
  color: #ffffff !important;
}
body.dark-theme .observado-item.pemex label i {
  color: #34d399 !important;
}

body.dark-theme .observado-item.comp {
  background-color: #1a1f36 !important;
  border-color: #26315c !important;
}
body.dark-theme .observado-item.comp label,
body.dark-theme .observado-item.comp span {
  color: #ffffff !important;
}
body.dark-theme .observado-item.comp label i {
  color: #818cf8 !important;
}

body.dark-theme .eval-input-group input[type="number"] {
  background: var(--gris-2) !important;
  color: var(--negro) !important;
  border-color: var(--gris-3) !important;
}

body.dark-theme .badge-comp {
  color: var(--negro) !important;
}

/* Overrides para botones y elementos activos */
body.dark-theme .btn-next {
  background: #3f3f46 !important;
  color: #e8eaed !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
body.dark-theme .btn-next:hover {
  background: #52525b !important;
}

body.dark-theme .step-pill.active {
  background: #3f3f46 !important;
  border-color: #52525b !important;
  color: #e8eaed !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-theme .resultado-card.c-total {
  border-color: #3f3f46 !important;
  background: #1c1d1f !important;
}
body.dark-theme .c-total .val {
  color: #e8eaed !important;
}

body.dark-theme .resultado-card.c-iai {
  border-color: #7f1d1d !important;
}
body.dark-theme .resultado-card.c-ias {
  border-color: #064e3b !important;
}

body.dark-theme .btn-eliminar-fila {
  background: #7f1d1d !important;
  color: #fca5a5 !important;
}
body.dark-theme .btn-eliminar-fila:hover {
  background: #ef4444 !important;
  color: #fff !important;
}

body.dark-theme .btn-subir {
  background: var(--verde-claro) !important;
  color: var(--negro) !important;
  border-color: var(--gris-3) !important;
}
body.dark-theme .btn-subir:hover {
  background: var(--verde) !important;
  color: #fff !important;
}

/* Inputs en tablas y formularios */
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
  color: var(--gris-5) !important;
}

/* Modales SweetAlert2 en Modo Oscuro con estilo nativo limpio */
body.dark-theme .swal2-popup {
  background: #1c1d1f !important;
  color: #e8eaed !important;
  border: 1px solid #2c2c2c !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}
body.dark-theme .swal2-title {
  color: #e8eaed !important;
}
body.dark-theme .swal2-html-container {
  color: #9aa0a6 !important;
}
body.dark-theme .swal2-input,
body.dark-theme .swal2-textarea,
body.dark-theme .swal2-select {
  background-color: #121212 !important;
  color: #e8eaed !important;
  border-color: #2c2c2c !important;
  border-radius: 8px !important;
}
body.dark-theme .swal2-input:focus,
body.dark-theme .swal2-textarea:focus,
body.dark-theme .swal2-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}
body.dark-theme .swal2-actions {
  background-color: transparent !important;
  border-top: none !important;
}
body.dark-theme .swal2-confirm {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}
body.dark-theme .swal2-cancel {
  background-color: #2c2c2c !important;
  color: #9aa0a6 !important;
  border-radius: 8px !important;
}
body.dark-theme .swal2-cancel:hover {
  background-color: #3a3b3f !important;
  color: #ffffff !important;
}
body.dark-theme .swal-btn-success {
  background-color: #10b981 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}
body.dark-theme .swal-btn-success:hover {
  background-color: #059669 !important;
}
body.dark-theme .swal-btn-danger {
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}
body.dark-theme .swal-btn-danger:hover {
  background-color: #dc2626 !important;
}

/* Ajustes de Modo Oscuro para Banners de Información */
body.dark-theme .info-banner {
  color: #ffffff !important;
  border-color: #2c2c2c !important;
  background-color: #202124 !important;
}
body.dark-theme .info-banner i {
  color: #3b82f6 !important;
}
body.dark-theme .btn-banner-link {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}
body.dark-theme .btn-banner-link:hover {
  background-color: #1e40af !important;
}

/* Colores de selección de severidad/peligro idénticos a los del modo claro */
body.dark-theme .eval-card-entity:nth-child(1) .eval-checkbox:checked {
  border-color: #1d4ed8 !important;
}
body.dark-theme .eval-card-entity:nth-child(1) .eval-checkbox:checked::before {
  background-color: #1d4ed8 !important;
}
body.dark-theme .eval-card-entity:nth-child(2) .eval-checkbox:checked {
  border-color: #000000 !important;
}
body.dark-theme .eval-card-entity:nth-child(2) .eval-checkbox:checked::before {
  background-color: #000000 !important;
}

/* Corrección de visibilidad para tarjetas de evaluación PEMEX/Compañía en Modo Oscuro */
body.dark-theme .eval-card-entity:has(.badge-pemex) {
  background-color: #14251c !important;
  border-color: #1e3f2d !important;
}
body.dark-theme .eval-card-entity:has(.badge-comp) {
  background-color: #1a1f36 !important;
  border-color: #26315c !important;
}
body.dark-theme .badge-pemex {
  background-color: rgba(52, 211, 153, 0.15) !important;
  color: #34d399 !important;
  border-color: #059669 !important;
}
body.dark-theme .badge-comp {
  background-color: rgba(129, 140, 248, 0.15) !important;
  color: #818cf8 !important;
  border-color: #4f46e5 !important;
}

/* Color de la barra de progreso idéntico al modo claro */
body.dark-theme .progress-bar-fill {
  background-color: #0284c7 !important;
}

/* Forzar números de la tabla de evaluación a color blanco en modo oscuro */
body.dark-theme .eval-table input,
body.dark-theme .eval-table td:nth-child(2),
body.dark-theme .eval-table td:nth-child(3),
body.dark-theme .eval-table td:last-child {
  color: #ffffff !important;
}

/* Cambiar el fondo de la cabecera de la tabla de evaluación para evitar texto blanco sobre fondo blanco */
body.dark-theme .eval-table th {
  background-color: var(--gris-4) !important;
  color: #ffffff !important;
  border-color: var(--gris-3) !important;
}

/* Color para las secciones completadas (step-pill.done) en Modo Oscuro */
body.dark-theme .step-pill.done {
  background: #14251c !important;
  border-color: #1e3f2d !important;
  color: #34d399 !important;
}
body.dark-theme .step-pill.done .num {
  background: rgba(52, 211, 153, 0.2) !important;
  color: #34d399 !important;
}

/* Botones de Firma en Modo Oscuro con colores de modo claro (Subir y Dibujar) */
body.dark-theme .firma-item .btn-subir:not([onclick]) {
  background-color: #f0fdf4 !important;
  color: #16803d !important;
  border: 1px solid #bbf7d0 !important;
}
body.dark-theme .firma-item .btn-subir:not([onclick]):hover {
  background-color: #16803d !important;
  color: #ffffff !important;
}
body.dark-theme .firma-item .btn-subir[onclick] {
  background-color: #e0e7ff !important;
  color: #4f46e5 !important;
  border: 1px solid #c7d2fe !important;
}
body.dark-theme .firma-item .btn-subir[onclick]:hover {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
}

/* Hacer visibles los iconos nativos del calendario (date) y reloj (time) en Modo Oscuro */
body.dark-theme input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.8) !important;
  cursor: pointer;
}

/* Colores de iconos de cabecera de tarjeta vibrantes en Modo Oscuro */
body.dark-theme .ci-azul {
  background: #1e3a8a !important;
  color: #60a5fa !important;
}
body.dark-theme .ci-verde {
  background: #064e3b !important;
  color: #34d399 !important;
}
body.dark-theme .ci-rojo {
  background: #7f1d1d !important;
  color: #f87171 !important;
}
body.dark-theme .ci-naranja {
  background: #7c2d12 !important;
  color: #fb923c !important;
}

/* Contorno del contenedor del folio en Modo Oscuro */
body.dark-theme .folio-wrap {
  border: 1.5px solid var(--gris-3) !important;
}



/* ==========================================
   ── ESTILOS DE SEGUIMIENTO EN MODO OSCURO ──
   ========================================== */

/* Tarjetas métricas y de gráficos en Modo Oscuro */
body.dark-theme #seguimiento-dashboard .metric-card,
body.dark-theme #seguimiento-dashboard .charts-row > div {
  background: var(--blanco) !important; /* #202124 */
  border-color: var(--gris-3) !important; /* #52525b */
  box-shadow: none !important;
}

/* Cambiar textos del panel de seguimiento a blanco o gris claro (excluyendo el primer div del icono) */
body.dark-theme #seguimiento-dashboard .metric-card > div:last-child,
body.dark-theme #seguimiento-dashboard .metric-card > div:last-child div,
body.dark-theme #seguimiento-dashboard .metric-card span,
body.dark-theme #seguimiento-dashboard .metric-card h4,
body.dark-theme #seguimiento-dashboard .charts-row h4 {
  color: var(--negro) !important; /* #e8eaed */
}

/* Textos secundarios de métricas */
body.dark-theme #seguimiento-dashboard .metric-card div[style*="color: #64748b"] {
  color: var(--gris-5) !important;
}

/* Estilos de alta gama para los contenedores de iconos de métricas en Modo Oscuro */
body.dark-theme #seguimiento-dashboard .metric-card:has(.fa-file-invoice) > div:first-child {
  background-color: #1e3a8a !important;
  color: #93c5fd !important;
}
body.dark-theme #seguimiento-dashboard .metric-card:has(.fa-file-invoice) > div:first-child i {
  color: #93c5fd !important;
}

body.dark-theme #seguimiento-dashboard .metric-card:has(.fa-lock-open) > div:first-child {
  background-color: #064e3b !important;
  color: #34d399 !important;
}
body.dark-theme #seguimiento-dashboard .metric-card:has(.fa-lock-open) > div:first-child i {
  color: #34d399 !important;
}

body.dark-theme #seguimiento-dashboard .metric-card:has(.fa-lock) > div:first-child {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
}
body.dark-theme #seguimiento-dashboard .metric-card:has(.fa-lock) > div:first-child i {
  color: #94a3b8 !important;
}

body.dark-theme #seguimiento-dashboard .metric-card:has(.fa-file-pdf) > div:first-child {
  background-color: #7f1d1d !important;
  color: #f87171 !important;
}
body.dark-theme #seguimiento-dashboard .metric-card:has(.fa-file-pdf) > div:first-child i {
  color: #f87171 !important;
}

/* Números y resultados de métricas */
body.dark-theme #metric-total,
body.dark-theme #metric-cerradas,
body.dark-theme #metric-pdfs-borradores {
  color: #ffffff !important;
}

/* Título de la sección "Seguimiento de Auditorías" */
body.dark-theme #title-recent span[style*="color: #1e293b"],
body.dark-theme #title-recent span {
  color: #ffffff !important;
}

/* Contenedor del filtro secundario en Modo Oscuro */
body.dark-theme #title-recent div[style*="background: #e2e8f0"] {
  background: var(--gris-2) !important;
  border-color: var(--gris-3) !important;
}

/* Botones del sub-filtro en Modo Oscuro */
body.dark-theme .btn-sub-filter:not([onclick*="abrirHistorialContactosModal"]) {
  color: var(--gris-6) !important;
}

body.dark-theme .btn-sub-filter.active {
  background: var(--gris-4) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Asegurar texto blanco de alto contraste para el botón de "Ver Contactados" */
body.dark-theme #title-recent button[onclick*="abrirHistorialContactosModal"] {
  color: #ffffff !important;
}

/* Botón de correo en Modo Oscuro (tanto en listados como en barra superior) */
body.dark-theme .btn-email,
body.dark-theme .btn-email-nav {
  background-color: var(--azul-claro) !important; /* #27272a */
  color: #ffffff !important; /* texto e icono blanco */
  border-color: var(--gris-3) !important;
}

body.dark-theme .btn-email:hover,
body.dark-theme .btn-email-nav:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* SweetAlert2 & Toast Responsive Adjustments */
@media (max-width: 576px) {
  .swal2-container {
    padding: 10px !important;
  }
  .swal2-popup {
    padding: 18px 14px !important;
    width: 94vw !important;
    max-width: 95vw !important;
    min-width: 0 !important;
    border-radius: 14px !important;
    margin: auto !important;
  }
  .swal2-title {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }
  .swal2-html-container {
    font-size: 13px !important;
    margin: 8px 0 14px 0 !important;
    line-height: 1.5 !important;
  }
  .swal2-input-label {
    font-size: 11px !important;
  }
  .swal2-input, .swal2-textarea, .swal2-select {
    font-size: 13px !important;
    padding: 10px 12px !important;
    height: auto !important;
    margin: 8px 0 12px 0 !important;
  }
  #swal-input-password {
    padding: 10px 40px 10px 12px !important;
    font-size: 13px !important;
  }
  #swal-eye-icon {
    font-size: 14px !important;
    right: 12px !important;
  }
  .swal2-actions {
    flex-direction: column-reverse !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
  .swal2-confirm, .swal2-cancel, .swal2-deny {
    width: 100% !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    margin: 0 !important;
  }
  .toast {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(20px) !important;
    bottom: 16px !important;
    width: 90vw !important;
    max-width: 360px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .toast.show {
    transform: translateX(-50%) translateY(0) !important;
  }
}