/* =========================================================
   THEME · RED RACING (portal + login)
   ========================================================= */

:root{
  /* Base */
  --bg-main: #07060a;
  --bg-ink: #0a070c;
  --bg-card: rgba(18, 10, 12, 0.92);
  --bg-card-soft: rgba(18, 10, 12, 0.82);

  /* Text */
  --text-main: #fff3f3;
  --text-muted: rgba(255, 243, 243, 0.72);

  /* Reds */
  --accent: #ef4444;
  --accent-soft: #f87171;
  --accent-deep: #b91c1c;

  /* Borders & shadows */
  --border-subtle: rgba(248, 113, 113, 0.32);
  --border-strong: rgba(239, 68, 68, 0.72);

  --shadow-hard: 0 22px 65px rgba(0,0,0,0.88);
  --shadow-soft: 0 18px 45px rgba(0,0,0,0.65);

  /* UI */
  --radius-lg: 1.2rem;
  --radius-md: 0.9rem;
  --radius-sm: 0.7rem;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  min-height:100vh;
  color:var(--text-main);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Fondo portal: carbono + rojos (SIN azules/verdes) */
  background:
    radial-gradient(circle at 10% 10%, rgba(239, 68, 68, 0.18), transparent 55%),
    radial-gradient(circle at 90% 15%, rgba(185, 28, 28, 0.16), transparent 55%),
    radial-gradient(circle at 20% 90%, rgba(248, 113, 113, 0.12), transparent 60%),
    radial-gradient(circle at 80% 85%, rgba(239, 68, 68, 0.10), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.0)),
    var(--bg-main);
  background-size: cover;
}

/* Tipografía global clara */
h1,h2,h3,h4,h5,h6,p,label,span,small,strong,td,th,li{ color:var(--text-main); }
.text-muted{ color:var(--text-muted) !important; }

/* =========================================================
   LAYOUT PORTAL
   ========================================================= */

.app-layout{ display:flex; min-height:100vh; }

/* Sidebar */
.sidebar{
  width: 272px;
  padding: 1.4rem 0 1.4rem 1.4rem;
  position: relative;
  z-index: 2;
}

.sidebar-inner{
  height:100%;
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.1rem 1.1rem;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.04), transparent 55%),
    rgba(10, 7, 12, 0.92);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-hard), 0 0 0 1px rgba(255,255,255,0.04);
  display:flex;
  flex-direction:column;
}

/* Acento lateral rojo (sin arcoiris) */
.sidebar-accent{
  position:absolute;
  top: 8%;
  bottom: 8%;
  left: 0.4rem;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(239,68,68,0),
    rgba(239,68,68,1),
    rgba(185,28,28,1),
    rgba(239,68,68,0)
  );
  filter: drop-shadow(0 0 12px rgba(239,68,68,0.70));
  animation: sidebar-glow 3.8s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes sidebar-glow{
  0%{ opacity:0.55; transform:translateY(-8px); }
  100%{ opacity:0.95; transform:translateY(8px); }
}

/* Logo sidebar */
.sidebar-logo{ position:relative; text-align:left; }
.sidebar-logo-img{
  height: 46px;
  border-radius: 0.8rem;
  display:block;
  filter: drop-shadow(0 0 12px rgba(239,68,68,0.45));
  transition: transform .25s ease, filter .25s ease;
}
.sidebar-logo:hover .sidebar-logo-img{
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 0 18px rgba(239,68,68,0.75));
}
.sidebar-logo-glow{
  position:absolute;
  inset: 50% -10px auto;
  height: 22px;
  background: radial-gradient(circle at center, rgba(239,68,68,0.55), transparent 70%);
  opacity:0.55;
  filter: blur(4px);
  pointer-events:none;
}

/* Usuario */
.sidebar-user{
  padding: .75rem;
  border-radius: var(--radius-md);
  background: rgba(10, 7, 12, 0.78);
  border: 1px solid rgba(248,113,113,0.35);
}
.sidebar-user-company{ font-size:.95rem; font-weight:700; }
.sidebar-user-contact{ font-size:.8rem; color:var(--text-muted); }
.sidebar-user-logo{
  height: 32px; width: 32px;
  border-radius: .6rem;
  object-fit: contain;
  margin-left: .6rem;
  box-shadow: 0 0 18px rgba(0,0,0,0.35);
}

