/* =========================================================
   Prometeus - Estilos generales + tabla dark "table-prometeus"
   ========================================================= */

/* ---------- Base del sitio (neutral) ---------- */
body{
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}
.container{ width: 80%; margin: auto; overflow: hidden; }
.header{ background:#35424a; color:#fff; padding:20px 0; text-align:center; }

/* Z-index para navbar/dropdowns */
.navbar{ position: relative; z-index: 1100; }
.navbar .dropdown-menu{ position: absolute; z-index: 1200; }

.page-header, .welcome-section, .card, .feature-card{ overflow: visible; }

h1, h2, h3{ color:#333; }

.card{
  background:#fff; border:1px solid #ddd; border-radius:5px;
  padding:15px; margin:10px 0; box-shadow:0 2px 5px rgba(0,0,0,.1);
}

.footer{
  background:#35424a; color:#fff; text-align:center; padding:10px 0;
  position:relative; bottom:0; width:100%;
}

/* Modales por encima de la navbar */
.modal{ z-index:1200 !important; }
.modal-backdrop{ z-index:1150 !important; }

/* =========================================================
   Tabla Prometeus (oscura con gradientes)
   ========================================================= */

.table-prometeus{
  border:0; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg, rgba(26,26,26,.92) 0%, rgba(42,42,42,.92) 100%);
  box-shadow:0 8px 32px rgba(139,0,0,.28);

  /* Forzar esquema oscuro dentro de la tabla (Bootstrap) */
  --bs-table-bg: transparent !important;   /* celdas transparentes */
  --bs-table-color:#fff;
  --bs-table-border-color:rgba(220,20,60,.35);
}

/* MUY IMPORTANTE: hacer las celdas transparentes (gana a Bootstrap) */
.table-prometeus > :not(caption) > * > *{
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ----------------- Encabezado (thead) ----------------- */
.table-prometeus thead th{
  /* ¡NO usar flex acá! mantiene comportamiento de tabla */
  display: table-cell !important;
  vertical-align: middle;
  white-space: nowrap;

  position: sticky; top:0; z-index:5;
  background:linear-gradient(135deg, #8B0000 0%, #DC143C 100%);
  color:#fff;
  border-bottom:2px solid #FFD700;
  text-transform: uppercase;
  letter-spacing:.6px;
  font-weight:800;
  font-size:.90rem;                 /* más compacto */
  line-height:1.15;                 /* altura uniforme */
  padding:.60rem .75rem;            /* menos alto */
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* Separador sutil entre columnas */
.table-prometeus thead th + th{ box-shadow: inset 1px 0 rgba(255,255,255,.06); }

/* Íconos del encabezado: todos a misma altura y dorados */
.table-prometeus thead th i,
.table-prometeus thead .text-muted{
  color:#FFD700 !important;
  opacity:1 !important;
  display:inline-block;             /* permite vertical-align */
  vertical-align: middle;
  font-size:1rem;
  line-height:1;                    /* centra ópticamente */
  margin-right:.45rem;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Subrayado dorado sutil al hover del encabezado */
.table-prometeus thead th::after{
  content:""; display:block; height:2px; width:0; margin-top:.40rem;
  background:linear-gradient(90deg, #FFD700, #FFB300);
  border-radius:2px; transition:width .2s ease;
}
.table-prometeus thead th:hover::after{ width:100%; }

/* ----------------- Filas (tbody) ----------------- */
.table-prometeus tbody tr{
  background:linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
  border-bottom:1px solid rgba(220,20,60,.35);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease,
              background .18s ease, border-color .18s ease;
}
.table-prometeus tbody tr:hover{
  background:linear-gradient(135deg, #202020, #333333) !important;
  transform: translateX(6px);
  box-shadow:6px 0 18px rgba(139,0,0,.45);
  border-color:#FFD700;
}

/* Celdas */
.table-prometeus td, .table-prometeus th{
  color:#fff;
  padding:.85rem .75rem;            /* armoniza con thead */
  vertical-align: middle;
  font-weight:500;
}

/* Avatar con aro degradado */
.table-prometeus .rounded-circle{
  border:3px solid transparent;
  background:
    linear-gradient(#2a2a2a,#2a2a2a) padding-box,
    conic-gradient(from 160deg, #FFD700, #DC143C, #8B0000, #FFD700) border-box;
  box-shadow:0 4px 12px rgba(220,20,60,.35);
}

/* Badge dorado para categoría */
.table-prometeus .badge.bg-warning{
  background:linear-gradient(135deg, #FFD700, #ffea84) !important;
  color:#3b2e00 !important;
  border:0 !important;
  box-shadow:0 3px 10px rgba(255,215,0,.35);
}

/* Íconos en el cuerpo */
.table-prometeus td i{ color:#FFD700 !important; opacity:.95; }

/* ----------------- Botones de acciones ----------------- */
.table-prometeus .btn-group{ gap:.4rem; }        /* separa botones */
.table-prometeus .btn-group .btn{
  width:36px; height:36px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-width:2px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), rgba(255,255,255,.02) 60%);
  backdrop-filter:saturate(140%) blur(2px);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.table-prometeus .btn-group .btn i{ font-size:.95rem; }
.table-prometeus .btn-group .btn:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow:0 10px 22px rgba(255,215,0,.22);
  border-color:#FFD700;
}
/* Paletas por acción */
.table-prometeus .btn-outline-primary{ color:#8CC2FF; border-color:#8CC2FF; }
.table-prometeus .btn-outline-primary:hover{ background:#8CC2FF; color:#0B1739; }
.table-prometeus .btn-outline-info{ color:#9BE8FF; border-color:#9BE8FF; }
.table-prometeus .btn-outline-info:hover{ background:#9BE8FF; color:#062026; }
.table-prometeus .btn-outline-danger{ color:#FFB3B3; border-color:#FFB3B3; }
.table-prometeus .btn-outline-danger:hover{ background:#FFB3B3; color:#330000; }

/* ---------- Responsive ---------- */
@media (max-width: 992px){
  .table-prometeus td:nth-child(5),
  .table-prometeus td:nth-child(6),
  .table-prometeus th:nth-child(5),
  .table-prometeus th:nth-child(6){ display:none; } /* Teléfono / Dirección */
}
@media (max-width: 576px){
  .table-prometeus td, .table-prometeus th{ padding:.70rem .60rem; }
  .table-prometeus .btn-group .btn{ width:32px; height:32px; }
}

/* === Acciones: forma segmentada (izq redondeado, centro recto, der redondeado) === */
.table-prometeus .btn-group{
  gap: .25rem;                 /* separacion visual; usa 0 si querés que queden pegados */
}

/* Anula el circular global y define forma por posición */
.table-prometeus .btn-group > .btn{
  width: 36px; height: 36px;
  border-radius: 0 !important;                  /* base: recto */
}

/* Izquierda: solo bordes izquierdos redondeados */
.table-prometeus .btn-group > .btn:first-child{
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

/* Centro: sin redondeado */
.table-prometeus .btn-group > .btn:not(:first-child):not(:last-child){
  border-radius: 0 !important;
}

/* Derecha: solo bordes derechos redondeados */
.table-prometeus .btn-group > .btn:last-child{
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* (Opcional) Si querés que queden pegados y sin “doble borde” entre ellos */
.table-prometeus .btn-group.tight{ gap: 0; }
.table-prometeus .btn-group.tight > .btn + .btn{ margin-left: -1px; } /* junta bordes */


/* --- FIX: icono visible dentro del badge de CATEGORÍA --- */

/* 1) Que los íconos dentro de cualquier badge usen el color del texto del badge */
.table-prometeus td .badge i {
  color: currentColor !important;
  line-height: 1;
  vertical-align: middle;
}

/* 2) Color de texto/ícono en la badge amarilla (contraste oscuro) */
.table-prometeus .badge.bg-warning {
  color: #3b2e00 !important; /* texto oscuro */
}

/* 3) (Opcional) un toque de relieve para el ícono sobre el fondo amarillo */
.table-prometeus td .badge i {
  text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.2);
}

/* Estilos para el toolbar de detalle de cliente */
.toolbar .btn-sm {
  min-width: 100px; /* Ancho mínimo para los botones pequeños en el toolbar */
}

/* Estilos para el círculo de estado */
.status-circle {
  font-size: 0.8em; /* Ajusta el tamaño del círculo */
  vertical-align: middle;
}

.status-active {
  color: #28a745; /* Verde para activo */
}

.status-paused {
  color: #ffc107; /* Amarillo para pausado */
}

.status-inactive {
  color: #dc3545; /* Rojo para inactivo */
}