/* px_sys — Retro Modern Theme (IBM-ish) - Código Consolidado y Optimizado */

/* ==================================== */
/* 1. VARIABLES & GLOBALES */
/* ==================================== */
:root{
  --bg:#0b1020; --panel:#0f1731; --panel2:#0b132b;
  --text:#d7e0ff; --muted:#9fb0e6;
  --border:rgba(150,180,255,.16);
  --primary:#63ffb2; --amber:#ffd36a; --red:#ff6b6b;
  --radius:14px; --radius-sm:10px;
  --shadow:0 16px 40px rgba(0,0,0,.35);
  --shadow2:0 10px 28px rgba(0,0,0,.28);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}
*{box-sizing:border-box}

/* Añadida transición sutil para mejorar la interactividad */
a, .btn, .nav a, .iconbtn, .badge {
  transition: all 0.2s ease-in-out; 
}

html,body{height:100%}
body{
  margin:0; font-family:var(--mono);
  background: radial-gradient(1200px 800px at 40% -10%, rgba(99,255,178,.10), transparent 55%),
              radial-gradient(900px 600px at 90% 20%, rgba(255,211,106,.08), transparent 55%),
              var(--bg);
  color:var(--text);
  letter-spacing:.01em;
  line-height:1.35;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.028) 0px, rgba(255,255,255,.028) 1px,
    rgba(0,0,0,0) 3px, rgba(0,0,0,0) 6px);
  mix-blend-mode:overlay; opacity:.25;
}
a{color:inherit; text-decoration:none}
.container{padding:18px}
.app{display:grid; grid-template-columns:280px 1fr; min-height:100vh}

/* ==================================== */
/* 2. LAYOUT: SIDEBAR */
/* ==================================== */
.sidebar{
  position:sticky; top:0; height:100vh;
  padding:16px 14px;
  /* Fondo mejorado: usa el degradado de la sección final para un mejor efecto */
  background:linear-gradient(180deg, rgba(15,23,49,.88), rgba(11,19,43,.88));
  border-right:1px solid var(--border);
  backdrop-filter: blur(8px);
}
.brand{
  display:flex; align-items:center; gap:12px;
  padding:10px 10px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(15,23,49,.55);
  box-shadow:var(--shadow2);
}
.logo{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(99,255,178,.10);
  border:1px solid rgba(99,255,178,.28);
  color:var(--primary); font-weight:900;
  letter-spacing:.08em;
}
.brand .title{font-size:13px; font-weight:900; margin:0}
.brand .sub{font-size:12px; color:var(--muted); margin:2px 0 0}

.nav{margin-top:14px}
.nav h3{
  margin:16px 10px 8px;
  font-size:11px; color:var(--muted);
  font-weight:900; letter-spacing:.14em; text-transform:uppercase;
}
.nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px; border-radius:12px;
  border:1px solid transparent;
}
.nav a:hover{
  background:rgba(99,255,178,.06);
  border-color:rgba(99,255,178,.18);
}
.nav a.active{
  background:rgba(99,255,178,.08);
  border-color:rgba(99,255,178,.28);
}
.dot{
  width:9px; height:9px; border-radius:999px;
  background:rgba(215,224,255,.18);
  box-shadow:0 0 0 3px rgba(215,224,255,.04);
}
.nav a.active .dot{
  background:var(--primary);
  box-shadow:0 0 18px rgba(99,255,178,.35);
}
.kbd{
  margin-left:auto;
  font-size:11px; color:var(--muted);
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  padding:4px 7px; border-radius:8px;
}
.sidebar-footer{
  position:absolute; left:14px; right:14px; bottom:14px;
  padding:12px; border-radius:var(--radius);
  border:1px solid var(--border);
  background:rgba(15,23,49,.55);
  box-shadow:var(--shadow2);
}
.meta{display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.chip b{color:var(--text)}

/* ==================================== */
/* 3. LAYOUT: MAIN CONTENT & TOPBAR */
/* ==================================== */
.main{
  padding: 18px 18px 24px; /* Mantener padding original */
}

/* Estilos de tipografía consolidados de la sección final */
.main h1, .main h2{
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: .08em;
}
.main h2{
  font-size: 18px;
}
.main p{
  color: var(--muted);
  margin: 0 0 14px;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px; border-radius:var(--radius);
  border:1px solid var(--border);
  background:rgba(15,23,49,.55);
  box-shadow:var(--shadow);
  backdrop-filter: blur(8px);
}
.search{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.14);
  min-width:360px;
}
.search .prompt{color:var(--primary); font-weight:900; letter-spacing:.06em}
.search input{
  border:0; outline:0; width:100%;
  font-family:var(--mono); font-size:13px; color:var(--text);
  background:transparent;
}
.search input::placeholder{color:rgba(215,224,255,.55)}
.actions{display:flex; gap:10px; align-items:center}

