/* =============================================================================
   SeMiLLa · PALETA SOBRIA  (propuesta 2026-08-03)
   -----------------------------------------------------------------------------
   Objetivo: que la app se vea formal, no colorida. shinydashboard y Bootstrap
   traen azul, celeste, naranja, rojo y verde saturados compitiendo en la misma
   pantalla. Aqui todo se reduce a UNA escala de verde con mucho blanco, y el
   color se reserva para lo que de verdad significa algo: el veredicto.

   Se carga DESPUES de estilos.css, asi que solo hace falta redefinir. Para
   volver atras basta con quitar su <link> en app.R: no se ha tocado nada mas.

   Regla de uso del color:
     verde   -> identidad, encabezados, acciones primarias
     gris    -> estructura, bordes, texto secundario
     ambar   -> advertencia (solo veredictos y avisos reales)
     granate -> riesgo (solo veredictos y errores reales)
   ============================================================================= */

:root {
  --sem-verde:      #2e7d52;
  --sem-verde-osc:  #1e5738;
  --sem-verde-cla:  #eaf3ed;
  --sem-verde-pal:  #f4f9f6;
  --sem-tinta:      #2b3a33;
  --sem-gris:       #6b7d76;
  --sem-gris-cla:   #e4ebe7;
  --sem-fondo:      #f6f8f7;
  --sem-ambar:      #b58900;
  --sem-ambar-cla:  #fdf6e3;
  --sem-granate:    #a33a3a;
  --sem-granate-cla:#fbeeee;
}

/* ---- Lienzo ------------------------------------------------------------- */
body, .content-wrapper, .right-side { background: var(--sem-fondo) !important; }
.content-wrapper { color: var(--sem-tinta); }

