/*
 * ==================================================
 * GLOBAL CSS — VIDELCA (SECURITY / FIRE-STYLE) v2.0
 * ==================================================
 * Tema rojo + negro inspirado en "Sistema Bomberos / MASTER-BREAD".
 * Mantiene la estructura original (variables, layout, tablas, etc.).
 */

/* ---------- Variables y Preferencias de Usuario ---------- */
:root{
  /* Fondo y texto (oscuro fuego) */
  --bg-0:#121212;           /* fondo app principal (casi negro) */
  --bg-1:#1f1f1f;           /* contenedor/elevación 1 */
  --bg-2:#262626;           /* contenedor/elevación 2 */

  --tx-1:#f5f5f5;           /* texto principal */
  --tx-2:#e0e0e0;           /* texto secundario */
  --tx-3:#bdbdbd;           /* texto tenue */

  /* Marca / acentos rojo-bomberos */
  --brand:#D32F2F;          /* rojo principal (marca) */
  --brand-strong:#FF5252;   /* rojo intenso/hover */
  --accent-amber:#FFA000;   /* naranja alerta / botones */
  --accent-red:#FF3B3B;     /* sirena/alerta crítica */
  --accent-info:#FFC107;    /* info/avisos amarillos */

  /* Estados */
  --ok:#4CAF50;             /* verde OK, se mantiene para estados de éxito */
  --warn:#FFC107;           /* amarillo advertencia */
  --err:#EF5350;            /* rojo error */
  --info:#29B6F6;           /* azul info */

  /* Borde vítreo y radios */
  --glass-br: rgba(211,47,47,.45); /* borde con tinte rojo */
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;

  /* Focus ring accesible (doble halo rojo) */
  --ring:0 0 0 3px rgba(211,47,47,.45), 0 0 0 6px rgba(211,47,47,.20);

  /* Tipografía */
  --font:'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Contraste extra si el SO lo pide */
@media (prefers-contrast: more){
  :root{
    --tx-2:#ffffff;
    --tx-3:#f5f5f5;
    --glass-br: rgba(211,47,47,.75);
  }
}

/* Menos animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ---------- Base ---------- */
html,body{
  background:var(--bg-0);
  color:var(--tx-1);
  font-family:var(--font);
}

h1,h2,h3,h4,h5{
  color:#fff;
  letter-spacing:.3px;
}

h1{
  color:var(--brand);
  text-shadow:0 0 10px rgba(211,47,47,0.7);
}

a{
  color:var(--accent-amber);
  text-decoration:none;
  transition:color .2s,text-shadow .2s;
}

a:hover{
  color:var(--brand-strong);
  text-shadow:0 0 6px rgba(255,160,0,.45);
}

hr{border-color:rgba(255,255,255,.08)}

/* Focus ring global */
button,.btn,input,select,textarea,.page-link,.form-check-input{outline:none!important}
button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.page-link:focus-visible,.form-check-input:focus-visible{box-shadow:var(--ring)!important}


/* ================================================== */
/* LAYOUT PRINCIPAL (CONDICIONAL CON SIDEBAR)         */
/* ================================================== */
.main-content {
    padding-top: 24px;
    padding-bottom: 24px;
}

footer {
    padding: 14px 0;
    text-align: center;
    color: var(--tx-3);
    border-top: 1px solid var(--glass-br);
    background:var(--bg-1);
}

@media (min-width: 992px) {
    .main-content,
    footer {
        margin-left: 0;
        transition: margin-left .2s ease-out; /* Transición suave */
    }

    /* Aplica el margen solo cuando el body tiene la clase 'with-sidebar' */
    body.with-sidebar .main-content,
    body.with-sidebar footer {
        margin-left: 260px; /* Ancho del sidebar */
    }
}


/* ---------- Formularios / Inputs ---------- */
.form-label{
  color:var(--tx-2);
  font-weight:600;
}

.form-control,.form-select,.input-group{
  background:rgba(0,0,0,.35);
  border:1px solid var(--glass-br);
  color:#fff;
  border-radius:var(--radius-sm);
}

.form-control:focus,.form-select:focus{
  background:rgba(0,0,0,.55);
  border-color:var(--brand);
  box-shadow:var(--ring);
}

.form-control::placeholder{color:rgba(245,245,245,.55)}
.form-control-plaintext{color:#fff}
.input-group-text{background:transparent;border:none;color:var(--accent-amber)}

/* Checks/Switch */
.form-check-input{
  background-color:rgba(0,0,0,.45);
  border:1px solid var(--glass-br);
}

.form-check-input:checked{
  background-color:var(--brand);
  border-color:var(--brand);
}


/* ---------- Botones ---------- */
.btn{
  border:0;
  border-radius:var(--radius-sm);
  font-weight:800;
  letter-spacing:.35px;
  text-transform:uppercase;
  padding:.6rem 1rem;
  transition:filter .15s,transform .1s,box-shadow .2s;
}

.btn:active{transform:translateY(1px)}

.btn-primary{
  background: linear-gradient(45deg,var(--brand),var(--brand-strong));
  color:#ffffff;
  border:1px solid var(--brand-strong);
  box-shadow:0 6px 18px rgba(211,47,47,.35);
}

.btn-primary:hover{
  background: linear-gradient(45deg,var(--brand-strong),#FF7043);
  color:#ffffff;
  filter:brightness(1.05);
  box-shadow:0 10px 26px rgba(255,112,67,.5);
}

.btn-secondary{
  background:var(--bg-2);
  color:var(--tx-1);
  border:1px solid var(--glass-br);
}

.btn-secondary:hover{
  background:#303030;
  border-color:var(--accent-amber);
}

.btn-success{
  background:linear-gradient(45deg,#2e7d32,#66bb6a);
  color:#e8f5e9;
}

.btn-danger{
  background:linear-gradient(45deg,#FF5252,#FF7043);
  color:#fff;
}

.btn-warning{
  background:linear-gradient(45deg,#FFA000,#FFC107);
  color:#111;
}


/* ---------- Badges de estado ---------- */
.badge{
  border-radius:999px;
  font-weight:800;
  padding:.35rem .55rem;
}

.badge.bg-success{
  background:linear-gradient(45deg,#2e7d32,#66bb6a)!important;
  color:#e8f5e9;
}

.badge.bg-danger{
  background:linear-gradient(45deg,#D32F2F,#FF5252)!important;
  color:#fff;
}

.badge.bg-warning{
  background:linear-gradient(45deg,#FFA000,#FFC107)!important;
  color:#111;
}

.badge.bg-info{
  background:linear-gradient(45deg,#1976D2,#29B6F6)!important;
  color:#fff;
}


/* ---------- Paginación ---------- */
.pagination{margin-top:1rem;justify-content:center}

.page-link{
  background:rgba(0,0,0,.35);
  border:1px solid var(--glass-br);
  color:var(--tx-1);
  border-radius:var(--radius-sm)!important;
  margin: 0 4px;
}

.page-link:hover{
  background:rgba(255,160,0,.20);
  border-color:var(--accent-amber);
}

.page-item.active .page-link{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  font-weight:800;
  box-shadow:0 0 0 3px rgba(211,47,47,.45);
}

.page-item.disabled .page-link{
  color:rgba(255,255,255,.35);
  border-color:rgba(211,47,47,.35);
}


/* ---------- Cards / Paneles ---------- */
.card-glass{
  background:linear-gradient(180deg, rgba(38,38,38,.85), rgba(18,18,18,.95));
  border:1px solid var(--glass-br);
  border-radius:var(--radius-md);
  color:var(--tx-1);
  box-shadow:0 10px 30px rgba(0,0,0,.65);
  padding: 1.25rem;
}


/* ---------- Sidebar (si aplicas) ---------- */
.sidebar,.side-nav{
  background:#181818;
  color:var(--tx-2);
}

.sidebar .nav-link,.side-nav .nav-link{
  color:var(--tx-2);
}

.sidebar .nav-link.active,.side-nav .nav-link.active{
  background:#262626;
  color:#fff;
  border-left:3px solid var(--brand);
}


/* ---------- Utilidades ---------- */
.text-dim{color:var(--tx-2)!important}
.text-mute{color:var(--tx-3)!important}
.bg-elev-1{background:var(--bg-1)}
.bg-elev-2{background:var(--bg-2)}
.br-brand{border-color:var(--brand)!important}


/* ================================================== */
/* ESTILOS DE TABLA (VERSIÓN ROJO / NEGRO)            */
/* ================================================== */

/* 1. Contenedor de la tabla */
.table-responsive {
  background: var(--bg-1);
  border: 1px solid var(--glass-br);
  border-radius: var(--radius-md);
  overflow-x: auto;   /* Permite scroll horizontal si la tabla es muy ancha */
  overflow-y: hidden; /* Evita el scroll vertical dentro del contenedor */
}

/* 2. Estilos base de la tabla */
.table {
  --bs-table-bg: transparent; /* Fondo de celda por defecto */
  --bs-table-color: var(--tx-1); /* Color de texto por defecto */
  --bs-table-striped-bg: rgba(211,47,47,.10); /* Fondo de fila con franja */
  --bs-table-striped-color: var(--tx-1); /* Color de texto en fila con franja */
  --bs-table-hover-bg: rgba(255,160,0,.18); /* Fondo de fila en hover (naranja) */
  --bs-table-hover-color: #fff; /* Texto más brillante en hover */
  --bs-table-border-color: rgba(211,47,47,.30); /* Borde entre filas rojo tenue */

  margin-bottom: 0;
  border-color: var(--bs-table-border-color);
}

/* 3. Estilos del encabezado */
.table thead {
    background: #2b1414; /* rojo muy oscuro */
}

.table thead th {
    color: var(--accent-amber); /* Naranja/amarillo para encabezados */
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: .85rem;
    border-bottom: 2px solid var(--glass-br);
}

/* 4. Celdas y alineación */
.table td, .table th {
    vertical-align: middle;
    padding: .9rem .75rem;
}

.table tbody tr:last-child > * {
    border-bottom-width: 0;
}