/* ==================================== */
/* 4. BOTONES (BTN & ICONBTN) */
/* ==================================== */
/* Estilos .btn consolidados (tomando los mejores de ambas secciones) */
.btn{
  cursor:pointer; font-family:var(--mono);
  font-size:12px; font-weight:900; 
  letter-spacing:.12em; /* Usar el tracking más amplio de la sección final */
  text-transform:uppercase;
  padding:10px 14px; /* Usar el padding más amplio de la sección final */
  border-radius:999px; /* Usar el radio de chip de la sección final */
  border:1px solid var(--border);
  background:rgba(255,255,255,.04); /* Usar el fondo de la sección final */
  color:var(--text);
}
.btn:hover{
  /* Mejor hover de la sección final */
  box-shadow: 0 0 18px rgba(99,255,178,.25); 
  border-color: rgba(99,255,178,.35); 
  /* Asegurar que el fondo no cambie drásticamente */
  background:rgba(255,255,255,.04); 
}
.btn.primary{
  background:rgba(99,255,178,.12);
  border-color:rgba(99,255,178,.45); /* Mejor borde de la sección final */
  color:var(--primary);
}
.btn.primary:hover{background:rgba(99,255,178,.18)}

.iconbtn{
  cursor:pointer; font-family:var(--mono);
  font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 10px; border-radius:10px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
  color:var(--text);
}
.iconbtn:hover{background:rgba(99,255,178,.06); border-color:rgba(99,255,178,.22)}

/* ==================================== */
/* 5. SECCIÓN DE PÁGINA (PAGE HEAD, CARDS, GRID) */
/* ==================================== */
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:6px 4px}
.page-title{margin:0; font-size:18px; font-weight:900; letter-spacing:.10em; text-transform:uppercase}
.page-sub{margin:6px 0 0; font-size:12px; color:var(--muted)}
.cards{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
.card{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:rgba(15,23,49,.55);
  box-shadow:var(--shadow2);
  padding:12px; position:relative; overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:-2px -2px auto -2px; height:2px;
  background:linear-gradient(90deg, transparent, rgba(99,255,178,.55), transparent);
  opacity:.65;
}
.kpi-label{font-size:11px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase}
.kpi{margin-top:8px; font-size:22px; font-weight:900; color:var(--primary)}
.kpi-note{margin-top:8px; font-size:12px; color:var(--muted)}

.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.box{
  border:1px solid var(--border); border-radius:12px;
  padding:10px; background:rgba(0,0,0,.12);
}
.box .label{font-size:11px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase}
.box .value{margin-top:6px; font-weight:900}

/* ==================================== */
/* 6. PANELES & FILTROS */
/* ==================================== */
/* Estilos .panel consolidados (tomando el fondo degradado de la sección final) */
.panel{
  background: linear-gradient(180deg, rgba(15,23,49,.7), rgba(11,19,43,.7));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px; /* Mejor padding de la sección final */
  overflow:hidden;
  margin-bottom: 14px; /* Añadido espaciado entre paneles */
}

.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px; border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.14);
}
.panel-head h2{margin:0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.field{
  display:flex; align-items:center; gap:8px;
  padding:9px 10px; border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.14);
  font-size:12px; color:var(--muted);
}
.field input,.field select{
  border:0; outline:0;
  font-family:var(--mono); font-size:12px;
  color:var(--text); background:transparent;
}

