/* 1 Variables globales de color, fondo y sombras para mantener consistencia visual en todo el sitio. */
:root { --azul:#0f4761; --verde-oscuro:#276b42 ; --azul-claro:#44f4bc; --verde-azul:#4dd897 ; --celeste:#ffd1e4; --gris:#f4f6f8; --texto:#161d21; --blanco:#ffffff; --sombra:0 8px 24px rgba(0,0,0,.10); }

/* Reinicio básico para evitar diferencias de márgenes entre navegadores. */
* { box-sizing:border-box; margin:0; padding:0; }

/* Estilos generales del cuerpo del sitio. */
body { font-family:Arial, Helvetica, sans-serif; color:var(--texto); background:var(--gris); line-height:1.6; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

/* Contenedor central que limita el ancho máximo del contenido. */
.container { width:min(1100px,92%); margin:auto; }

/* Cabecera fija superior y navegación principal. */
.header { background:var(--blanco); box-shadow:var(--sombra); position:sticky; top:0; z-index:10;}
.nav { display:grid; grid-template-columns:180px 1fr auto; align-items:center; gap:24px; padding:14px 0;}
.brand-box { display:flex; align-items:center; justify-content:flex-start; min-width:180px;}
.menu-box { display:flex; justify-content:center; min-width:0;}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; color:var(--azul); font-size:1.35rem;}
.brand-img, .logo { width:auto; min-width: 70px; height:46px; border-radius:25%;}
.brand-img { object-fit:contain; }
.logo { background:var(--azul); color:white; display:grid; place-items:center; font-weight:bold; }

/* Menú principal y estado activo de la página actual. */
.menu { display:flex; gap:16px; list-style:none; align-items:center; justify-content:center; flex-wrap:wrap;}
.menu a { padding:8px 10px; border-radius:8px; font-weight:600; }
.menu a:hover, .menu a.active { background:var(--celeste); color:var(--azul); }
.hamburger { display:none; background:var(--azul); color:var(--blanco); border:none; padding:8px 12px; border-radius:8px; font-size: 1.5rem; cursor:pointer; place-items:center;}

/* Sección hero o banner principal de cada página. */
.hero { background:linear-gradient(135deg,var(--azul),var(--azul-claro)); color:white; padding:80px 0; text-align:center; }
.hero h1 { font-size:clamp(2rem,5vw,4rem); margin-bottom:12px; }
.hero p { max-width:760px; margin:0 auto 24px; font-size:1.15rem; }

/* Botones reutilizables del sitio. */
.btn { display:inline-block; background:var(--azul); color:white; padding:12px 18px; border-radius:10px; font-weight:700; border:none; cursor:pointer; margin:6px; }
.btn.secondary { background:white; color:var(--azul); }

#enviar-cotizacion.quote-send-available { background:#277a3f; color:#ffffff; }
#enviar-cotizacion.quote-send-unavailable { background:#b3261e; color:#ffffff; cursor:not-allowed; opacity:.85; }

html.theme-loading *,
html.theme-loading *::before,
html.theme-loading *::after {
    transition: none !important;
    animation: none !important;
}

.brand-img {
    content: url("/atlantida/images/logoClaro.png");
}

html.dark-theme .brand-img {
    content: url("/atlantida/images/logoOscuro.png");
}

#contact-submit.contact-send-unavailable { background:#b3261e; color:#ffffff; cursor:not-allowed; opacity:.85; }

/* Secciones, grillas y tarjetas de contenido. */
.section { padding:54px 0; }
.section h2 { color:var(--azul); margin-bottom:18px; font-size:2rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.card { background:rgb(246, 191, 220); border-radius:16px; padding:22px; box-shadow:var(--sombra); transition:transform .2s ease, box-shadow .2s ease; }
.card:hover { transform:translateY(-3px); }
.card h3 { color:var(--azul); margin-bottom:10px; }

/* Miniaturas de documentos PDF. */
.thumb { width:100%; height:120px; object-fit:contain; background:var(--celeste); border-radius:12px; padding:16px; margin-bottom:12px; }

/* Mostrar pdf con fondo de color */
.pdf-selected-item.pdf-file-ok { background: #dff6e4;  border-color: #9fd8ad;  color: #145c2e;}
.pdf-selected-item.pdf-file-error {  background: #ffe3e3;  border-color: #f2a4a4;  color: #8a1f1f;}

.pdf-warning-icon {  margin-right: 6px;  font-size: 1.1rem;}

/* Tablas de precios. */
.price-table { width:100%; border-collapse:collapse; background:white; border-radius:12px; overflow:hidden; box-shadow:var(--sombra); margin:20px 0; }
.price-table th, .price-table td { padding:14px; border-bottom:1px solid #dde6ea; text-align:left; }
.price-table th { background:var(--azul); color:white; }

/* Formularios y mensajes de validación. */
.form { background:rgb(255, 213, 235); padding:24px; border-radius:16px; box-shadow:var(--sombra); display:grid; gap:14px; }
.form label { font-weight:700; color:var(--azul); }
.form input, .form select, .form textarea, #buscador { width:100%; padding:12px; border:1px solid #ff03a3; border-radius:8px; font:inherit; }

/* Porcentaje de carga */
.upload-progress { background:#ffffff; border:1px solid #ff03a3; border-radius:12px; padding:12px; }
.upload-progress-text { font-weight:700; color:var(--azul); margin-bottom:8px; }
.upload-progress-bar { width:100%; height:14px; background:#f4f6f8; border-radius:999px; overflow:hidden; }
.upload-progress-bar span { display:block; height:100%; width:0%; background:linear-gradient(135deg,var(--azul),var(--verde-azul)); transition:width .2s ease; }
body.dark-theme .upload-progress { background:var(--superficie); border-color:#4d6874; }
body.dark-theme .upload-progress-bar { background:#10161a; }


/* Vista previa de documentos PDF. */
.pdf-selected { background:#ffffff; border:1px solid #ff03a3; border-radius:8px; padding:12px; max-width: 100%;  overflow: hidden;}
.pdf-selected-list { margin-top:8px; padding-left:0; list-style:none; display:grid; gap:8px; }
.pdf-selected-item { display:flex; align-items:center; justify-content:space-between; gap: 12px; background: var(--gris); border:1px solid #ffd1e4;  border-radius: 10px;  padding: 10px 12px;  max-width: 100%;}
.pdf-selected-item span {min-width: 0; overflow-wrap: anywhere; word-break: break-word;}

.pdf-summary-error { background: #ffe3e3; color: #8a1f1f; padding: 10px 12px; border-radius: 10px; font-weight: 700;}

.pdf-remove-btn { border:none; border-radius:8px; background:#8a1f1f; color:#ffffff; padding:7px 10px; font:inherit; font-weight:700; cursor:pointer; flex: 0 0 auto;}
.pdf-remove-btn:hover, .pdf-remove-btn:focus-visible { background:#b3261e; }

.pdf-file-info {min-width: 0;display: inline-flex;align-items: center;flex-wrap: wrap;overflow-wrap: anywhere;word-break: normal; gap: 4px;}
.pdf-file-icon {width: 22px;height: 22px;flex: 0 0 auto;object-fit: contain;display: inline-block;vertical-align: middle;margin-right: 6px;}
.pdf-file-name {min-width: 0; overflow-wrap: anywhere; word-break: break-word;}
.pdf-file-size {white-space: nowrap;}

/* Arrastrar y soltar pdf */
.pdf-dropzone { display:grid; place-items:center; gap:8px; text-align:center; background:#ffffff; border:2px dashed #ff03a3; border-radius:18px; padding:28px 18px; color:var(--azul); cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.pdf-dropzone:hover, .pdf-dropzone.dragover { background:var(--celeste); border-color:var(--azul); transform:translateY(-2px); }
.pdf-dropzone-icon { font-size:2.3rem; line-height:1; }
.pdf-dropzone-icon { width:48px; height:48px; object-fit:contain; display:block; }
.pdf-dropzone strong { font-size:1.05rem; }
.pdf-dropzone small { max-width:620px; color:#32444d; font-weight:600; }
.pdf-group input[type="file"] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Anti spam */
.hp-field {  position: absolute;  left: -9999px;  opacity: 0;  height: 0;  overflow: hidden;  pointer-events: none;}#buscador { margin-bottom:20px; }

.message {
  padding: 18px;
  border-radius: 14px;
  display: none;
  font-weight: 700;
  text-align: center;
}

.message.ok {
  background: #dff6e4;
  color: #145c2e;
  display: block;
}

.message.error {
  background: #ffe3e3;
  color: #8a1f1f;
  display: block;
}

#resultado-cotizacion.ok {
  margin-top: 18px;
  padding: 26px;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--azul), var(--verde-oscuro));
  color: #ffffff;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 12px 30px rgba(15, 71, 97, .30);
}

/* Vista previa de documentos PDF. */
.pdf-preview { width:100%; height:260px; border:1px solid #d5dfe5; border-radius:10px; background:#fafafa; margin:12px 0; }

/* Pie de página y botón volver arriba. */
.footer { background:var(--azul); color:white; padding:32px 0; margin-top:40px; }
.footer .grid { align-items:start; }
.footer-icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-right: 6px;}
.top-btn { position:fixed; right:18px; bottom:18px; display:none; border:none; border-radius:50%; width:46px; height:46px; background:var(--azul); color:white; font-size:1.2rem; cursor:pointer; box-shadow:var(--sombra); }
.top-btn.show { display:block; }

/* Accesibilidad: foco visible solo cuando se navega con teclado. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--verde-azul); outline-offset:3px; }

/* Responsive: transforma el menú horizontal en menú hamburguesa en pantallas pequeñas y respeta hidden para lectores de pantalla. */

@media (max-width:820px) { 
  .nav { position:relative; display:grid; grid-template-columns:50px 1fr auto; align-items:center; gap:10px; padding-right:0; }
  .brand-box { grid-column:2; justify-content:center; min-width:0; }
  .hamburger { display:grid; grid-column:1; position:static; width:50px; justify-self:start; }
  .theme-toggle { grid-column:3; justify-self:end; max-width:44vw; overflow:hidden; text-overflow:ellipsis; }
  .menu-box { order:4; width:100%; }
  .menu { position:absolute; left:0; right:0; top:74px; background:white; flex-direction:column; padding:16px; box-shadow:var(--sombra); z-index:20; }
  .menu[hidden] { display:none;}
  .menu.open {display:flex;}
  .menu a {width:100%; text-align:center;}
}
@media (max-width:420px) { .nav { grid-template-columns:46px 1fr auto; gap:6px; } .hamburger { width:46px; padding:8px 10px; } .theme-toggle { padding:8px 10px; font-size:.9rem; } .brand-img, .logo { height:40px; min-width:58px; } }

/* PDF's */
@media (max-width: 520px) {
  .pdf-selected-item { align-items: flex-start; flex-direction: column;}
  .pdf-remove-btn {width: 100%;text-align: center;} [data-pdfs-summary] {overflow-wrap: anywhere;word-break: break-word;}
  .pdf-file-info {display: flex; width: 100%;}
}

/* Submenús jerárquicos para Servicios, Libros y Resúmenes. */
.has-submenu { position:relative; }
.submenu { display:none; position:absolute; top:100%; left:0; min-width:190px; background:white; list-style:none; padding:10px; border-radius:12px; box-shadow:var(--sombra); }
.has-submenu:hover .submenu, .has-submenu:focus-within .submenu { display:block; }
.submenu a { display:block; white-space:nowrap; }
@media (max-width:820px) { .submenu { position:static; display:block; box-shadow:none; padding:0; background:transparent; } .submenu a { font-size:.95rem; padding-left:22px; } }

/* =========================================================
   TEMA CLARO / OSCURO
   ========================================================= */

/* Tema claro por defecto */
:root {
  color-scheme: light; --azul: #0f4761; --verde-oscuro: #276b42;
  --azul-claro: #44f4bc;--verde-azul: #4dd897;--celeste: #ffd1e4;
  --gris: #f4f6f8;--texto: #161d21;--blanco: #ffffff;
  --superficie: #ffffff;--superficie-2: #f8fafb;--borde: #dde6ea;--entrada: #ffffff;
  --texto-suave: #52636d;--rosa-borde: #ff03a3;
  --sombra: 0 8px 24px rgba(0, 0, 0, .10);
}

/* =========================================================
   BOTÓN DE TEMA
   ========================================================= */

.theme-toggle {
  background: var(--azul); color: var(--blanco); border: none; padding: 8px 12px;border-radius: 999px;
  font-weight: 700;cursor: pointer; box-shadow: var(--sombra); white-space: nowrap;
  transition: background .2s ease,color .2s ease,transform .2s ease;}
.theme-toggle:hover {background: var(--verde-oscuro);transform: translateY(-1px);}
.theme-toggle:active {transform: translateY(0);}

/* =========================================================
   TEMA OSCURO
   ========================================================= */

html.dark-theme {
  color-scheme: dark;
  --azul: #70d7ff;--verde-oscuro: #7ee2a8;--azul-claro: #1d789b;--verde-azul: #42d99b;
  --celeste: #3a2633;--gris: #0f1418;--texto: #edf3f6;--blanco: #171d22;
  --superficie: #1a2228;--superficie-2: #202a31;--borde: #35434c;--entrada: #10161a;--texto-suave: #b8c6cd;--rosa-borde: #ff62c2;
  --sombra: 0 10px 30px rgba(0, 0, 0, .45);
  background: var(--gris);
  color: var(--texto);
}
html.light-theme {
  color-scheme: light;
}



/* =========================================================
   CABECERA Y NAVEGACIÓN
   ========================================================= */
body.dark-theme .header {background: #171d22;border-bottom: 1px solid var(--borde);}
body.dark-theme .brand {color: var(--azul);}
body.dark-theme .menu { background: #171d22;}
body.dark-theme .menu a {color: var(--texto);}

body.dark-theme .menu a:hover,body.dark-theme .menu a.active,body.dark-theme .has-submenu:hover > a,body.dark-theme .has-submenu:focus-within > a {background: #6b3855; color: #7ee2a8;}

body.dark-theme .has-submenu > a {  color: var(--texto);  background: transparent;}
body.dark-theme .submenu {  background: #1a2228;  border: 1px solid var(--borde);}
body.dark-theme .submenu a:hover {  background: #6b3855;}

/* =========================================================
   HERO
   ========================================================= */

body.dark-theme .hero { background: linear-gradient(  135deg, #092b3a 0%, #124b63 55%, #176d88 100%);color: #ffffff;}

/* =========================================================
   BOTONES
   ========================================================= */

body.dark-theme .btn { background: #70d7ff; color: #071116;}

body.dark-theme .btn:hover {
  background: #9ae4ff;
}

body.dark-theme .btn.secondary {
  background: #202a31;
  color: #70d7ff;
  border: 1px solid #45616d;
}

body.dark-theme .btn.secondary:hover {
  background: #2a3740;
  color: #ffffff;
}


/* =========================================================
   SECCIONES
   ========================================================= */

body.dark-theme .section h2 {
  color: var(--azul);
}


/* =========================================================
   TARJETAS
   ========================================================= */

body.dark-theme .card {
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
}

body.dark-theme .card h3 {
  color: var(--azul);
}

body.dark-theme .card:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, .50);
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

body.dark-theme .form {
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borde);
}

body.dark-theme .form label {
  color: var(--azul);
}

body.dark-theme .form input,
body.dark-theme .form select,
body.dark-theme .form textarea,
body.dark-theme #buscador {
  background: var(--entrada);
  color: var(--texto);
  border-color: #4d6874;
}

body.dark-theme .form input::placeholder,
body.dark-theme .form textarea::placeholder,
body.dark-theme #buscador::placeholder {
  color: #899aa3;
}

body.dark-theme .form input:hover,
body.dark-theme .form select:hover,
body.dark-theme .form textarea:hover,
body.dark-theme #buscador:hover {
  border-color: #70d7ff;
}

body.dark-theme .form input:focus,
body.dark-theme .form select:focus,
body.dark-theme .form textarea:focus,
body.dark-theme #buscador:focus {
  border-color: #70d7ff;
  box-shadow: 0 0 0 3px rgba(112, 215, 255, .15);
}


/* =========================================================
   TABLAS
   ========================================================= */

body.dark-theme .price-table {
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borde);
}

body.dark-theme .price-table th {
  background: #0b3041;
  color: #ffffff;
}

body.dark-theme .price-table td {
  border-bottom-color: var(--borde);
}

body.dark-theme .price-table tr:hover td {
  background: #202a31;
}


/* =========================================================
   PDF / ARCHIVOS
   ========================================================= */

body.dark-theme .thumb {
  background: #2b2530;
}

body.dark-theme .pdf-preview {
  background: #151b20;
  border-color: var(--borde);
}

body.dark-theme .pdf-selected {
  background: var(--superficie);
  border-color: #4d6874;
}

body.dark-theme .pdf-selected-item {
  background: var(--entrada);
  border-color: var(--borde);
  color: var(--texto);
}

body.dark-theme .pdf-selected-item.pdf-file-ok {
  background: #163323;
  border-color: #397b50;
  color: #9ee8b5;
}

body.dark-theme .pdf-selected-item.pdf-file-error {
  background: #3a1d1d;
  border-color: #8d4848;
  color: #ffb4b4;
}

body.dark-theme .pdf-dropzone {
  background: var(--superficie);
  color: var(--texto);
  border-color: #70d7ff;
}

body.dark-theme .pdf-dropzone:hover,
body.dark-theme .pdf-dropzone.dragover {
  background: #26333b;
  border-color: #9ae4ff;
}

body.dark-theme .pdf-dropzone small {
  color: var(--texto-suave);
}

body.dark-theme .pdf-remove-btn {
  background: #a83232;
  color: #ffffff;
}

body.dark-theme .pdf-remove-btn:hover,
body.dark-theme .pdf-remove-btn:focus-visible {
  background: #c94242;
}


/* =========================================================
   MENSAJES
   ========================================================= */

body.dark-theme .message.ok {
  background: #163323;
  color: #9ee8b5;
  border: 1px solid #397b50;
}

body.dark-theme .message.error {
  background: #3a1d1d;
  color: #ffb4b4;
  border: 1px solid #8d4848;
}

body.dark-theme .pdf-summary-error {
  background: #3a1d1d;
  color: #ffb4b4;
}


/* =========================================================
   RESULTADO DE COTIZACIÓN
   ========================================================= */

body.dark-theme #resultado-cotizacion.ok {
  background:
    linear-gradient(
      135deg,
      #0b3447,
      #175c43
    );

  color: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}


/* =========================================================
   FOOTER
   ========================================================= */

body.dark-theme .footer {
  background: #092b3a;
  color: #edf3f6;
}


/* =========================================================
   BOTÓN VOLVER ARRIBA
   ========================================================= */

body.dark-theme .top-btn {
  background: #70d7ff;
  color: #071116;
}

body.dark-theme .top-btn:hover {
  background: #9ae4ff;
}


/* =========================================================
   FOCO DE ACCESIBILIDAD
   ========================================================= */

body.dark-theme a:focus-visible,
body.dark-theme button:focus-visible,
body.dark-theme input:focus-visible,
body.dark-theme select:focus-visible,
body.dark-theme textarea:focus-visible {
  outline: 3px solid #42d99b;
  outline-offset: 3px;
}


/* =========================================================
   TRANSICIONES SUAVES DEL TEMA
   ========================================================= */

body,
.header,
.menu,
.card,
.form,
.price-table,
.pdf-selected,
.pdf-selected-item,
.pdf-dropzone,
.form input,
.form select,
.form textarea,
#buscador,
.btn,
.theme-toggle,
.top-btn {
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


/* =========================================================
   RESPUESTA DEL MENÚ MÓVIL EN MODO OSCURO
   ========================================================= */

@media (max-width: 820px) {

  body.dark-theme .menu {
    background: #171d22;
    border-top: 1px solid var(--borde);
  }

  body.dark-theme .submenu {
    background: transparent;
    border: none;
  }

  body.dark-theme .submenu a {
    color: #cbd7dd;
  }

  body.dark-theme .submenu a:hover {
    background: #26333b;
    color: #ffffff;
  }
}