/* Estilos compartidos inspirados en summit-urooncologia.cl
   Paleta: fondo oscuro púrpura, acento dorado, textos en lavanda/crema.
*/
:root{
  --bg-1: #27282E;
  --bg-2: #181E40;
  --panel: rgba(39,40,46,0.96);
  --muted: #EAEAEA;
  --highlight: #E0741A;
  --accent-dark: #181E40;
  --accent-deep: #27282E;
  --card-shadow: 0 18px 48px rgba(0,0,0,0.55);
}
*{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:#e6f3ff;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(--highlight)}
.main-nav a:hover{color:var(--highlight);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(--highlight);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(124,167,255,0.22);background:rgba(9,19,48,0.92);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(124,167,255,0.95) !important;
  box-shadow: 0 0 0 1px rgba(124,167,255,0.28) !important;
  background-color: rgba(11,20,47,0.92) !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='%237ca7ff'><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(124,167,255,0.28) !important;
}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:800;cursor:pointer;border:none}
.btn-primary{background:linear-gradient(90deg,#E0741A,#C85B16);color:#ffffff;box-shadow:0 12px 28px rgba(224,116,26,0.28)}
.btn-secondary{background:rgba(24,30,64,0.92);border:1px solid rgba(224,116,26,0.24);color:var(--muted)}
/* Info / messages */
#infoMessage{display:none;padding:12px;border-radius:8px;background:rgba(64,103,205,0.12);border-left:4px solid rgba(124,167,255,0.95);color:var(--muted)}
#message.success{background:rgba(33,64,132,0.88);color:#dbe8ff;display:block}
#message.error{background:rgba(36,67,140,0.92);color:#dbe8ff;display:block}
/* Downloads */
.downloads-section{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.download-btn{padding:10px 16px;border-radius:12px;border:1px solid rgba(124,167,255,0.22);color:#dbe8ff;text-decoration:none;font-weight:700;background:rgba(12,22,56,0.94)}
.download-btn:hover{box-shadow:0 12px 30px rgba(64,103,205,0.22);transform:translateY(-3px);background:rgba(28,48,92,0.98)}
/* Table styles for programa */
.table-wrapper{overflow-x:auto}
table{width:100%;border-collapse:collapse}
.date-header td { background: linear-gradient(90deg, rgba(24,30,64,0.35), rgba(39,40,46,0.35)); color: var(--muted); font-weight:800; }
.separator td { background: transparent; color: rgba(234,234,234,0.72); font-weight:700; }

/* Tabla: colores oscuros y enlaces naranja */
th{background:transparent;color:var(--highlight);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)}

/* Enlaces dentro de la tabla deben mostrarse en naranja oficial */
.table-wrapper a, .table-wrapper a:link, .table-wrapper a:visited, .table-wrapper td a, .table-wrapper th a {
  color: var(--highlight) !important;
  font-weight: 700;
  text-decoration: none;
}
.table-wrapper a:hover, .table-wrapper a:focus, .table-wrapper td a:hover, .table-wrapper th a:hover {
  color: #C85B16 !important;
  text-decoration: underline;
}

.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(224,116,26,0.18); color: #fff; font-weight:700; }
.btn-download{padding:8px 12px;border-radius:8px;background:linear-gradient(90deg,#E0741A,#C85B16);color:#ffffff;text-decoration:none;display:inline-block}
/* Asegurar que el enlace 'Descargar' dentro de tablas mantenga texto blanco aunque existan reglas generales para enlaces */
.table-wrapper a.btn-download, .table-wrapper .btn-download {
  color: #ffffff !important;
}
.table-wrapper a.btn-download:hover, .table-wrapper .btn-download:hover {
  color: #ffffff !important;
}
/* 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:#dbe8ff;background:linear-gradient(90deg,#1b3f87,#0c1f4d);box-shadow:0 12px 30px rgba(0,0,0,0.35)}
#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(24,30,64,0.92); border-radius: 10px; border: 1px solid rgba(224,116,26,0.16); 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,#E0741A,#C85B16); color:#ffffff; 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(224,116,26,0.18); color: #fff; font-weight:700; }

.date-header td { background: linear-gradient(90deg, rgba(24,30,64,0.35), rgba(39,40,46,0.35)); color: var(--muted); font-weight:800; }
.separator td { background: transparent; color: rgba(234,234,234,0.72); 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;
}