/* style/admin_documento_area.css - CORREGIDO DREMH */

/* --- Cabecera del Área (Hero) --- */
.area-hero {
  background: var(--color-fondo-tarjeta); /* Usar variable */
  border-radius: 12px;
  border: 1px solid var(--color-borde);
  box-shadow: var(--sombra-tarjeta);
  padding: 30px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

/* Barra lateral decorativa */
.area-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  /* CAMBIO: Eliminado el azul (color-info). Ahora es Rojo -> Naranja */
  background: linear-gradient(180deg, var(--color-primario), #f57c00);
}

.area-icon-large {
  width: 64px;
  height: 64px;
  /* CAMBIO: Fondo azul -> Fondo rojo muy pálido */
  background-color: rgba(211, 47, 47, 0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--color-primario);
}

.area-details h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-texto-principal);
  margin-bottom: 5px;
}

.area-details p {
  color: var(--color-texto-secundario);
  margin: 0;
  font-size: 14px;
}

/* --- Tabla de Documentos --- */
.table-container {
  background: var(--color-fondo-tarjeta);
  border-radius: 12px;
  box-shadow: var(--sombra-tarjeta);
  border: 1px solid var(--color-borde);
  overflow: hidden;
}

.doc-table { width: 100%; border-collapse: collapse; }

.doc-table thead {
  background-color: #f8f9fa;
  border-bottom: 2px solid var(--color-borde);
}

.doc-table th {
  padding: 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-texto-secundario);
  text-transform: uppercase;
}

.doc-table td {
  padding: 16px;
  border-bottom: 1px solid var(--color-borde);
  vertical-align: middle;
  color: var(--color-texto-principal);
  font-size: 14px;
}

.doc-table tr:hover { background-color: #fff5f5; /* Tono rojizo muy suave al pasar el mouse */ }
.doc-table tr:last-child td { border-bottom: none; }

/* Celda de Usuario (Foto + Nombre) */
.user-info-cell { display: flex; align-items: center; gap: 10px; }
.user-info-cell img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid #dee2e6; }
.user-name-text { font-weight: 500; font-size: 13px; }
.user-role-text { font-size: 11px; color: #888; display: block; }

/* Celda Documento */
.doc-info-cell { display: flex; align-items: center; gap: 10px; }
.doc-title { font-weight: 500; }

/* Badges de Estado */
.status-badge {
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}
.status-validado { background: #d1e7dd; color: #0f5132; }
.status-pendiente { background: #fff3cd; color: #664d03; }
.status-rechazado { background: #f8d7da; color: #842029; }

/* Botones Acción (El ojito) */
.btn-action {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #6c757d;
  transition: all 0.2s;
  text-decoration: none;
}

/* CAMBIO: Al pasar el mouse se pone rojo corporativo */
.btn-action:hover { 
    background: var(--color-primario); 
    color: #fff; 
    box-shadow: 0 4px 8px rgba(211, 47, 47, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .area-hero { flex-direction: column; text-align: center; gap: 15px; }
  .area-hero::before { width: 100%; height: 6px; top: 0; left: 0; bottom: auto; }
  .table-container { overflow-x: auto; }
}