/* Utilidades */
.oculto { display: none !important; }

/*************************************************************
 * BREADCRUMB
 *************************************************************/
.breadcrumb { font-size: 0.85rem; color: #64748b; }
.breadcrumb-item { color: inherit; text-decoration: none; }
.breadcrumb-item.active { color: #2563eb; font-weight: 600; }
.breadcrumb-sep { margin: 0 6px; }

/*************************************************************
 * PAGE HEADER
 *************************************************************/
.auth-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.auth-page-header h1 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: #111827;
}
.auth-subtitulo {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
}

/*************************************************************
 * FILTROS
 *************************************************************/
.auth-filtros-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}
.auth-filtros-tipo {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.auth-filtros-estado {
  display: flex;
  align-items: center;
}

/* Select de estado */
.auth-select-estado {
  padding: 6px 32px 6px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  font-size: 0.85rem;
  color: #374151;
  cursor: pointer;
  min-width: 190px;
  transition: border-color .2s, box-shadow .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.auth-select-estado:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.auth-select-estado:hover { border-color: #cbd5e1; }
/* divisor visual entre los dos grupos */
.auth-filtros-tipo {
  padding-right: 12px;
  border-right: 2px solid #e5e7eb;
}

/* Buscador de usuario */
.auth-filtros-usuario {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 10px;
  flex: 1;
  min-width: 220px;
  max-width: 340px;
  transition: border-color .2s;
}
.auth-filtros-usuario:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.auth-filtro-usuario-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
}
.auth-filtros-usuario input {
  border: none;
  outline: none;
  font-size: 0.85rem;
  color: #374151;
  background: transparent;
  flex: 1;
  min-width: 0;
}
.auth-filtros-usuario input::placeholder {
  color: #94a3b8;
}
.auth-filtro-limpiar {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 0.8rem;
  padding: 0 2px;
  flex-shrink: 0;
  line-height: 1;
  transition: color .15s;
}
.auth-filtro-limpiar:hover {
  color: #ef4444;
}

.filtro-chip,
.estado-chip {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1.5px solid #e5e7eb;
  background: #f8fafc;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.filtro-chip:hover,
.estado-chip:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.filtro-chip.activo {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.estado-chip.activo {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

/*************************************************************
 * CONTADOR
 *************************************************************/
.auth-contador {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0 0 16px;
}

/*************************************************************
 * GRID DE CARDS
 *************************************************************/
.auth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

/*************************************************************
 * CARD
 *************************************************************/
.auth-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #e5e7eb;
  border-left: 4px solid var(--tipo-color, #94a3b8);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.auth-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* Badges en la parte superior */
.card-badges-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Unidad */
.card-unidad {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

/* Meta: usuario + tiempo */
.card-meta {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
}

/* Resumen */
.card-resumen {
  font-size: 0.85rem;
  color: #374151;
  margin: 0;
}

/* Comentario */
.card-comentario {
  font-size: 0.82rem;
  color: #64748b;
  font-style: italic;
  margin: 0;
}

/* Separador */
.card-sep {
  border: none;
  border-top: 1px solid #f1f5f9;
  margin: 4px 0 0;
}

/* Acciones */
.card-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/*************************************************************
 * BADGES TIPO Y ESTADO (globales, usados en card y modal)
 *************************************************************/
.tipo-badge,
.estado-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.estado-badge {
  border: 1.5px solid transparent;
}

/*************************************************************
 * EMPTY STATE
 *************************************************************/
.auth-empty {
  text-align: center;
  padding: 60px 20px;
  color: #94a3b8;
}
.auth-empty-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;
}
.auth-empty-titulo {
  font-size: 1.1rem;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 6px;
}
.auth-empty-sub {
  font-size: 0.9rem;
  margin: 0;
}

/*************************************************************
 * MODAL DETALLE (más ancho que el modal estándar)
 *************************************************************/
.modal-contenido.modal-detalle {
  width: min(900px, 95vw);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

/* ── Tabla de ítems ───────────────────────────────────────── */
.tabla-detalle {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.tabla-detalle thead tr {
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
}
.tabla-detalle th {
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: #64748b;
  white-space: nowrap;
}
.tabla-detalle th.col-r,
.tabla-detalle td.col-r { text-align: right; }

.tabla-detalle tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background .1s;
}
.tabla-detalle tbody tr:last-child { border-bottom: none; }
.tabla-detalle tbody tr:hover      { background: #f8fafc; }
.tabla-detalle td {
  padding: 9px 14px;
  color: #334155;
  vertical-align: middle;
}
.tabla-detalle td.col-mono {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #475569;
}

.detalle-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.detalle-badges {
  display: flex;
  gap: 8px;
}

/* Botón cerrar (✕) */
.btn-cerrar {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.btn-cerrar:hover {
  background: #f1f5f9;
  color: #111827;
}

/* Meta info (grid 2 columnas) */
.detalle-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: #f8fafc;
  border-radius: 10px;
  padding: 14px 16px;
}
.detalle-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detalle-meta-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  font-weight: 600;
}
.detalle-meta-valor {
  font-size: 0.9rem;
  color: #111827;
  font-weight: 500;
}

/* Título sección ítems */
.detalle-items-titulo {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin: 0 0 8px;
}

/* Acciones al pie del modal detalle */
.detalle-acciones {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid #f1f5f9;
}

/*************************************************************
 * BOTÓN WARNING (devolver para corrección)
 *************************************************************/
.btn-warning {
  background: #f97316;
  color: #fff;
  border: none;
}
.btn-warning:hover {
  background: #ea6c0a;
}
.btn-warning:disabled {
  background: #fdba74;
  cursor: not-allowed;
}

/*************************************************************
 * MODAL RECHAZAR — textarea y label
 *************************************************************/
.label-opcional {
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 400;
}
.rechazo-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: none;
  margin-top: 8px;
  font-family: inherit;
}
.rechazo-textarea:focus {
  outline: none;
  border-color: #2563eb;
}