/* Vanilla UI without external libs */
:root{
  --topbar-h: 56px;
  --sidebar-w: 260px;
  --brand: #0e5bb8;
  --bg: #f4f6f8;
  --card: #fff;
  --text: #20262e;
  --muted: #6b7a90;
  --border: #e3e8ef;
  --accent: #0d6efd;
}

*{box-sizing:border-box}
html,body{height:100%}
body.app{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.35;
}

/* Topbar */
.topbar{
  height: var(--topbar-h);
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:0 1rem;
  background: var(--brand);
  color:#fff;
  position: sticky;
  top:0;
  z-index: 50;
}
.topbar .brand{ color:#fff; font-weight:700; text-decoration:none; }
.topbar .spacer{ flex:1 }
.icon-btn{
  background:transparent; border:0; color:#fff; font-size:1.25rem; cursor:pointer;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .75rem; border-radius:.5rem; border:1px solid var(--border);
  background:#fff; color:var(--text); text-decoration:none;
}
.btn.small{ padding:.35rem .6rem; font-size:.9rem }
.btn.danger{ background:#e03131; color:#fff; border-color:#e03131 }
.user.small{ font-size:.9rem; opacity:.9 }

/* Layout */
.layout{ display:flex; min-height: calc(100vh - var(--topbar-h)); }
.sidebar{
  width: var(--sidebar-w);
  background:#0b2239;
  color:#e6edf3;
  position: relative;
}
.sidebar-header{
  display:flex; align-items:center; gap:.75rem; padding:1rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.logo{ width:36px; height:36px; display:grid; place-items:center; background:#19507e; border-radius:.35rem; font-weight:700; }
.title{ font-weight:600 }

.menu{ list-style:none; margin:0; padding:.5rem; }
.menu-section{
  text-transform:uppercase; font-size:.75rem; letter-spacing:.08em;
  color:#9ab; margin:.5rem .5rem;
}
.menu-item{ position: relative; }
.menu-link{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.6rem .75rem; margin:.25rem 0; border-radius:.4rem;
  color:#e6edf3; text-decoration:none;
}
.menu-link:hover{ background:rgba(255,255,255,.08); }
.menu-link .chev{ opacity:.6 }

/* Flyout (desktop) */
/* Flyout anchored to LI */
/* Flyout anchored to LI (no gap) */
.flyout{
  position:absolute;
  left:100%; top:0;
  background:#0f2a46;
  color:#e6edf3;
  min-width:220px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:.5rem;
  box-shadow:0 12px 24px rgba(0,0,0,.25);
  display:none;
  padding:.35rem;
  z-index:2000;
}


.flyout .flyout-link{
  display:block; padding:.55rem .65rem; border-radius:.35rem; text-decoration:none; color:#e6edf3;
}
.flyout .flyout-link:hover{ background: rgba(255,255,255,.08); }

.menu-item.show > .flyout{ display:block; }

/* Content */
.content{ flex:1; padding:1rem; }
.page-header{
  display:flex; align-items:end; justify-content:space-between; gap:1rem;
  margin-bottom: .75rem;
}
.page-header h1{ margin:0; font-size:1.4rem }
.page-header .muted{ color:var(--muted); font-size:1rem; margin-left:.5rem }
.breadcrumb{ color:var(--muted); display:flex; gap:.5rem; align-items:center }
.breadcrumb a{ color:var(--accent); text-decoration:none }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1rem }
.card{ background:var(--card); border:1px solid var(--border); border-radius:.65rem; overflow:hidden }
.card-header{ padding:.75rem 1rem; border-bottom:1px solid var(--border); font-weight:600 }
.card-body{ padding:1rem }
.card-footer{ padding:.65rem 1rem; border-top:1px solid var(--border); color:var(--muted) }

/* Responsive sidebar (mobile) */
@media (max-width: 991.98px){
  .menu-item{ position: static; }

  .sidebar{ position: fixed; top: var(--topbar-h); bottom:0; left:-100%; transition:left .25s ease; z-index:100; }
  .sidebar.open{ left:0; }
  /* Flyout becomes in-place accordion on mobile */
  .flyout{ position: static; left:auto; top:auto; display:none; box-shadow:none; border:0; background:transparent; padding:.25rem .25rem .5rem .75rem }
  .menu-item.open > .flyout{ display:block; }
}

/* Login page */
.login-wrapper{
  min-height: 100vh;
  display:grid; place-items:center;
  background: radial-gradient(1200px 600px at 10% -10%, #eaf3ff 0%, transparent 60%), radial-gradient(1000px 600px at 120% 110%, #eaf3ff 0%, transparent 60%), var(--bg);
}
.login-card{
  width:min(520px, 92vw);
  background:#fff; border:1px solid var(--border); border-radius:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:1.25rem;
}
.login-card h1{ margin:.25rem 0 1rem; text-align:center }
.form-row{ margin-bottom:.75rem }
.input{
  width:100%; padding:.7rem .85rem; border:1px solid var(--border); border-radius:.6rem; outline:0;
  background:#f6f8fb;
}
.input:focus{ border-color:#94b7ff; background:#fff; }
.btn.primary{ background: var(--accent); color:#fff; border-color: var(--accent); }



.menu-item.has-sub.open > .flyout{ display:block; }

.table-wrap{ width:100%; overflow:auto; }
.table{ width:100%; border-collapse:collapse; font-size:.95rem }
.table thead th{ text-align:left; background:#f1f4f8; border-bottom:1px solid var(--border); padding:.6rem .8rem; }
.table tbody td{ border-top:1px solid var(--border); padding:.6rem .8rem; }
.table tbody tr:hover{ background:#fafbff; }
.mb-2{ margin-bottom:.75rem }


/* Login: brand logo centered (Diagnosti GAS) */
.login-card .logo img{
  display:block;
  margin:.25rem auto .5rem;
  width:85%;
  max-width:320px;
  height:auto;
}
.login-card p.subtitle{
  text-align:center;
  color: var(--muted);
  margin:.25rem 0 .75rem;
}


/* --- Brand logo at login (override any generic .logo styles) --- */
.login-card .brand-logo,
.brand-logo-center{
  width:auto; height:auto; display:block; background:transparent; box-shadow:none; border-radius:0;
  text-align:center; margin:0 auto .25rem;
}
.login-card .brand-logo img{ display:block; margin:.15rem auto .35rem; width:72%; max-width:260px; height:auto; }
.brand-logo-center img{ display:block; margin:.15rem auto .35rem; width:72%; max-width:260px; height:auto; }



/* === Form grid helpers (for Taller & others) === */
.form-grid{
  display:grid;
  gap:.75rem 1rem;
  /* default columns when not overridden inline */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items:start;
}
.form-grid > label{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  font-weight:500;
}
.form-grid .input,
.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%;
}
.form-grid .actions{
  grid-column:1 / -1;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-start;
}


.group-box + .group-box{ margin-top:1.25rem }

/* Spacing inside group boxes so inputs/buttons don't stick to the table */
.group-box .form-grid{ margin-bottom: .9rem; }
.group-box .table-responsive{ margin-top: .25rem; }


/* ---- Taller: quitar borde negro de los group-box ---- */
fieldset.group-box{ border:0; padding: .25rem 1rem 1rem; margin: .5rem 0 1rem; }
fieldset.group-box > legend{ border:0; padding:0 .25rem; font-weight:600; }



/* --- Alineación homogénea de fieldsets/legends --- */
fieldset.group-box{ padding: .6rem 1rem 1rem; margin: .5rem 0 1rem; }
fieldset.group-box > legend{ margin-left: .25rem; font-weight:600; }

/* Elegant group-box styling */
fieldset.group-box{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 18px;
  margin: 10px 0 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
fieldset.group-box > legend{
  padding: 0 .4rem;
  font-weight: 600;
  color: var(--text);
}
/* align all legends visually */
fieldset.group-box > legend::after{
  content: "";
}

/* === Certificados UI helpers === */
.grid{display:grid; gap:12px;}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid-6{grid-template-columns:repeat(6,minmax(0,1fr));}
.table-responsive{overflow:auto}
.form-actions{display:flex; gap:8px; justify-content:flex-end; padding:12px 0;}
.header-actions{margin-left:auto}
.page-header{display:flex; align-items:center; gap:12px}
.page-header .breadcrumb{margin-left:8px}
.w-100{width:100%}
.btn-small{font-size:.85rem; padding:4px 8px}

/* --- Certificado: Group boxes & tones --- */
.card { border:1px solid #e0e6ef; border-radius:8px; margin:16px 0; background:#fff; }
.card-header { padding:10px 14px; font-weight:600; border-bottom:1px solid #eaeef5;}
.card-body { padding:14px; }
.card.tone-1 { background:#fbfdff; }
.card.tone-2 { background:#f9fcfb; }
.card.tone-3 { background:#fffafc; }
.card.tone-4 { background:#fcfffa; }
.grid { display:grid; gap:10px; }
.grid-6 { grid-template-columns: repeat(6, minmax(120px,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(120px,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(120px,1fr)); }
.w-100 { width:100%; }

/* switches (toggle) */
.switch {
  position: relative; display:inline-block; width:44px; height:22px; vertical-align:middle;
}
.switch input { display:none; }
.slider {
  position:absolute; cursor:pointer; inset:0; background:#ccc; transition:.2s; border-radius:20px;
}
.slider:before {
  position:absolute; content:""; height:18px; width:18px; left:2px; top:2px; background:white; transition:.2s; border-radius:50%;
}
input:checked + .slider { background:#3b82f6; }
input:checked + .slider:before { transform: translateX(22px); }

/* dropzone */
.dropzone {
  border:2px dashed #c7d2fe; background:#f8fafc; padding:22px; border-radius:8px;
  text-align:center; color:#64748b;
}
.dropzone.dragover { background:#eef2ff; border-color:#6366f1; }
.file-list { margin-top:12px; }
.file-list table { width:100%; border-collapse:collapse; }
.file-list th, .file-list td { border-bottom:1px solid #eee; padding:8px; font-size:12px; }
.btn-icon { border:0; background:transparent; cursor:pointer; padding:2px 6px; }
.btn-sm { padding:6px 10px; border-radius:6px; }
.btn-primary { background:#2563eb; color:white; border:0; }
.btn-secondary { background:#6b7280; color:white; border:0; }
.btn { display:inline-block; padding:8px 14px; border-radius:6px; text-decoration:none; }
.badge { display:inline-block; padding:2px 6px; background:#e5e7eb; border-radius:10px; font-size:11px; }


/* ===== Elegant Theme Upgrade (Bandeja & general) ===== */
:root{
  --brand-1: #5b6cff;
  --brand-2: #6cc2ff;
  --brand-3: #3a8dff;
  --bg-soft: #f7f9fc;
  --card-radius: 16px;
  --shadow-sm: 0 4px 12px rgba(16,24,40,.06);
  --shadow-md: 0 8px 24px rgba(16,24,40,.08);
}
.topbar{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-3));
  box-shadow: var(--shadow-sm);
}
.sidebar{
  border-right: 1px solid var(--border);
  background: #ffffff;
}
.content{
  background: var(--bg-soft);
}
.card{
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header{
  background: linear-gradient(135deg,#ffffff,#f3f6ff);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  letter-spacing:.2px;
}
.card .card-body{
  background: #fff;
}
.page-header h1{
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing:.3px;
}
.page-header .breadcrumb a{ color: var(--muted); }
.page-header .header-actions .btn-primary{
  background: linear-gradient(135deg, var(--brand-3), var(--brand-1));
  border: none;
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.page-header .header-actions .btn-primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.grid.grid-3{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:14px }
.grid.grid-2{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:14px }
@media (max-width: 1024px){
  .grid.grid-3{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px){
  .grid.grid-3,.grid.grid-2{ grid-template-columns: 1fr; }
}

label{ font-size:.9rem; color:#475467; margin-bottom:6px; display:block; }
input[type="text"], input[type="date"], select{
  width:100%; padding:.6rem .75rem; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  transition: box-shadow .2s ease, border-color .2s ease, transform .04s ease;
}
input[type="text"]:focus, input[type="date"]:focus, select:focus{
  outline: none;
  border-color: var(--brand-3);
  box-shadow: 0 0 0 4px rgba(58,141,255,.12);
}
.btn{
  border-radius: 12px;
}
.btn-primary{
  background: linear-gradient(135deg, var(--brand-3), var(--brand-1)) !important;
  color:#fff !important; border:none !important;
  box-shadow: var(--shadow-sm);
}
.btn-secondary{
  background:#eef2ff; color:#344054; border:1px solid #dfe4ff;
}
.table{
  width:100%; border-collapse: separate; border-spacing:0;
  background:#fff; border-radius: 12px; overflow:hidden; box-shadow: var(--shadow-sm);
}
.table thead th{
  position: sticky; top:0; z-index:1;
  background:#f6f8ff; color:#344054; font-weight:700;
  border-bottom:1px solid var(--border);
}
.table tbody tr{
  border-bottom:1px solid var(--border);
}
.table tbody tr:hover{
  background:#f7fbff;
}
.table td, .table th{
  padding: .75rem .9rem; text-align:left;
}
.badge{
  display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.8rem;
  font-weight:700;
}
.badge-success{ background:#e8fff3; color:#0f8b5f; border:1px solid #bbf0d9; }
.badge-warning{ background:#fff7e8; color:#9a6b00; border:1px solid #ffe1a6; }

/* visual highlight of new record */
.highlight-new{ outline:2px solid var(--brand-3); background:#eef6ff; }


/* === UI: Bandeja de Solicitudes (elegante) === */
.card-header{ display:flex; align-items:center; justify-content:space-between; }
.card-header .btns a + a{ margin-left:.35rem; }

/* Make the filters compact, aligned and responsive */
.bandeja-filtros{ align-items:end; gap:.75rem 1rem; }
.bandeja-filtros label{ font-size:.9rem; color:#475569; }
.bandeja-filtros input,
.bandeja-filtros select{ height:40px; border-radius:.6rem; }
.bandeja-filtros input[type="date"]{ padding:.45rem .75rem; }

@media (max-width: 992px){
  .bandeja-filtros{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 576px){
  .bandeja-filtros{ grid-template-columns: 1fr; }
}


/* === Patch 2: Bandeja filtros (alineación impecable) === */
.bandeja-filtros > div{
  display:flex;
  flex-direction:column;
  gap:.30rem;
}
.bandeja-filtros label{
  line-height:1.1;
  letter-spacing:.2px;
  font-weight:600;
  color:#334155;
}
.bandeja-filtros input[type="text"],
.bandeja-filtros input[type="date"],
.bandeja-filtros select{
  width:100%;
  height:42px;
  padding:.55rem .8rem;
  border:1px solid var(--border);
  border-radius:.65rem;
  background:#f8fafc;
  color:#0f172a;
  outline:0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bandeja-filtros input[type="text"]::placeholder{ color:#94a3b8; }
.bandeja-filtros input[type="text"]:focus,
.bandeja-filtros input[type="date"]:focus,
.bandeja-filtros select:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
  background:#fff;
}
.bandeja-filtros .actions{
  margin-top:.25rem;
  display:flex;
  gap:.5rem;
  grid-column: 1 / -1; /* ocupa todo el ancho */
}
.bandeja-filtros .btn{ height:42px; padding:.55rem 1rem; border-radius:.6rem; }


/* --- Ensure .input styles also apply to select.input --- */
select.input{ 
  width:100%; padding:.7rem .85rem; border:1px solid var(--border); border-radius:.6rem; outline:0;
  background:#f6f8fb;
}
select.input:focus{ border-color:#94b7ff; background:#fff; }


/* --- Global uniform inputs (extra types) --- */
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"]{
  width:100%; padding:.6rem .75rem; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:#0f172a;
  transition: box-shadow .2s ease, border-color .2s ease, transform .04s ease;
  height: 42px;
}
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus{
  outline: none;
  border-color: var(--brand-3);
  box-shadow: 0 0 0 4px rgba(58,141,255,.12);
}


/* ===== Formulario elegante (aislado) ===== */
.form-elegante > div > label{
  display:block;
  margin-bottom:.35rem;
  font-weight:600;
  color:#475467;
  line-height:1.1;
}

.form-elegante input[type="text"],
.form-elegante input[type="date"],
.form-elegante input[type="number"],
.form-elegante input[type="email"],
.form-elegante input[type="tel"],
.form-elegante input[type="search"],
.form-elegante select{
  width:100%;
  height:42px;
  padding:.55rem .8rem;
  border:1px solid var(--border);
  border-radius:.65rem;
  background:#f8fafc;
  color:#0f172a;
  outline:0;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.form-elegante input[type="text"]::placeholder,
.form-elegante input[type="search"]::placeholder{ color:#94a3b8; }

.form-elegante input[type="text"]:focus,
.form-elegante input[type="date"]:focus,
.form-elegante input[type="number"]:focus,
.form-elegante input[type="email"]:focus,
.form-elegante input[type="tel"]:focus,
.form-elegante input[type="search"]:focus,
.form-elegante select:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
  background:#fff;
}

.form-elegante .actions{
  grid-column:1 / -1;
  display:flex;
  gap:.5rem;
  margin-top:.25rem;
}
.form-elegante .btn{ height:42px; padding:.55rem 1rem; border-radius:.6rem; }


/* ===== v8: Form-elegante (alta especificidad + responsive) ===== */
.form-elegante{ gap: .75rem 1rem; align-items: end; }
.form-elegante > div{ display:flex; flex-direction:column; gap:.35rem; }

.form-elegante > div > label{
  font-weight:600; color:#334155; letter-spacing:.2px; line-height:1.1;
}

.form-elegante input[type="text"],
.form-elegante input[type="date"],
.form-elegante input[type="number"],
.form-elegante input[type="email"],
.form-elegante input[type="tel"],
.form-elegante input[type="search"],
.form-elegante select{
  width:100% !important;
  height:44px !important;
  padding:.6rem .85rem !important;
  border:1px solid var(--border) !important;
  border-radius:.65rem !important;
  background:#ffffff !important;
  color:#0f172a !important;
  outline:0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  font-size:14px !important;
}

.form-elegante input[type="text"]:focus,
.form-elegante input[type="date"]:focus,
.form-elegante input[type="number"]:focus,
.form-elegante input[type="email"]:focus,
.form-elegante input[type="tel"]:focus,
.form-elegante input[type="search"]:focus,
.form-elegante select:focus{
  border-color:#2563eb !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.18) !important;
  background:#fff !important;
}

.form-elegante .actions{ grid-column:1 / -1; display:flex; gap:.6rem; }
.form-elegante .actions .btn{ height:44px !important; padding:.6rem 1rem !important; border-radius:.6rem !important; }

/* Calendario del date input más visible */
.form-elegante input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.75; }

/* Responsive columnas */
@media (max-width: 992px){
  .form-elegante{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 576px){
  .form-elegante{ grid-template-columns: 1fr !important; }
}