/* ============================================================================
   base.css — Estilos globales comunes de RadProc WEB
   ---------------------------------------------------------------------------
   Define:
     - Variables de color base (modo claro y oscuro)
     - Tipografía, layout general y fondo
     - Formularios, inputs, selects y botones
     - Select tematizado por tipo (Agua / Suelo / Spectralon)
     - Sistema de avisos (toast)
============================================================================ */


/* ============================================================================
   1) VARIABLES GLOBALES — MODO CLARO Y OSCURO
============================================================================ */

:root {
  /* === Paleta base modo claro === */
  --c-bg:        #eaf6fc;
  --c-card:      #f6fbff;
  --c-text:      #002b40;
  --c-muted:     #6b7b87;
  --c-border:    #dce8ef;

  /* Color base de botones / links (Bootstrap primary) */
  --c-primary:   #0d6efd;

  /* === Tintes por tipo de medición (modo claro) === */
  --agua-bg:     #ccefff;
  --agua-border: #00aaff;
  --agua-text:   #003344;

  --suelo-bg:     #d6f5d6;
  --suelo-border: #66cc66;
  --suelo-text:   #003300;

  --spec-bg:      #fff4b2;
  --spec-border:  #e6b800;
  --spec-text:    #665200;

  /* === Avisos === */
  --warn-bg: #ffc107;
  --warn-text: #000;
}

/* --- Modo oscuro: redefino solo variables --- */
html.modo-oscuro body {
  --c-bg:        #121416;
  --c-card:      #1a2026;
  --c-text:      #e6edf3;
  --c-muted:     #a6b3be;
  --c-border:    #2b3440;

  /* === Tintes por tipo de medición (modo oscuro) === */
  --agua-bg:     #0f2430;
  --agua-border: #3da5ff;
  --agua-text:   #a8d8ff;

  --suelo-bg:     #0f2618;
  --suelo-border: #58d68d;
  --suelo-text:   #b9f6d0;

  --spec-bg:      #2a2412;
  --spec-border:  #f1c40f;
  --spec-text:    #fde8a4;
}


/* ============================================================================
   2) LAYOUT GLOBAL Y ESTRUCTURA BASE
============================================================================ */

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Navbar y footer */
.navbar,
footer {
  background: transparent;
}

html.modo-oscuro body .navbar,
html.modo-oscuro body footer {
  background: #0f1317 !important;
}

/* Contenedor general del contenido principal */
.app-page-shell {
  position: relative;
  flex: 1;
  overflow: visible;
}

/* Capa de fondo decorativa detrás del contenido */
.app-page-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    linear-gradient(
      to bottom,
      rgba(234, 246, 252, 0.86),
      rgba(234, 246, 252, 0.93)
    );
   /* url("/static/img/");*/
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.22;
}

/* Contenido real por encima del fondo */
.app-main-content {
  position: relative;
}