/* Navegación */
.sidebar-nav{ margin-top:.6rem; overflow-y:auto; }
.sidebar-section-title{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.sidebar-menu{ margin:0; padding-left:0; }
.sidebar-link{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .8rem;
  margin-bottom:.22rem;
  border-radius: .85rem;
  text-decoration:none;
  font-size: .9rem;
  color: var(--text-main);
  opacity: .86;
  transition: background .18s ease, opacity .18s ease, transform .12s ease, box-shadow .18s ease;
}
.sidebar-link-dot{
  width: 7px; height: 7px;
  border-radius:999px;
  background: rgba(248,113,113,0.75);
  box-shadow: 0 0 10px rgba(239,68,68,0.35);
}
.sidebar-link:hover{
  background: rgba(255,255,255,0.04);
  opacity:1;
  transform: translateX(1px);
}
.sidebar-link.active{
  background: linear-gradient(90deg, rgba(239,68,68,0.78), rgba(185,28,28,0.78));
  opacity:1;
  box-shadow: 0 14px 30px rgba(239,68,68,0.28);
}
.sidebar-link.active .sidebar-link-dot{
  background: #ffd0d0;
  box-shadow: 0 0 12px rgba(239,68,68,0.55);
}

/* Main */
.app-main{ flex:1; padding:1.7rem 2.1rem 2.1rem 1.1rem; }
.container{ max-width: 1200px; }

/* =========================================================
   CARDS / HEADERS
   ========================================================= */
.card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at top left, rgba(239,68,68,0.10), transparent 55%),
    radial-gradient(circle at bottom right, rgba(255,255,255,0.03), transparent 55%),
    var(--bg-card);
  color: var(--text-main);
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255,255,255,0.03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-hard), 0 0 0 1px rgba(255,255,255,0.04);
  border-color: var(--border-strong);
}
.card-header{
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  background: linear-gradient(90deg, rgba(239,68,68,0.22), rgba(185,28,28,0.14));
  border-bottom: 1px solid rgba(248,113,113,0.28);
  color: var(--text-main);
}

/* =========================================================
   TABLAS
   ========================================================= */
.table{ color: var(--text-main); }
.table thead{ background: rgba(10,7,12,0.92); }
.table thead th{ border-bottom-color: rgba(248,113,113,0.25); }
.table-striped > tbody > tr:nth-of-type(odd) > *{
  --bs-table-accent-bg: rgba(10,7,12,0.62);
}

/* =========================================================
   BOTONES
   ========================================================= */
.btn-primary{
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border: none;
  font-weight: 700;
  color: #140406;
  box-shadow: 0 14px 30px rgba(239,68,68,0.28);
}
.btn-primary:hover{
  background: linear-gradient(135deg, #f87171, #991b1b);
  box-shadow: 0 18px 40px rgba(239,68,68,0.40);
}
.btn-outline-secondary,
.btn-outline-light{
  border-radius: 999px;
  border-width: 1px;
}

/* =========================================================
   INPUTS / FORM
   ========================================================= */
.form-control,
.form-select{
  border-radius: var(--radius-sm);
  background-color: rgba(10,7,12,0.88);
  color: var(--text-main);
  border: 1px solid rgba(248,113,113,0.32);
}
.form-control::placeholder{ color: rgba(255,220,220,0.55); }

.form-control:focus,
.form-select:focus{
  border-color: rgba(239,68,68,0.85);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.45), 0 0 18px rgba(185,28,28,0.35);
  background-color: rgba(10,7,12,0.95);
  color: var(--text-main);
}

/* Checkboxes */
.form-check-input{
  background-color: rgba(10,7,12,0.95);
  border-color: rgba(248,113,113,0.40);
}
.form-check-input:checked{
  background-color: var(--accent);
  border-color: var(--accent-soft);
}

/* =========================================================
   AVAILABILITY (si lo usas en portal)
   ========================================================= */
.availability-bar{
  border-radius: 1rem;
  padding: .6rem 1.2rem;
  margin-bottom: 1.2rem;
  background: rgba(10,7,12,0.70);
  border: 1px solid rgba(239,68,68,0.35);
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  font-size:.85rem;
  box-shadow: var(--shadow-soft);
}
.availability-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .7rem;
  border-radius: 999px;
  background: rgba(10,7,12,0.92);
  border: 1px solid rgba(248,113,113,0.28);
}
.availability-dot{
  width:9px; height:9px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(239,68,68,0.55);
}
.availability-dot.offline{
  background:#f97316;
  box-shadow: 0 0 12px rgba(249,115,22,0.55);
}
#liveClock{ font-weight: 700; letter-spacing:.06em; }