/* ==================================== */
/* 7. TABLAS (CLASE .table) */
/* ==================================== */
.table-wrap{overflow:auto}
/* Usamos la clase .table en lugar del selector genérico para mayor especificidad */
.table{
  width: 100%;
  border-collapse: collapse; /* Usar collapse para mejor manejo */
  border-spacing: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18); /* Fondo de la sección final */
}
.table th{
  text-align:left; padding:12px;
  font-size:11px; color:var(--muted);
  letter-spacing:.14em; /* Usar tracking más amplio de la sección final */
  text-transform:uppercase;
  border-bottom:1px solid var(--border);
  background:rgba(15,23,49,.8); /* Mejor fondo de la sección final */
  position:sticky; top:0;
}
.table td{
  padding: 12px;
  border-bottom: 1px solid rgba(150,180,255,.10); 
  font-size:12.5px
}
.table tr:hover td{
  background: rgba(99,255,178,.05);
}
.money{font-weight:900; color:var(--amber)}
.row-actions{display:flex; gap:8px; justify-content:flex-end}


/* ==================================== */
/* 8. BADGES (CLASES DE ESTADO) */
/* ==================================== */
.badge{
  display:inline-flex; 
  align-items:center; 
  gap:8px; /* Gap original */
  padding: 6px 10px; 
  border-radius:999px;
  font-weight:900; 
  font-size:11px;
  letter-spacing:.12em; /* Usar el tracking más amplio de la sección final */
  text-transform:uppercase;
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
}
.b-dot{width:8px; height:8px; border-radius:999px; background:rgba(215,224,255,.24)}

/* Clases de estado genéricas (¡Ideales para reutilización!) */
.badge.ok{ color: var(--primary); border-color: rgba(99,255,178,.4); }
.badge.warn{ color: var(--amber); border-color: rgba(255,211,106,.4); }
.badge.danger{ color: var(--red); border-color: rgba(255,107,107,.4); }

/* Clases de estado específicas (se mantienen, pero ahora complementan) */
.b-recibida{border-color:rgba(159,176,230,.25)}
.b-recibida .b-dot{background:#9fb0e6}
.b-programada{border-color:rgba(99,255,178,.30); color:var(--primary)}
.b-programada .b-dot{background:var(--primary)}
.b-ejecucion{border-color:rgba(255,211,106,.38); color:var(--amber)}
.b-ejecucion .b-dot{background:var(--amber)}
.b-finalizada{border-color:rgba(99,255,178,.28); color:var(--primary)}
.b-finalizada .b-dot{background:var(--primary)}


/* ==================================== */
/* 9. HEADERBAR & TABS */
/* ==================================== */
.headerbar{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(15,23,49,.55);
  box-shadow:var(--shadow);
  padding:14px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.headerbar .h-title{font-size:18px; font-weight:900; letter-spacing:.12em}
.headerbar .h-meta{font-size:12px; color:var(--muted)}
.tabs{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap}
.tab{
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  font-size:12px; letter-spacing:.08em;
  background:rgba(255,255,255,.03);
}
.tab.active{background:rgba(99,255,178,.12); color:var(--primary); border-color:rgba(99,255,178,.28)}


/* ==================================== */
/* 10. MEDIA QUERIES */
/* ==================================== */
@media (max-width: 1060px){
  .app{grid-template-columns:1fr}
  .sidebar{position:relative; height:auto}
  .sidebar-footer{position:relative; left:auto; right:auto; bottom:auto; margin-top:12px}
  .cards{grid-template-columns:repeat(2, minmax(0,1fr))}
  .search{min-width:0}
  .grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .cards{grid-template-columns:1fr}
  .topbar{flex-direction:column; align-items:stretch}
  .actions{justify-content:space-between}
}
/* Columna acciones: que no se monten */
.table td.td-actions {
  white-space: normal;       /* permite saltos */
}

.table td.td-actions .actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;           /* si no cabe, baja a la línea siguiente */
}

/* Acciones en tablas: no se montan al achicar */
.table td.td-actions {
  white-space: normal;
}

.table td.td-actions .actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* En pantallas chicas, apilar botones */
@media (max-width: 900px) {
  .table td.td-actions .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .table td.td-actions .actions .btn {
    width: 100%;
    text-align: center;
  }
}
/* ===== FIX ACCIONES EN TABLAS (NO SE MONTAN) ===== */
.table td:last-child {
  white-space: normal; /* permite salto */
}

.table td:last-child .row-actions,
.table td:last-child .actions,
.table td:last-child .actions-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.table td:last-child .btn {
  white-space: nowrap; /* que cada boton no se parta */
}
@media (max-width: 900px) {
  .table td:last-child .row-actions,
  .table td:last-child .actions,
  .table td:last-child .actions-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .table td:last-child .btn {
    width: 100%;
    text-align: center;
  }
}