/* ---- Barra superior y lateral: un solo verde, sin degradados ------------- */
.skin-blue .main-header .navbar,
.skin-green .main-header .navbar { background-color: var(--sem-verde-osc) !important; }
.skin-blue .main-header .logo,
.skin-green .main-header .logo {
  background-color: var(--sem-verde-osc) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.skin-blue .main-header .logo:hover,
.skin-green .main-header .logo:hover { background-color: var(--sem-verde) !important; }
.skin-blue .main-sidebar, .skin-green .main-sidebar,
.skin-blue .left-side,    .skin-green .left-side { background-color: #24312b !important; }
.skin-blue .sidebar a, .skin-green .sidebar a { color: #cfe0d6 !important; }

/* ---- Cajas: el color del borde superior deja de gritar ------------------- */
.box { border-radius: 10px; border: 1px solid var(--sem-gris-cla);
       box-shadow: 0 1px 2px rgba(43,58,51,.05); }
.box.box-primary, .box.box-info, .box.box-success,
.box.box-warning, .box.box-danger { border-top-color: var(--sem-verde) !important; }

/* Cabeceras solidas: todas verdes salvo que signifiquen advertencia o riesgo */
.box.box-solid.box-primary > .box-header,
.box.box-solid.box-info    > .box-header,
.box.box-solid.box-success > .box-header {
  background: var(--sem-verde) !important; color: #fff !important;
}
.box.box-solid.box-primary, .box.box-solid.box-info,
.box.box-solid.box-success { border-color: var(--sem-verde) !important; }
.box.box-solid.box-warning > .box-header {
  background: var(--sem-ambar) !important; color: #fff !important;
}
.box.box-solid.box-warning { border-color: var(--sem-ambar) !important; }
.box.box-solid.box-danger  > .box-header {
  background: var(--sem-granate) !important; color: #fff !important;
}
.box.box-solid.box-danger { border-color: var(--sem-granate) !important; }

/* ---- Avisos: fondo palido y una barra lateral, sin bloques saturados ----- */
.alert { border: 1px solid var(--sem-gris-cla); border-left-width: 4px;
         border-radius: 0 8px 8px 0; box-shadow: none; }
.alert-info    { background: var(--sem-verde-pal) !important;
                 border-left-color: var(--sem-verde) !important;
                 color: var(--sem-tinta) !important; }
.alert-success { background: var(--sem-verde-cla) !important;
                 border-left-color: var(--sem-verde) !important;
                 color: var(--sem-verde-osc) !important; }
.alert-warning { background: var(--sem-ambar-cla) !important;
                 border-left-color: var(--sem-ambar) !important;
                 color: #7a5c00 !important; }
.alert-danger  { background: var(--sem-granate-cla) !important;
                 border-left-color: var(--sem-granate) !important;
                 color: #7a1010 !important; }
/* AdminLTE pinta de blanco los enlaces dentro de un aviso (.alert a {color:#fff}),
   porque alli el fondo era saturado. Con esta paleta el fondo es palido y el
   enlace se volvia invisible: se leia como una linea en blanco. */
.alert a, .alert a:link, .alert a:visited,
.alert a:hover, .alert a:focus {
  color: var(--sem-verde-osc) !important;
  text-decoration: underline;
}

/* ---- Botones: uno primario y el resto en gris ---------------------------- */
.btn { border-radius: 8px; font-weight: 600; }
/* Doble clase a proposito: shiny los emite como "btn btn-default btn-primary",
   asi que con una sola clase el .btn-default de mas abajo ganaba por orden y
   el boton principal de cada paso salia blanco. */
.btn.btn-primary, .btn.btn-success {
  background: var(--sem-verde) !important; border-color: var(--sem-verde) !important;
  color: #fff !important;
}
.btn.btn-primary:hover, .btn.btn-success:hover {
  background: var(--sem-verde-osc) !important; border-color: var(--sem-verde-osc) !important;
  color: #fff !important;
}
.btn.btn-primary:disabled, .btn.btn-success:disabled,
.btn.btn-primary.disabled, .btn.btn-success.disabled {
  background: var(--sem-gris-cla) !important; border-color: var(--sem-gris-cla) !important;
  color: var(--sem-gris) !important;
}
.btn-default {
  background: #fff !important; border-color: var(--sem-gris-cla) !important;
  color: var(--sem-tinta) !important;
}
.btn-default:hover { background: var(--sem-verde-pal) !important;
                     border-color: var(--sem-verde) !important; }
.btn-warning { background: #fff !important; color: #8a6800 !important;
               border-color: var(--sem-ambar) !important; }
.btn-warning:hover { background: var(--sem-ambar-cla) !important; }
.btn-danger  { background: #fff !important; color: var(--sem-granate) !important;
               border-color: var(--sem-granate) !important; }
.btn-danger:hover { background: var(--sem-granate-cla) !important; }

/* ---- Formularios --------------------------------------------------------- */
.form-control, .selectize-input {
  border-radius: 8px !important; border-color: var(--sem-gris-cla) !important;
  box-shadow: none !important;
}
.form-control:focus, .selectize-input.focus {
  border-color: var(--sem-verde) !important;
  box-shadow: 0 0 0 3px rgba(46,125,82,.12) !important;
}
label, .control-label { color: var(--sem-tinta); font-weight: 600; }
.irs-bar, .irs-bar-edge { background: var(--sem-verde) !important;
                          border-color: var(--sem-verde) !important; }
.irs-from, .irs-to, .irs-single { background: var(--sem-verde) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--sem-verde); }

/* ---- Tablas y pestanas --------------------------------------------------- */
.table > thead > tr > th { background: var(--sem-verde-pal);
  color: var(--sem-verde-osc); border-bottom: 2px solid var(--sem-gris-cla); }
.nav-tabs > li.active > a { border-top: 2px solid var(--sem-verde) !important;
  color: var(--sem-verde-osc) !important; font-weight: 700; }
.nav-tabs > li > a { color: var(--sem-gris); }

/* ---- Valueboxes: sin bloques de color plano ------------------------------ */
.small-box { border-radius: 10px; border: 1px solid var(--sem-gris-cla);
             box-shadow: none; }
.small-box.bg-blue, .small-box.bg-aqua, .small-box.bg-green,
.small-box.bg-purple, .small-box.bg-yellow, .small-box.bg-red {
  background: #fff !important; color: var(--sem-tinta) !important;
}
.small-box.bg-blue h3, .small-box.bg-aqua h3, .small-box.bg-green h3,
.small-box.bg-purple h3, .small-box.bg-yellow h3, .small-box.bg-red h3 {
  color: var(--sem-verde-osc) !important;
}
.small-box .icon { color: rgba(46,125,82,.18) !important; }

/* ---- Barra de estado del wizard ------------------------------------------ */
.progress-bar { background-color: var(--sem-verde) !important; }
.wiz-guia { background: var(--sem-verde-pal); border-color: var(--sem-gris-cla);
            border-left-color: var(--sem-verde); }

/* ---- Restos de Bootstrap/AdminLTE que se escapaban ----------------------- */
/* Detectados midiendo el color real de cada elemento en pantalla, no leyendo
   el codigo: el azul del switch ES/EN, el rojo de las etiquetas de estado, el
   naranja del paso activo y el salmon de <code> quedaban fuera de la escala. */
.label-primary, .bg-primary, .switch.label-primary {
  background-color: var(--sem-verde) !important;
}
.label-danger, .bg-red {
  background-color: var(--sem-granate) !important;
}
.label-warning, .bg-yellow { background-color: var(--sem-ambar) !important; }
.label-success, .label-info, .bg-green, .bg-aqua, .bg-blue {
  background-color: var(--sem-verde) !important;
}
.wiz-dot { background: var(--sem-verde) !important; color: #fff !important; }
code, .code, kbd {
  background: var(--sem-verde-cla) !important; color: var(--sem-verde-osc) !important;
  border: 1px solid var(--sem-gris-cla); border-radius: 5px;
}
kbd { background: var(--sem-gris-cla) !important; color: var(--sem-tinta) !important; }
a { color: var(--sem-verde-osc); }
a:hover, a:focus { color: var(--sem-verde); }

/* ---- Los acentos lavanda y durazno de estilos.css ------------------------ */
/* estilos.css define dos acentos decorativos, #ce93d8 (lavanda) y #ffab91
   (durazno), que aparecen en iconos, paneles de referencia y el enlace de
   cambiar de camino. No significan nada: son adorno. Aqui se reconducen a la
   escala verde uno por uno, en vez de editar estilos.css, para que quitar el
   <link> de este archivo devuelva la app a como estaba. */
.box.box-info    { border-top-color: var(--sem-verde) !important; }
.box.box-warning { border-top-color: var(--sem-ambar) !important; }
.btn-info {
  background-color: #fff !important; border-color: var(--sem-gris-cla) !important;
  color: var(--sem-tinta) !important;
}
.btn-info:hover {
  background-color: var(--sem-verde-pal) !important;
  border-color: var(--sem-verde) !important; color: var(--sem-verde-osc) !important;
}
.estado-banner.warn { border-left-color: var(--sem-ambar) !important; }
.label-info { background-color: var(--sem-verde) !important; color: #fff !important; }
.small-box.bg-purple, .small-box.bg-yellow {
  background-color: #fff !important; color: var(--sem-tinta) !important;
}
.shiny-busy::after { background: var(--sem-verde) !important; }
.alert-info { color: var(--sem-tinta) !important;
              border-color: var(--sem-gris-cla) !important;
              border-left-color: var(--sem-verde) !important; }
details.ref-panel { border-left-color: var(--sem-verde) !important; }
details.ref-panel summary,
details.ref-panel summary::before,
details.ref-panel summary:hover,
details.ref-panel summary i, details.ref-panel summary .fa,
details.ref-panel summary .fas { color: var(--sem-verde-osc) !important; }
.wiz-exit-link, .wiz-exit-link:hover { color: var(--sem-verde-osc) !important; }
.wiz-choice-validate .wiz-choice-icon { color: var(--sem-verde) !important; }
.wiz-choice-validate:hover { border-color: var(--sem-verde) !important; }
.wiz-choice-validate:hover .wiz-choice-go {
  background: var(--sem-verde-cla) !important; color: var(--sem-verde-osc) !important;
}
.wiz-hero-note { border-left-color: var(--sem-verde) !important; }
.wiz-hero-note .fa, .wiz-hero-note .fas { color: var(--sem-verde) !important; }

/* ---- Los beiges calidos del wizard --------------------------------------- */
/* #f5f1e8 y sus bordes tiran a crema y, junto al verde, la pantalla se ve
   amarillenta. Se sustituyen por el mismo gris verdoso frio del resto. */
.wiz-hero-note, .well, .well-sm {
  background: var(--sem-verde-pal) !important;
  border-color: var(--sem-gris-cla) !important;
}
.irs-line, .irs-grid-pol, .irs-min, .irs-max {
  background: var(--sem-gris-cla) !important; color: var(--sem-gris) !important;
}
.wiz-choice-card { border-color: var(--sem-gris-cla) !important; }
.wiz-choice-card:hover { border-color: var(--sem-verde) !important; }
.wiz-dot { border-color: var(--sem-verde) !important; }

/* ---- El veredicto de la compuerta conserva su semantica ------------------ */
.cmp-v-rojo  { background: var(--sem-granate-cla); border-left-color: var(--sem-granate);
               color: #7a1010; }
.cmp-v-ambar { background: var(--sem-ambar-cla); border-left-color: var(--sem-ambar);
               color: #7a5c00; }
.cmp-v-verde { background: var(--sem-verde-cla); border-left-color: var(--sem-verde);
               color: var(--sem-verde-osc); }

/* ---- Progreso por hitos: al verde unico de la paleta -------------------- */
.cmp-prog { background: var(--sem-verde-pal); border-color: var(--sem-gris-cla);
            border-left-color: var(--sem-verde); }
.cmp-prog-tit { color: var(--sem-verde-osc); }
.cmp-hito-punto { background: var(--sem-gris-cla); color: var(--sem-gris); }
.cmp-hito-nom { color: var(--sem-gris); }
.cmp-hito.hecho .cmp-hito-punto,
.cmp-hito.activo .cmp-hito-punto { background: var(--sem-verde); color: #fff; }
.cmp-hito.hecho .cmp-hito-nom { color: var(--sem-tinta); }
.cmp-hito.hecho .cmp-hito-sub,
.cmp-hito.activo .cmp-hito-sub { color: var(--sem-verde); }
.cmp-hito.activo .cmp-hito-nom { color: var(--sem-verde-osc); }
.cmp-hito.activo .cmp-hito-punto {
  animation: cmp-pulso-sobrio 1.6s ease-out infinite; }
@keyframes cmp-pulso-sobrio {
  0%   { box-shadow: 0 0 0 0   rgba(46,125,82,.45); }
  70%  { box-shadow: 0 0 0 9px rgba(46,125,82,0); }
  100% { box-shadow: 0 0 0 0   rgba(46,125,82,0); }
}
.cmp-hito-linea { background: var(--sem-gris-cla); }
.cmp-hito-linea.hecha { background: var(--sem-verde); }
.cmp-prog-barra { background: var(--sem-gris-cla); }
.cmp-prog-relleno { background: var(--sem-verde); }
.cmp-prog-pie { color: var(--sem-gris); }

/* ---- Sello de procedencia ------------------------------------------------ */
.cmp-sello-web { background: var(--sem-fondo); border-color: var(--sem-gris-cla);
                 color: var(--sem-gris); }
.cmp-sello-pc  { background: var(--sem-verde-pal); border-color: var(--sem-gris-cla);
                 color: var(--sem-verde-osc); }