/* =========================================================
   BADGES (dejamos tu lógica por status, pero armonizamos)
   ========================================================= */
.badge-status{
  display:inline-block;
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  padding:.5rem .85rem;
  border-radius:9999px;
  white-space:nowrap;
  line-height:1;
}
.badge-status[data-status="pendiente"]{
  background-color:#f97316;
  color:#140406;
  box-shadow: 0 2px 6px rgba(249,115,22,0.25);
}
.badge-status[data-status="en_proceso"]{
  background-color:#ef4444;
  color:#140406;
  box-shadow: 0 2px 6px rgba(239,68,68,0.25);
}
.badge-status[data-status="listo"]{
  background-color:#22c55e;
  color:#05210f;
  box-shadow: 0 2px 6px rgba(34,197,94,0.20);
}
.badge-status[data-status="rechazado"]{
  background-color:#b91c1c;
  color:#fff;
  box-shadow: 0 2px 6px rgba(185,28,28,0.25);
}
.badge-status[data-status="cerrado"]{
  background-color:#475569;
  color:#fff;
  box-shadow: 0 2px 6px rgba(71,85,105,0.25);
}

/* Links */
a{ color: rgba(255,230,230,0.92); text-decoration:none; }
a:hover{ color:#fff; text-decoration:underline; }

/* Alerts */
.alert-dark-themed{
  background: rgba(10,7,12,0.90);
  border: 1px solid rgba(239,68,68,0.25);
  color: var(--text-main);
}

/* =========================================================
   LOGIN (solo fondo estático + UI roja)
   ========================================================= */

/* El login debe aplicarse con <body class="login-body"> */
.login-body{
  margin:0;
  min-height:100vh;
  color: var(--text-main);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Fondo estático */
  background-image: url("../img/login-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  position: relative;
}
.login-body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.50);
  z-index: 0;
  pointer-events:none;
}

/* Layout principal login */
.login-main-wrapper{
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  display:flex;
  gap: 32px;
  align-items:center;
  justify-content:center;
  padding: 32px 20px;
  box-sizing:border-box;
}

/* Columna izquierda */
.login-side{
  flex: 1.1;
  max-width: 620px;
  display:flex;
  flex-direction:column;
  gap: 18px;
  color: rgba(255,235,235,0.96);
}

/* Chip marca */
.login-side-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,0.75);
  background: rgba(0,0,0,0.45);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ffecec;
}
.login-side-chip::before{
  content:"";
  width:6px; height:6px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(239,68,68,0.85);
}

.login-side-title{
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1.14;
  margin:0;
  color:#fff;
  text-shadow: 0 0 18px rgba(0,0,0,0.65);
}
.login-side-title span{
  color: var(--accent);
  text-shadow: 0 0 18px rgba(239,68,68,0.35);
}
.login-side-text{
  margin: 4px 0 8px;
  font-size: .98rem;
  max-width: 480px;
  color: rgba(255,235,235,0.82);
}

