/* Estilos compartidos inspirados en summit-urooncologia.cl
   Paleta: fondo oscuro púrpura, acento dorado, textos en lavanda/crema.
*/
:root{
  --bg-1: #0b0810;
  --bg-2: #120718;
  --panel: rgba(11,7,16,0.86);
  --muted: #d6cbe2;
  --gold: #e6c24a;
  --accent-dark: #35153a;
  --accent-deep: #140617;
  --card-shadow: 0 18px 48px rgba(6,4,10,0.6);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg-1)100%);color:var(--muted);-webkit-font-smoothing:antialiased}
.container{width:100%;max-width:1200px;margin:24px auto;background:var(--panel);border-radius:14px;box-shadow:var(--card-shadow);overflow:hidden}
/* Header / hero */
.header{position:relative;padding:8px 0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:transparent}
.header-inner{max-width:760px;margin:0 auto;width:100%;padding:10px 18px;background:linear-gradient(90deg,var(--accent-dark) 0%,var(--accent-deep) 100%);border-radius:12px 12px 0 0}
.header .topbar{width:100%;display:flex;align-items:center;justify-content:flex-end}
.header-logo{display:flex;align-items:center;gap:12px}
.header-logo{display:flex;align-items:center;gap:12px;margin-right:12px}
.header-logo img{width:80px;height:80px;object-fit:contain;border-radius:8px}
.header h1{margin:0;font-size:20px;font-weight:800;color:var(--gold);letter-spacing:0.6px}
.header .subtitle{color:var(--muted);margin-top:4px;font-size:12px}
/* Navigation */
.main-nav{margin-top:14px;display:flex;gap:24px;align-items:center;justify-content:center}
.main-nav a{color:var(--muted);text-decoration:none;font-weight:600;padding:10px 6px;border-radius:6px;transition:all .18s}
.main-nav a.active{color:var(--gold)}
.main-nav a:hover{color:var(--gold);transform:translateY(-3px)}
/* Layout */
.content{padding:28px}
.form-card{max-width:760px;margin:0 auto}
.header-inner{max-width:760px;margin:0 auto;width:100%}
.header .topbar{max-width:100%}
.form-group{margin-bottom:18px}
label{display:block;font-weight:700;color:var(--gold);font-size:12px;text-transform:uppercase;margin-bottom:8px}
input[type="text"],select,input[type="file"]{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--muted);font-size:15px}
select option, select optgroup { background: linear-gradient(180deg,var(--bg-2),var(--bg-1)); color: var(--muted); }
/* Force native dropdown to use dark styles where possible */
select { color: var(--muted); background-image: none; }

/* Make form selects more visible inside the centered card */
.form-card select, .form-card input[type="file"] {
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.02) !important;
  color: var(--muted) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.form-card select option, .form-card select optgroup { background: var(--accent-deep) !important; color: var(--muted) !important; }

/* Fuerza un borde visible y apariencia consistente en Chrome (Windows) */
.form-card select,
.container select,
.filter-section select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid rgba(230,194,74,0.95) !important;
  box-shadow: 0 0 0 1px rgba(230,194,74,0.95) !important;
  background-color: rgba(20,6,23,0.9) !important;
  color: var(--muted) !important;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23e6c24a'><path d='M7 10l5 5 5-5z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
}

select::-ms-expand { display: none; }

.form-card select:focus, .container select:focus, .filter-section select:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(230,194,74,0.18) !important;
}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:800;cursor:pointer;border:none}
.btn-primary{background:linear-gradient(90deg,var(--gold),#d9b63a);color:#140617;box-shadow:0 12px 30px rgba(230,194,74,0.12)}
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
/* Info / messages */
#infoMessage{display:none;padding:12px;border-radius:8px;background:rgba(230,194,74,0.06);border-left:4px solid var(--gold);color:var(--muted)}
#message.success{background:rgba(14,69,61,0.08);color:#a6f0df;display:block}
#message.error{background:rgba(198,40,40,0.08);color:#ffb5b5;display:block}
/* Downloads */
.downloads-section{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.download-btn{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);color:var(--gold);text-decoration:none;font-weight:700;background:transparent}
.download-btn:hover{box-shadow:0 12px 30px rgba(230,194,74,0.06);transform:translateY(-3px)}
/* Table styles for programa */
.table-wrapper{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{background:transparent;color:var(--gold);padding:12px 14px;text-align:left;font-weight:800;font-size:13px}
td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.03);color:var(--muted)}
tr:hover td{background:rgba(255,255,255,0.02)}
.btn-download{padding:8px 12px;border-radius:8px;background:linear-gradient(90deg,var(--gold),#d9b63a);color:#140617;text-decoration:none;display:inline-block}
/* Scroll to top */
#scrollToTop{position:fixed;right:28px;bottom:28px;width:48px;height:48px;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:20px;color:var(--gold);background:linear-gradient(90deg,var(--accent-dark),var(--accent-deep));box-shadow:0 12px 30px rgba(6,4,10,0.6)}
#scrollToTop.show{display:flex}
/* Responsivo */
@media (max-width:900px){.header h1{font-size:20px}.header-logo img{width:52px;height:52px}.main-nav{gap:12px;flex-wrap:wrap}.container{margin:12px}.content{padding:18px}.btn{width:100%}}

/* Ajustes para móvil: mantener el header alineado al formulario y margen del logo */
@media (max-width:720px) {
  .header{padding:6px 0}
  .header-inner{max-width:100%;margin:0 12px;padding:8px 12px;border-radius:10px}
  .header .topbar{justify-content:flex-end}
  .header-logo{margin-right:12px}
  .header-logo img{width:56px;height:56px}
  .header h1{font-size:18px}
  .content{padding:16px}
}

/* Reglas específicas para la página programa.php (consolidadas) */
.filter-section { margin-bottom: 20px; padding: 18px; background: rgba(255,255,255,0.02); border-radius: 10px; border: 1px solid rgba(255,255,255,0.04); color: var(--muted); }
.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.filter-group label { font-weight:600; text-transform:uppercase; font-size:12px; color:var(--muted); margin-bottom:8px; }
.btn-search { background: linear-gradient(90deg,var(--accent-dark),var(--accent-deep)); color:var(--gold); border:none; padding:10px 20px; border-radius:8px; font-weight:700; cursor:pointer; }
.btn-search:hover { transform: translateY(-2px); }

/* Alternado de filas en la tabla del programa */
.table-wrapper table tbody tr.data-row:nth-child(even) td { background: rgba(53,21,58,0.48); }
.table-wrapper table tbody tr.data-row:nth-child(odd) td { background: rgba(11,7,16,0.14); }
.table-wrapper table tbody tr.data-row:hover td { background: rgba(230,194,74,0.10); color: #fff; font-weight:700; }

.date-header td { background: linear-gradient(90deg, rgba(53,21,58,0.35), rgba(26,8,32,0.35)); color: var(--gold); font-weight:800; }
.separator td { background: transparent; color: rgba(214,203,226,0.7); font-weight:700; }

@media (max-width:800px){
  .filter-row { grid-template-columns: 1fr; }
}

/* Evitar que la columna Fecha se divida en varias líneas */
.table-wrapper table td:first-child,
.table-wrapper table th:first-child {
  white-space: nowrap;
  vertical-align: middle;
}