:root{
  --header-h:110px;
  --header-bg-light:#f6f8fb;
  --header-bg-dark:#0c1117;
}

.top-bar{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 10px 20px; box-sizing: border-box;
  z-index: 10000;
  font-size: 1.5em;
  background: transparent;
  isolation: isolate;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.top-bar::before,
.top-bar::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(600px 300px at 12% -40%, rgba(24,82,157,.18), transparent 60%),
    radial-gradient(520px 280px at 88% 25%, rgba(40,173,86,.18), transparent 55%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}




.top-bar::before{
  background: var(--header-bg-light);
  z-index: 0;
}

.top-bar::after{
  background-color: rgba(167,167,167,.39);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  z-index: 1;
}

.top-bar > *{
  position: relative;
  z-index: 2;
}

.company-logo{
  max-height: calc(var(--header-h) - 20px);
  height: auto;
  margin-right: 15px;
  transition: transform .3s ease;
}
.company-logo:hover{ transform: scale(1.05); cursor: pointer; }


.header-tools {
  display: flex;
  align-items: center;
  z-index: 10;
  margin-left: auto;
  position: relative; 
}


.search-input {
  margin-left: auto;
  padding: 8px 40px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: .5em;
  color: #333;
  min-width: 250px;
  background-color: rgba(255,255,255,.678);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

.show-button,
.Clear {
  background-color: rgba(255,255,255,.678);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  color: #666;
  font-weight: normal;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: .8em;
  margin-left: 10px;
  font-family: Gill Sans, Segoe UI, Arial;
  transition: background-color .3s;
}
.show-button { background-color: #e4e4e4; }
.show-button:hover { background-color: #28AD56; color: #fff; }
.Clear:hover {
  background: linear-gradient(135deg, #f34040de, #f34040bd);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0,0,0,.1),
        0 0 1px rgba(255,255,255,.5) inset,
        0 0 1px rgba(0,0,0,.2) inset;
  color: #fff;
}


.isolation-wrapper {
    isolation: isolate; 
    position: relative;
}



.dropdown {
    position: relative; 
    margin-left: 10px;
    z-index: 15;
    z-index: 1000;
}


.dropdown .icon-btn {
    background-color: rgba(255,255,255,.678);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
    color: #666;
    border: none;
    border-radius: 5px;
    padding: 6px 12px;
    font-weight: normal;
    font-size: 0.8em;
    cursor: pointer;
    line-height: 1;
    font-family: Gill Sans, Segoe UI, Arial;
  transition: background-color .3s;
    width: 40px;
    height: 35px; 
}

.dropdown .icon-btn:hover {
    background: linear-gradient(135deg, #18529de5, #18529d9a); 
    color: #fff;
}


.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    isolation: isolate;   
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2));   
    -webkit-backdrop-filter: blur(12px); 
    backdrop-filter: blur(12px);    
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);    
    border-radius: 6px;
    z-index: 10001;
    max-height: 400px; 
    overflow-y: auto;
    min-width: 200px;
    display: none;
}

.dropdown-menu a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    font-weight: normal;
    font-size: 0.8em;
    font-family: Gill Sans, Segoe UI, Arial;
}

.dropdown-menu a:hover {
    background-color: #f5f7fa;
}

.dropdown-menu.show {
    display: block;
}
body {
  font-family: Gill Sans, Segoe UI, Arial;
  background-color: #f5f7fa;
  margin: 0;
  padding: 20px;
  color: #333;
  align-items: center;
  padding-bottom: 100px;
  min-height: 100vh;
  /* --- CORRECCIÓN 1: Añadido --- */
  padding-top: var(--header-h); 
  box-sizing: border-box;
}

.left-column {
  position: fixed;
  top: 110px; left: 0;
  /* --- CORRECCIÓN: Ajustada la altura --- */
  height: calc(100vh - var(--header-h) - 35px); /* 35px por el footer */
  width: 500px;
  z-index: 999;
  padding: 10px;
  background-color: rgba(223,223,223,.5);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  overflow-y: auto;
  transition: background-color .1s;
  font-size: .9em;
}

/* --- CORRECCIÓN 2: Ajustado margin-top --- */
.right-column { margin-top: 0; margin-left: 520px; }
.container { display: block; padding: 0; gap: 0; }

.config {
  display: grid;
  grid-template-columns: minmax(auto, 1fr) auto;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.config h2 { flex: 1 1 33.33%; }

h1 { color: #454545; margin-bottom: 25px; font-family: Gill Sans, Segoe UI, Arial; font-weight: normal; font-size: 1.5em; }
h2 { color: #666; text-align: center; margin-bottom: 25px; font-family: Gill Sans, Segoe UI, Arial; font-weight: normal; font-size: 1.5em; }

.button-group {
  display: flex;
  gap: 20px;
  width: 100%;
  /* --- CORRECCIÓN 2: Ajustado margin-top --- */
  margin-top: 20px; 
  margin-bottom: 50px;
}
.btn {
  flex: 1;
  min-width: 80px;
  padding: 18px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: Gill Sans, Segoe UI, Arial;
  font-weight: normal;
  text-align: center;
  font-size: 1.2em;
  transition: background-color .3s, color .3s;
  text-decoration: none;
}
.altas-btn, .bajas-btn, .modificar-btn {
  background: linear-gradient(135deg, #e4e4e4b2, #e4e4e40e);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0,0,0,.1),
        0 0 1px rgba(255,255,255,.5) inset,
        0 0 1px rgba(0,0,0,.2) inset;
  color: #666;
}
.altas-btn:hover { background: linear-gradient(135deg, #28ad56de, #28ad569a); color: #fff; }
.bajas-btn:hover { background: linear-gradient(135deg, #f34040de, #f34040bd); color: #fff; }
.modificar-btn:hover { background: linear-gradient(135deg, #18529de5, #18529d9a); color: #fff; }

footer {
  position: fixed; bottom: 0; left: 0; width: 100%;
  background-color: #18529D; color: #fff; padding: 5px;
  font-size: .9rem; display: flex; justify-content: space-between; align-items: center; z-index: 1000;
}
footer p { margin: 0; flex-grow: 1; text-align: center; }

.back-to-top {
  position: fixed; bottom: 50px; right: 20px; z-index: 1000;
  background: linear-gradient(135deg, #18529de5, #18529d9a);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0,0,0,.1),
        0 0 1px rgba(255,255,255,.5) inset,
        0 0 1px rgba(0,0,0,.2) inset;
  color: #fff;
  padding: 10px;
  text-decoration: none; font-weight: bold; font-size: 1.9rem;
  transition: background-color .3s; width: 30px; height: 30px;
  border-radius: 50%; display: flex; justify-content: center; align-items: center;
}
.back-to-top:hover { background-color: #18529d; box-shadow: 0 6px 12px rgba(0,0,0,.4); transform: translateY(-1px); }

.perfil {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 20px 22px;
  max-width: 900px;
  margin: 12px auto;
  color: #0f172a;
}
.perfil::before { content: none !important; }
.left-column > h2,
.right-column .h2-group h2 { text-align: left; margin: 0 0 10px; color: #0f172a; letter-spacing: .2px; }

.perfil .dato {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 6px 16px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(2,6,23,.08);
}
.perfil .dato:last-child { border-bottom: none; }


.perfil .dato > span:first-child {
  grid-column: 1;
  font-size: 12px;
  font-weight: 700;
  color: #355d9a;
  text-transform: uppercase;
  letter-spacing: .6px;
  opacity: .95;
}


.perfil .dato > span:not(:first-child),
.perfil .dato p,
.perfil .dato > div,
.perfil .dato > a {
  grid-column: 2;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #0b1220;
  text-transform: none; 
}

.perfil .dato-full-span { grid-template-columns: 1fr; }
.perfil .dato-full-span > span { grid-column: 1; }
.perfil .dato-full-span > *:not(span) { grid-column: 1; }
.perfil * { text-align: left; }

.lista-programas {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 6px 0 0 0; list-style: none;
}
.lista-programas li {
  padding: 6px 10px; border: 1px solid rgba(53,93,154,.25); border-radius: 999px; font-size: 13px; background: rgba(53,93,154,.06);
}

#antiguedad-php {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #eef4ff; border: 1px solid rgba(53,93,154,.28);
  font-size: 12px; font-weight: 700; color: #355d9a;
  text-transform: none;
}


.contacto {
  display: block;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  margin: 12px auto 30px;
  max-width: 900px;
}
.contacto * { text-align: left !important; }
.left-column > h2 + .contacto,
.left-column > h2 { text-align: left !important; }

.contacto .dato,
.contacto-content .dato {
  display: grid !important;
  grid-template-columns: 220px 1fr;
  gap: 6px 16px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(2,6,23,.08);
}
.contacto .dato:last-child,
.contacto-content .dato:last-child { border-bottom: none; }


.contacto .dato > span:first-child,
.contacto-content .dato > span:first-child {
  grid-column: 1;
  font-size: 12px;
  font-weight: 700;
  color: #355d9a;
  text-transform: uppercase;
  letter-spacing: .6px;
}


.contacto .dato > span:not(:first-child),
.contacto .dato p,
.contacto .dato > div,
.contacto .dato > a,
.contacto-content .dato > span:not(:first-child) {
  grid-column: 2;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #0b1220;
  text-transform: none;
}

.contacto .dato-full-span { grid-template-columns: 1fr !important; }
.contacto .dato-full-span > span { grid-column: 1; }
.contacto .dato-full-span > *:not(span) { grid-column: 1; }


.panel {
  background: #fff; border-radius: 12px; padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08); overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; text-align: left; }
thead { background: #18529D; color: #fff; }
th, td { padding: 12px 15px; text-align: center; }
tr:nth-child(even) { background: #f9f9f9; }

.estado {
  all: unset; display: inline-block; padding: 5px 10px; border-radius: 20px;
  font-size: .8rem; font-weight: bold; color: #fff; transition: transform .2s, box-shadow .2s;
}
.pendiente { background: #fff3cd; color: #856404; }
.finalizado { background: #d4edda; color: #155724; }



.search-wrapper{ position:relative; display:inline-block;z-index:10002; }

#searchResults{
  position: fixed;
  top: 88px;
  right: 20px;
  width: 360px;
  display: none;
  padding: 8px 8px 8px;
  padding-top:52px;  
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(18px) saturate(160%) contrast(105%);
  backdrop-filter: blur(18px) saturate(160%) contrast(105%);
  border: 1px solid rgba(255,255,255,.35);
  background-clip: padding-box;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  z-index: 10002;
  max-height: 400px;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: dropdownIn .18s ease-out both;
}
#searchResults.visible{ display:block; transform-origin:100% 0%; }



#searchResults::before{
  content:"Resultados";
  position:absolute; inset:8px 8px auto 8px; height:36px;
  display:flex; align-items:center; gap:8px; padding:0 12px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(24,82,157,.12), rgba(40,173,86,.12));
  border:1px solid rgba(255,255,255,.35);
  font-size:.8rem; font-weight:700; letter-spacing:.3px; color:#18529D;
}

#searchResults ul{ list-style:none; padding:0; margin:0; }

#searchResults li{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border-radius:10px;
  font-size:.95rem; line-height:1.25rem; color:#0b1220;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(24,82,157,.08);
  box-shadow:0 1px 0 rgba(24,82,157,.04) inset;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor:pointer;
}
#searchResults li+li{ margin-top:8px; }

#searchResults li:hover{
  background:linear-gradient(135deg, rgba(24,82,157,.18), rgba(40,173,86,.18));
  border-color:rgba(24,82,157,.25);
  box-shadow:0 6px 18px rgba(24,82,157,.18);
  transform:translateY(-1px);
}
#searchResults li:active{ transform:translateY(0); box-shadow:none; }

#searchResults li::after{
  content:"#"<<attr(data-id)>>;
  margin-left:auto;
  font-weight:700; font-size:.75rem;
  padding:4px 8px;
  border-radius:999px;
  color:#18529D;
  background:rgba(24,82,157,.12);
  border:1px solid rgba(24,82,157,.25);
}

#searchResults p{
  margin:0; padding:14px;
  border-radius:10px;
  font-size:.9rem; color:#BD0000;
  background:rgba(255,255,255,.5);
  border:1px dashed rgba(0,0,0,.06);
}

#searchResults::-webkit-scrollbar{ width:10px; }
#searchResults::-webkit-scrollbar-track{ background:transparent; }
#searchResults::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(24,82,157,.45), rgba(40,173,86,.45));
  border-radius:8px; border:2px solid transparent; background-clip:padding-box;
}

@keyframes dropdownIn{
  from{ opacity:0; transform:translateY(-4px) scale(.98); }
  to  { opacity:1; transform:translateY(0)   scale(1); }
}









#contacto-form-section {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  background: #fff; border-radius: 12px; padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08); margin-top: 20px;
}
.Documentacion-btn { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.add-btn {
  background: linear-gradient(135deg, #18529de5, #18529d9a);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0,0,0,.1),
        0 0 1px rgba(255,255,255,.5) inset,
        0 0 1px rgba(0,0,0,.2) inset;
  color: #fff; border: none; font-size: 1.9rem; font-weight: bold; cursor: pointer;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; justify-content: center; align-items: center; transition: background-color .3s;
}
.add-btn:hover { background-color: #18529D; box-shadow: 0 6px 12px rgba(0,0,0,.4); transform: translateY(-1px); }


.h2-group { display: flex; align-items: center; gap: 15px; }

.modal {
  display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%;
  overflow: auto; background-color: rgba(0,0,0,.6);
  justify-content: center; align-items: center; color: #000; text-align: center;
}
.modal-content {
  background-color: rgba(255,255,255,.432);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  padding: 30px; border-radius: 10px; width: 90%; max-width: 500px; position: relative;
  animation-name: animatetop; animation-duration: .4s;
}
@keyframes animatetop { from { top: -300px; opacity: 0 } to { top: 0; opacity: 1 } }
.close-btn {
  color: #5a5a5a; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 15px; cursor: pointer;
}
.close-btn:hover, .close-btn:focus { color: #000; text-decoration: none; }

.form-group { margin-bottom: 15px; }
.form-group label {
  display: block; margin-bottom: 5px; font-weight: bold; color: #242424;
  font-family: Gill Sans, Segoe UI, Arial; text-align: left;
}
.form-group select, .form-group input, .form-group textarea, .form-group input[type="file"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%; padding: 8px; border: 1px solid #cccccc00; border-radius: 4px; box-sizing: border-box;
  background-color: rgba(255,255,255,.027);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1); resize: none;
}
.submit-btn {
  width: 100%; padding: 10px;
  background: linear-gradient(135deg, #18529de5, #18529d9a);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0,0,0,.1),
        0 0 1px rgba(255,255,255,.5) inset,
        0 0 1px rgba(0,0,0,.2) inset;
  color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color .3s;
}
.submit-btn:hover { background-color: #18529D; box-shadow: 0 6px 12px rgba(0,0,0,.4); }

.form-container {
  max-width: 800px; margin: 2em auto; background-color: rgba(255,255,255,.432);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1); padding: 2em 3em; border-radius: 12px;
  margin-top: 130px; padding-bottom: 80px;
}
.form-header h2 { color: #18529D; margin-bottom: .5em; font-size: 2em; font-weight: normal; }
.form-header p { color: #666; margin-top: 0; }

fieldset,
#contacto-form-section {
  border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5em; margin-bottom: 2em;
  background-color: rgba(22,22,22,.014);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
legend { font-weight: bold; color: #18529D; padding: 0 .5em; font-size: 1.2em; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5em; }
.form-field { display: flex; flex-direction: column; }
.form-field span { font-size: .9em; color: #555; margin-bottom: .5em; }
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="date"] {
  padding: 12px 15px; border: 1px solid #cccccc00; border-radius: 6px; font-size: 1em; color: #333;
  transition: border-color .3s, box-shadow .3s;
  background-color: rgba(255,255,255,.027);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.form-field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: rgba(255,255,255,.027);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  border: 1px solid #cccccc00; border-radius: 6px; font-size: 1em; color: #333;
  transition: border-color .3s, box-shadow .3s; padding: 13px; width: 100%; box-sizing: border-box;
  max-height: 150px; overflow-y: auto; padding-right: 30px;
}
.select-wrapper { position: relative; width: 100%; }
.select-wrapper::after {
  content: '▼'; font-family: Arial, sans-serif; font-size: .7em; color: #333;
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 2;
}
.form-field select:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0,123,255,.25); }
.form-field input:focus { outline: none; border-color: #18529D; box-shadow: 0 0 0 3px rgba(24,82,157,.2); }
.form-field .checkbox-group {
  border: 1px solid #cccccc00; border-radius: 6px; font-size: 1em; color: #333;
  transition: border-color .3s, box-shadow .3s;
  background-color: rgba(255,255,255,.027);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1); max-height: 150px; overflow-y: auto;
  padding: 8px 10px; width: 100%; box-sizing: border-box;
}
.form-field .checkbox-group label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-weight: normal; cursor: pointer;
  transition: background-color .2s; margin-left: -5px; padding-left: 0;
}
.checkbox-group label:hover { background-color: #f0f0f0; padding-left: 5px; border-radius: 3px; cursor: pointer; }
.form-field .checkbox-group label:last-child { margin-bottom: 0; }
.field-full-span { grid-column: 1 / -1; }
.action-buttons { display: flex; justify-content: flex-end; gap: 1em; margin-top: 2em; }
#antiguedad-php { font-size: 1em; font-weight: normal; color: #333; }
.validation-message { font-size: .85em; margin-top: 5px; font-weight: bold; }
.disponible { color: #28AD56; } .no-disponible { color: #f34040; }

.feedback-container { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.1); max-width: 500px; }
.feedback-container h1 { font-size: 1.8em; margin-bottom: 20px; font-weight: normal; }
.feedback-container.success h1 { color: #18529D; }
.feedback-container.error h1 { color: #f34040; }
.feedback-container p { color: #777; margin-bottom: 30px; }
.spinner {
  border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #18529D;
  width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* -------- modooo oscuroooooooooooooo de aqui pa abajo xd -------- */

html.dark, body.dark { color-scheme: dark; }


html.dark body, body.dark {
  --bg: #0b0e12;
  --panel: rgba(255,255,255,.06);
  --panel-strong: rgba(255,255,255,.08);
  --glass: rgba(20,24,28,.55);
  --glass-soft: rgba(24,28,34,.4);
  --text: #e6e9ef;
  --text-dim: #c7cbd3;
  --text-muted: #a5abb6;
  --border: rgba(255,255,255,.12);
  --shadow: 0 8px 32px rgba(0,0,0,.45);
  --row-alt: rgba(255,255,255,.04);
  --hover: rgba(255,255,255,.06);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(35,45,60,.35), transparent 60%),
    radial-gradient(1000px 700px at 100% 20%, rgba(20,26,34,.35), transparent 55%),
    var(--bg);
  color: var(--text);
}


html.dark .top-bar::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--header-bg-dark);
}

/* DARK: tu fondo (los gradientes) por encima de la placa */
html.dark .top-bar::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(600px 300px at 12% -40%, rgba(24,82,157,.18), transparent 60%),
    radial-gradient(520px 280px at 88% 25%, rgba(40,173,86,.18), transparent 55%),
    linear-gradient(180deg, #12161c, #0e1218);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

html.dark .search-input,
body.dark .search-input {
  background-color: rgba(255,255,255,.08);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
html.dark .search-input::placeholder,
body.dark .search-input::placeholder { color: var(--text-muted); }

html.dark .show-button, body.dark .show-button,
html.dark .Clear,       body.dark .Clear {
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: var(--text-dim);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}


html.dark .left-column, body.dark .left-column {
  background-color: var(--glass-soft);
  color: var(--text);
  box-shadow: var(--shadow);
  border-right: 1px solid var(--border);
}

html.dark .perfil,
html.dark .contacto,
html.dark .panel{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
  color: #e9edf5;
}


html.dark .perfil .dato,
html.dark .contacto .dato{
  border-bottom: 1px dashed rgba(255,255,255,.10);
}


html.dark .perfil .dato > span:first-child,
html.dark .contacto .dato > span:first-child{
  color:#9cc4ff;
  opacity:.95;
  letter-spacing:.6px;
}


html.dark .perfil .dato > span:not(:first-child),
html.dark .perfil .dato p,
html.dark .perfil .dato > div,
html.dark .perfil .dato > a,
html.dark .contacto .dato > span:not(:first-child),
html.dark .contacto .dato p,
html.dark .contacto .dato > div,
html.dark .contacto .dato > a{
  color: rgba(240,243,249,.96);
  text-transform:none;
}


html.dark .perfil .dato > a,
html.dark .contacto .dato > a{
  color:#cfe3ff;
  text-decoration-color: rgba(207,227,255,.45);
}
html.dark .perfil .dato > a:hover,
html.dark .contacto .dato > a:hover{
  color:#ffffff;
  text-decoration-color: rgba(255,255,255,.75);
}


html.dark .lista-programas li{
  background: rgba(156,196,255,.14);
  border-color: rgba(156,196,255,.30);
  color:#eaf2ff;
}


html.dark #antiguedad-php{
  background: rgba(156,196,255,.22);
  border: 1px solid rgba(156,196,255,.38);
  color:#f4f8ff;
}

html.dark .form-container{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
  color:#e9edf5;
}

html.dark fieldset{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
html.dark legend{ color:#9cc4ff; font-weight:700; }

html.dark .form-group label{ color:#e9edf5; opacity:.95; }

html.dark .form-field input[type="text"],
html.dark .form-field input[type="tel"],
html.dark .form-field input[type="number"],
html.dark .form-field input[type="date"],
html.dark .form-field select,
html.dark .form-field textarea{
  background: rgba(255,255,255,.10);  
  color: #f4f7fc;
  border: 1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(0,0,0,.45) inset, 0 6px 12px rgba(0,0,0,.25);
}
html.dark .form-field input::placeholder,
html.dark .form-field textarea::placeholder{ color: rgba(233,237,245,.65); }

html.dark .form-field input:focus,
html.dark .form-field select:focus,
html.dark .form-field textarea:focus{
  outline: none;
  border-color:#3c7cff;
  box-shadow: 0 0 0 3px rgba(60,124,255,.25), 0 6px 12px rgba(0,0,0,.35);
}

html.dark .form-field select{ background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)); }
html.dark .select-wrapper::after{ color:#e9edf5; }

html.dark .checkbox-group{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color:#e9edf5;
  box-shadow: 0 1px 0 rgba(0,0,0,.35) inset;
}
html.dark .checkbox-group label{ color:#e9edf5; }
html.dark .checkbox-group label:hover{ background: rgba(255,255,255,.08); }


html.dark .submit-btn{
  background: linear-gradient(135deg, #0f4aa2, #18529D);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
html.dark .submit-btn:hover{ filter:brightness(1.05); }

html.dark .add-btn{
  background: linear-gradient(135deg, #0f4aa2, #18529D);
  color:#fff;
  border: 1px solid rgba(255,255,255,.14);
}

html.dark .checkbox-group::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(156,196,255,.55), rgba(82,205,139,.55));
  border-radius:8px; border:2px solid transparent; background-clip:padding-box;
}

html.dark .lista-programas li{
  background: rgba(156,196,255,.14);
  border-color: rgba(156,196,255,.30);
  color:#eaf2ff;
}
html.dark #antiguedad-php{
  background: rgba(156,196,255,.22);
  border: 1px solid rgba(156,196,255,.38);
  color:#f4f8ff;
}

html.dark fieldset, body.dark fieldset,
html.dark #contacto-form-section, body.dark #contacto-form-section {
  background: var(--panel);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  color: var(--text);
}


html.dark .form-field select{
  color-scheme: dark;  
  background: rgba(255,255,255,.10);
  color:#e9edf5;
  border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html.dark .form-field select option{
  background:#0f131a !important; 
  color:#e9edf5 !important; 
}

html.dark .form-field select option:hover,
html.dark .form-field select option:focus,
html.dark .form-field select option:checked{
  background:#1e3a8a !important; 
  color:#fff !important;
}

html.dark .form-field select option[disabled],
html.dark .form-field select option[value=""]{
  color:#a5abb6 !important;
}

html.dark .form-field select:focus{
  outline:none;
  border-color:#3c7cff;
  box-shadow:0 0 0 3px rgba(60,124,255,.25);
}

html.dark .form-field select::-ms-value{ color:#e9edf5; background:#0f131a; }

html.dark h1, body.dark h1,
html.dark h2, body.dark h2 { color: var(--text); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
html.dark thead, body.dark thead {
  background: linear-gradient(135deg, #103b77, #18529D);
  color: #fff;
}
html.dark tr:nth-child(even), body.dark tr:nth-child(even) { background: var(--row-alt); }
html.dark th, body.dark th,
html.dark td, body.dark td { color: var(--text); border-color: var(--border); }


html.dark .pendiente, body.dark .pendiente {
  background: linear-gradient(135deg, #4b3d12, #6a530f); color: #ffd87a;
}
html.dark .finalizado, body.dark .finalizado {
  background: linear-gradient(135deg, #0d3a2a, #155724); color: #bff2d2;
}


html.dark #searchResults, body.dark #searchResults{
  background: linear-gradient(135deg, rgba(30,34,40,.60), rgba(22,24,28,.40));
  -webkit-backdrop-filter: blur(18px) saturate(160%) contrast(105%);
  backdrop-filter: blur(18px) saturate(160%) contrast(105%);
  background-clip: padding-box;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
html.dark #searchResults::before, body.dark #searchResults::before{
  background: linear-gradient(135deg, rgba(24,82,157,.22), rgba(40,173,86,.22));
  color: #9cc4ff;
  border-color: rgba(255,255,255,.2);
}
html.dark #searchResults li, body.dark #searchResults li{
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-color: rgba(255,255,255,.08);
}
html.dark #searchResults li:hover, body.dark #searchResults li:hover{
  background: linear-gradient(135deg, rgba(24,82,157,.28), rgba(40,173,86,.24));
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
html.dark #searchResults li::after, body.dark #searchResults li::after{
  color: #9cc4ff;
  background: rgba(24,82,157,.22);
  border-color: rgba(24,82,157,.35);
}


html.dark .dropdown-menu, body.dark .dropdown-menu{
  background: linear-gradient(135deg, rgba(30,34,40,.86), rgba(22,24,28,.72));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  box-shadow: 0 16px 32px rgba(0,0,0,.45);
}
html.dark .dropdown-menu a, body.dark .dropdown-menu a{ color: var(--text-dim); }
html.dark .dropdown-menu a:hover, body.dark .dropdown-menu a:hover{ background: var(--hover); }


html.dark .form-header h2, body.dark .form-header h2 { color: #9cc4ff; }
html.dark .form-header p,  body.dark .form-header p  { color: var(--text-muted); }
html.dark .form-group label, body.dark .form-group label { color: var(--text); }

html.dark .modal, body.dark .modal { background-color: rgba(0,0,0,.65); }
html.dark .modal-content, body.dark .modal-content {
  background-color: rgba(18,22,28,.6);
  color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow);
}
html.dark .close-btn, body.dark .close-btn { color: var(--text-dim); }

html.dark .feedback-container, body.dark .feedback-container {
  background: var(--panel); color: var(--text);
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
html.dark .feedback-container p, body.dark .feedback-container p { color: var(--text-muted); }
html.dark .feedback-container.success h1, body.dark .feedback-container.success h1 { color: #9cc4ff; }
html.dark .feedback-container.error  h1, body.dark .feedback-container.error  h1 { color: #ff8d8d; }

html.dark #antiguedad-php, body.dark #antiguedad-php { color: var(--text); }
html.dark .validation-message, body.dark .validation-message { color: var(--text-muted); }
html.dark .disponible, body.dark .disponible { color: #52d38b; }
html.dark .no-disponible, body.dark .no-disponible { color: #ff7676; }


html.dark .btn,
body.dark .btn{
  color: rgba(255,255,255,.86);
  font-weight: 400;
  text-shadow: none; 
}

html.dark .altas-btn,
html.dark .bajas-btn,
html.dark .modificar-btn{
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05) inset;
}
html.dark .altas-btn:hover{ background: linear-gradient(135deg, #28ad56de, #28ad569a); color: #fff; }
html.dark .bajas-btn:hover{ background: linear-gradient(135deg, #f34040de, #f34040bd); color: #fff; }
html.dark .modificar-btn:hover{ background: linear-gradient(135deg, #18529de5, #18529d9a); color: #fff; }

html.dark .btn:disabled {}


/* ====================================================== */
/* --- BLOQUE RESPONSIVO (MÓVILES) - CORRECCIÓN ESTRUCTURAL --- */
/* ====================================================== */
@media (max-width: 768px) {
  
  body {
    padding-left: 10px;
    padding-right: 10px;
    /* Asegurarse de que el body no tenga un ancho fijo que restrinja */
    width: auto; 
    min-width: unset;
  }
  
  /* --- 1. Ajustar Encabezado --- */
  .top-bar {
    flex-wrap: wrap;
    height: auto; 
    padding: 10px;
  }

  .company-logo {
    max-height: 50px; /* Ajustar el tamaño del logo para móvil */
  }

  .header-tools {
    flex-basis: 100%; 
    margin-top: 10px;
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 10px; 
  }
  
  .search-wrapper {
    flex-basis: 100%; 
  }
  
  .search-input {
    min-width: 0; 
    width: 100%;
    box-sizing: border-box; 
  }

  .Clear {
    margin-left: 0; 
  }

  .dropdown {
    margin-left: 0;
  }

  /* --- 2. Corrección de Columnas PRINCIPAL --- */
  .left-column {
    position: relative; /* Quitar 'fixed' */
    width: 100%;        /* Ocupar todo el ancho */
    top: auto;          /* Resetear 'top' */
    left: auto;         /* Resetear 'left' */
    overflow-y: visible; /* Permitir scroll normal del contenido */
    margin-bottom: 20px;
    height: auto;       /* Permitir que la altura se ajuste al contenido */
    max-height: none;   /* Eliminar restricciones de altura */
    padding: 10px 0;    /* Ajustar padding, o eliminarlo si se quiere que el contenido toque los bordes */
    box-sizing: border-box;
    border-right: none; /* Eliminar borde derecho si lo hay */
    box-shadow: none;   /* Eliminar sombra si lo hay (opcional) */
    background-color: transparent; /* Fondo transparente para que se mezcle con el body */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .right-column {
    margin-left: 0;     /* Eliminar margen izquierdo fijo */
    width: 100%;        /* Asegurarse de que ocupe el 100% */
    padding: 0 10px;    /* Agregar padding si es necesario para el contenido interno */
    box-sizing: border-box;
  }

  /* Asegurarse de que el contenedor principal no restrinja */
  .container {
    display: block; /* Vuelve a ser un bloque normal */
    width: 100%;
    padding: 0;
  }

  /* --- 3. Corrección Desplegable de Búsqueda --- */
  #searchResults {
    position: absolute; 
    top: 100%; 
    left: 0;
    right: 0;
    width: 100%; 
    max-width: none;
    margin-top: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
    top: 40px; 
    right: auto;
    /* Ajustar ancho del resultado de búsqueda al 100% del contenedor padre */
    box-sizing: border-box; 
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 20px); /* Ajustar al padding del body */
  }
  
  html.dark #searchResults {
     top: 40px; 
  }

  /* --- 4. Apilar Botones de Acción --- */
  .button-group {
    flex-direction: column;
    gap: 10px; /* Reduce el espacio entre botones en móvil */
  }

  .btn {
    width: 100%;
    box-sizing: border-box; 
    padding: 15px 10px; /* Ajustar padding de los botones */
  }

  /* --- 5. Estilos de Tarjetas (Mantener y asegurar que se expandan) --- */
  .perfil,
  .contacto,
  .panel {
    padding: 16px; 
    margin: 12px 0; /* Asegurar margen vertical */
    width: 100%;    /* Asegurarse de que ocupen el 100% */
    box-sizing: border-box;
    /* Eliminar sombras y filtros para un aspecto más limpio si es necesario */
    box-shadow: 0 4px 12px rgba(0,0,0,.08); /* Restaurar una sombra simple */
    background-color: #fff; /* Asegurar fondo blanco en light mode */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .perfil .dato { grid-template-columns: 1fr; gap: 4px 0; }
  .perfil .dato > span:first-child { font-size: 11px; }
  .perfil .dato > span:not(:first-child),
  .perfil .dato p,
  .perfil .dato > div { font-size: 14px; }

  .contacto .dato,
  .contacto-content .dato { grid-template-columns: 1fr !important; gap: 4px 0; }
  .contacto .dato > span:first-child { font-size: 11px; }
  .contacto .dato > span:not(:first-child),
  .contacto .dato p,
  .contacto .dato > div { font-size: 14px; }

  /* Asegurarse de que la tabla se ajuste */
  table {
    display: block; /* Permite que la tabla se desborde horizontalmente si es muy ancha */
    overflow-x: auto; /* Agrega scroll horizontal si la tabla es más ancha que la pantalla */
    white-space: nowrap; /* Evita que el contenido de las celdas se envuelva */
  }
  th, td {
    padding: 8px 10px; /* Ajustar padding de celdas */
    font-size: 13px; /* Reducir tamaño de fuente en celdas */
  }

  /* Formulario de contacto y modal */
  #contacto-form-section,
  .form-container,
  .modal-content {
    width: 100%;
    max-width: 100%;
    margin: 10px auto;
    padding: 15px;
    box-sizing: border-box;
  }
  .form-grid {
    grid-template-columns: 1fr; /* Una sola columna para los campos del formulario */
  }
  .action-buttons {
    flex-direction: column;
    gap: 10px;
  }

  /* Footer */
  footer {
    padding: 10px;
    font-size: .8rem;
    flex-direction: column;
    text-align: center;
  }
  footer p {
    margin-bottom: 5px;
  }

  /* Botón volver arriba */
  .back-to-top {
    bottom: 70px; /* Subir un poco si el footer es más alto */
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  /* Modo Oscuro ajustes para los nuevos estilos */
  html.dark .left-column, body.dark .left-column {
    background-color: transparent; 
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: none;
    box-shadow: none;
  }
  html.dark .perfil, html.dark .contacto, html.dark .panel {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25); /* Sombra ajustada para móvil en dark mode */
  }
}