/* Fondo en modo oscuro */
html.modo-oscuro body .app-page-bg {
  background-image:
    linear-gradient(
      to bottom,
      rgba(8, 12, 18, 0.78),
      rgba(10, 14, 20, 0.90)
    ),
    url("/static/img/radproc-bg-dark3.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.46;
}

/* Utilidades comunes */
a { color: #0b6ce2; }
html.modo-oscuro body a { color: #80cfff; }

.text-center { text-align: center; }
.text-end { text-align: end; }
.w-100 { width: 100%; }

footer {
  margin-top: auto;
  font-size: 0.9rem;
}


/* ============================================================================
   3) FORMULARIOS, INPUTS Y TEXTAREAS
============================================================================ */

/* --- Base clara --- */
.form-control,
.form-select,
textarea {
  background: #fff;
  color: var(--c-text);
  border-color: #b8c7d3;
}

::placeholder {
  color: #8796a3;
}

/* --- Modo oscuro --- */
html.modo-oscuro body .form-control,
html.modo-oscuro body .form-select,
html.modo-oscuro body textarea {
  background: var(--c-card);
  color: var(--c-text);
  border-color: var(--c-border);
}

html.modo-oscuro body ::placeholder {
  color: #9fb0bf;
}

/* --- Botones deshabilitados --- */
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}


/* ============================================================================
   4) INPUT FILE — “Seleccionar archivo”
   (Diseño coherente en modo claro y oscuro)
============================================================================ */

/* --- Modo claro --- */
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
  padding: 0.45rem 0.9rem;
  border: 1px solid #b8c7d3;
  border-radius: 0.375rem;
  background: #f4f7fa;
  color: #0b1f2b;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover {
  filter: brightness(0.96);
}

/* --- Modo oscuro --- */
html.modo-oscuro body input[type="file"]::-webkit-file-upload-button,
html.modo-oscuro body input[type="file"]::file-selector-button {
  border-color: var(--c-border);
  background: #2a2f36;
  color: var(--c-text);
}

html.modo-oscuro body input[type="file"]::-webkit-file-upload-button:hover,
html.modo-oscuro body input[type="file"]::file-selector-button:hover {
  background: #343b44;
}


/* ============================================================================
   5) SELECT “TEMATIZADO” POR TIPO DE MEDICIÓN
   (Agua / Suelo / Spectralon)
============================================================================ */

/* --- Agua --- */
select.form-select.agua {
  background: var(--agua-bg);
  border-color: var(--agua-border);
  color: var(--agua-text);
}
select.form-select.agua option {
  background: #fff;
  color: #003344;
}

/* --- Suelo --- */
select.form-select.suelo {
  background: var(--suelo-bg);
  border-color: var(--suelo-border);
  color: var(--suelo-text);
}
select.form-select.suelo option {
  background: #fff;
  color: #003300;
}

/* --- Spectralon --- */
select.form-select.spectralon {
  background: var(--spec-bg);
  border-color: var(--spec-border);
  color: var(--spec-text);
}
select.form-select.spectralon option {
  background: #fff;
  color: #665200;
}

/* --- Modo oscuro: tinte suave por tipo --- */
html.modo-oscuro body select.form-select.agua {
  background: rgba(61, 165, 255, 0.15);
  border-color: var(--agua-border);
  color: var(--agua-text);
}

html.modo-oscuro body select.form-select.suelo {
  background: rgba(88, 214, 141, 0.15);
  border-color: var(--suelo-border);
  color: var(--suelo-text);
}

html.modo-oscuro body select.form-select.spectralon {
  background: rgba(241, 196, 15, 0.15);
  border-color: var(--spec-border);
  color: var(--spec-text);
}

html.modo-oscuro body select.form-select.agua option,
html.modo-oscuro body select.form-select.suelo option,
html.modo-oscuro body select.form-select.spectralon option {
  background: var(--c-card);
  color: var(--c-text);
}

/* ============================================================================
   6) SISTEMA DE AVISOS / TOASTS
============================================================================ */

.toast-container-fixed {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

.toast-aviso {
  background: var(--warn-bg);
  color: var(--warn-text);
  padding: 10px 16px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: opacity 1s ease-out;
}

.toast-aviso.fade-out {
  opacity: 0;
}


/* ============================================================================
   7) MODO OSCURO — Ajustes finos de texto y placeholders
============================================================================ */

/* Textos secundarios */
html.modo-oscuro body {
  --c-muted:  #bfc9d4;
  --c-border: #3e4a55;
}

/* Placeholders */
html.modo-oscuro body ::placeholder {
  color: #bfc9d4 !important;
  opacity: 0.9;
}

/* Labels y textos de ayuda */
html.modo-oscuro body label,
html.modo-oscuro body small,
html.modo-oscuro body .form-text {
  color: #d3dde7 !important;
}

/* Textos deshabilitados o informativos */
html.modo-oscuro body .text-muted,
html.modo-oscuro body .mensaje-info,
html.modo-oscuro body #mensaje-sin-archivo {
  color: #c6d3df !important;
  font-weight: 500;
}

/* ============================================================================
   UX MEJORA — Indicador visual de selección interactiva
   (Convierte la flechita en manito para selects)
============================================================================ */

/* Modo claro y oscuro */
select.form-select,
#tipo-medicion,
#tipo-config {
  cursor: pointer !important;
}


/* ============================================================================
   8) AJUSTES RESPONSIVE DEL BACKGROUND
============================================================================ */

@media (max-width: 768px) {
  .app-page-bg {
    background-position: center top;
    background-size: cover;
  }
}