/* Highlights */
.login-highlight-grid{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.login-highlight{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(239,68,68,0.28);
  max-width: 440px;
}
.login-highlight-dot{
  width:10px; height:10px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(239,68,68,0.65);
}
.login-highlight-text{ font-size:.86rem; color: rgba(255,235,235,0.88); }
.login-side-footnote{ margin-top:8px; font-size:.75rem; color: rgba(255,220,220,0.72); }

/* Card derecha */
.login-card-wrapper{ flex: .9; max-width: 420px; position:relative; }
.login-card-glow{
  position:absolute;
  inset: -12px;
  background: radial-gradient(circle at top, rgba(239,68,68,0.22), transparent 60%);
  filter: blur(12px);
  opacity: 0.95;
  pointer-events:none;
}
.login-card{
  position:relative;
  background:
    radial-gradient(circle at top left, rgba(239,68,68,0.12), transparent 55%),
    radial-gradient(circle at bottom right, rgba(255,255,255,0.03), transparent 55%),
    rgba(10,7,12,0.92);
  border-radius: 18px;
  padding: 26px 22px 20px;
  box-shadow: var(--shadow-hard), 0 0 0 1px rgba(255,255,255,0.05);
  border: 1px solid rgba(248,113,113,0.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.login-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(239,68,68,0.90),
    rgba(185,28,28,0.92),
    rgba(248,113,113,0.78),
    rgba(239,68,68,0.90)
  );
  opacity: 0.12;
  z-index:-1;
  filter: blur(4px);
}

/* Header card */
.login-card-header{ text-align:center; margin-bottom: 14px; }
.login-logo-wrap{ display:flex; justify-content:center; margin-bottom: 6px; }
.login-logo{ max-width: 180px; height:auto; filter: drop-shadow(0 0 14px rgba(0,0,0,0.8)); }
.login-title{
  font-weight: 900;
  font-size: 1.15rem;
  margin: 4px 0 4px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.login-subtitle{ margin:0; font-size: .86rem; color: rgba(255,230,230,0.80); }

/* Mensajes */
.login-flash-container{ margin-bottom: 10px; }
.login-flash{
  font-size:.84rem;
  padding: 7px 9px;
  border-radius: 9px;
  margin-bottom: 5px;
}
.login-flash-success{
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.50);
  color: #dbffe8;
}
.login-flash-danger,
.login-flash-error{
  background: rgba(239,68,68,0.14);
  border: 1px solid rgba(239,68,68,0.55);
  color: #ffe2e2;
}

/* Form */
.login-form{ margin-top: 8px; }
.login-field{ margin-bottom: 14px; }
.login-label{
  display:block;
  margin-bottom:5px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color: rgba(255,230,230,0.82);
}
.login-input-wrap{ position:relative; display:flex; align-items:center; }
.login-input-icon{
  position:absolute;
  left: 10px;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(248,113,113,0.85);
  pointer-events:none;
}
.login-input{
  width:100%;
  padding: 10px 11px 10px 32px;
  border-radius: 9px;
  border: 1px solid rgba(248,113,113,0.35);
  background: rgba(0,0,0,0.45);
  color:#fff;
  font-size:.95rem;
  outline:none;
  transition: border-color .17s ease, box-shadow .17s ease, background .17s ease;
}
.login-input::placeholder{ color: rgba(255,230,230,0.55); }
.login-input:focus{
  border-color: rgba(239,68,68,0.90);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.45), 0 0 18px rgba(185,28,28,0.35);
  background: rgba(0,0,0,0.55);
}

/* Botón */
.login-btn{
  width:100%;
  position:relative;
  overflow:hidden;
  border:none;
  border-radius: 999px;
  padding: 11px 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #140406;
  font-weight: 900;
  font-size: .96rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor:pointer;
  box-shadow: 0 14px 32px rgba(239,68,68,0.30), 0 0 22px rgba(185,28,28,0.28);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.login-btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.login-btn:active{ transform: translateY(1px); }

.login-btn-glow{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 0 0, rgba(255,255,255,0.70), transparent 55%);
  opacity: 0.22;
  mix-blend-mode: screen;
  transform: translateX(-120%);
  animation: login-btn-swipe 4s ease-in-out infinite;
}
@keyframes login-btn-swipe{
  0%{ transform: translateX(-120%); opacity:0; }
  25%{ transform: translateX(20%); opacity:.4; }
  50%{ transform: translateX(120%); opacity:0; }
  100%{ transform: translateX(120%); opacity:0; }
}

/* Footer */
.login-footer{
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(248,113,113,0.25);
  display:flex;
  flex-direction:column;
  gap: 5px;
  font-size: .76rem;
  color: rgba(255,230,230,0.78);
}
.login-footer-chip{
  align-self:center;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,0.65);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,235,235,0.90);
}
.login-footer-text{ text-align:center; }

/* Responsive */
@media (max-width: 900px){
  .login-main-wrapper{ flex-direction:column; padding-top:40px; padding-bottom:40px; }
  .login-side{ text-align:center; align-items:center; }
  .login-side-text,.login-highlight,.login-side-footnote{ text-align:center; }
  .login-highlight{ align-self:center; }
  .login-card-wrapper{ width:100%; max-width:420px; }
}

.status-dot{
    width:14px;
    height:14px;
    border-radius:50%;
    display:inline-block;
}

/* Colores */
.dot-pendiente      { background:#94a3b8; }
.dot-en_cola        { background:#3b82f6; }
.dot-en_proceso     { background:#f59e0b; }
.dot-validando      { background:#8b5cf6; }
.dot-listo          { background:#22c55e; }
.dot-requiere_info  { background:#ef4444; }
.dot-rechazado      { background:#1f2937; }
.dot-cerrado        { background:#10b981; }
.dot-default        { background:#64748b; }