/*=====================================================================
  moderno.css — Capa de modernización visual de helpLedesmaFull
  ---------------------------------------------------------------------
  NO reemplaza AdminLTE ni plantilla.css. Se carga DESPUÉS de ellos para
  refinar tipografía, botones, tarjetas, tablas, sidebar y login,
  manteniendo la paleta identitaria: negro + verde (#3fe22d).
=====================================================================*/

:root {
  --verde:        #3fe22d;
  --verde-2:      #59D628;
  --verde-osc:    #2bb51d;
  --negro:        #111111;
  --negro-2:      #1c1c1c;
  --gris-panel:   #f4f6f4;
  --gris-borde:   #e2e6e2;
  --texto:        #23282b;
  --texto-suave:  #6b7671;
  --radio:        12px;
  --sombra:       0 6px 20px rgba(0,0,0,.08);
  --sombra-fuerte:0 10px 30px rgba(0,0,0,.18);
  --trans:        .18s ease;
}

/*=====================================================================
  TIPOGRAFÍA
=====================================================================*/
body,
.content-wrapper,
.main-sidebar,
.main-footer {
  font-family: "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/*=====================================================================
  BOTONES
=====================================================================*/
.btn {
  border-radius: var(--radio);
  transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
  font-weight: 600;
  letter-spacing: .2px;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sombra); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(63,226,45,.45); outline-offset: 2px; }

.btn-primary,
.btn-success {
  background: linear-gradient(135deg, var(--verde) 0%, var(--verde-osc) 100%);
  border-color: var(--verde-osc);
  color: #06210b;
}
.btn-primary:hover,
.btn-success:hover {
  background: linear-gradient(135deg, var(--verde-osc) 0%, var(--verde) 100%);
  color: #06210b;
}

.btn-dark,
.btn-default.btn-flat {
  background: var(--negro);
  color: #fff;
  border: none;
}
.btn-dark:hover { background: var(--negro-2); color: var(--verde); }

/*=====================================================================
  CAJAS / CARDS
=====================================================================*/
.box {
  border-radius: var(--radio);
  border: 1px solid var(--gris-borde);
  box-shadow: var(--sombra);
  border-top-width: 3px;
  transition: box-shadow var(--trans), transform var(--trans);
}
.box:hover { box-shadow: var(--sombra-fuerte); }
.box.box-primary,
.box.box-success { border-top-color: var(--verde); }
.box-header { border-bottom: 1px solid var(--gris-borde); }
.box-header .box-title { font-weight: 700; letter-spacing: .3px; }

.small-box {
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.small-box:hover { transform: translateY(-2px); box-shadow: var(--sombra-fuerte); }
.small-box > .inner h3 { font-weight: 800; }

/*=====================================================================
  SIDEBAR
=====================================================================*/
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background: linear-gradient(180deg, var(--negro) 0%, var(--negro-2) 100%);
}
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li:hover > a {
  background: rgba(63,226,45,.10);
  border-left: 3px solid var(--verde);
  color: #fff;
}
.skin-blue .sidebar-menu > li > a { transition: background var(--trans), border-color var(--trans); }
.skin-blue .sidebar a { color: #cfd6d0; }

.skin-blue .main-header .navbar,
.skin-blue .main-header .logo {
  background: var(--negro);
}
.skin-blue .main-header .logo:hover { background: var(--negro-2); }
.skin-blue .main-header .logo b,
.skin-blue .main-header .logo { color: var(--verde); }

/*=====================================================================
  TABLAS
=====================================================================*/
.table > thead > tr > th {
  border-bottom: 2px solid var(--verde);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--texto-suave);
}
.table-hover > tbody > tr:hover { background: rgba(63,226,45,.06); }
.dataTables_wrapper .dt-buttons .btn { border-radius: 8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--verde) !important;
  border-color: var(--verde-osc) !important;
  color: #06210b !important;
  border-radius: 8px;
}

/*=====================================================================
  FORMULARIOS
=====================================================================*/
.form-control {
  border-radius: 10px;
  border: 1px solid var(--gris-borde);
  box-shadow: none;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.form-control:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(63,226,45,.18);
}
label { color: var(--texto); }

/*=====================================================================
  LOGIN
=====================================================================*/
.login-box .login-box-body {
  border-radius: 18px !important;
  box-shadow: var(--sombra-fuerte);
  backdrop-filter: blur(2px);
}
.login-box .btn {
  border-radius: 12px !important;
}

/*=====================================================================
  BADGES / LABELS
=====================================================================*/
.label-success,
.badge.bg-green,
.bg-green { background: var(--verde) !important; color: #06210b !important; }
.text-green { color: var(--verde-osc) !important; }

/*=====================================================================
  SCROLLBAR
=====================================================================*/
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--verde-osc); border-radius: 8px; }
::-webkit-scrollbar-track { background: #e9ede9; }

/*=====================================================================
  UTILIDADES
=====================================================================*/
.sombra-suave { box-shadow: var(--sombra); }
.redondeado  { border-radius: var(--radio); }
.acento-verde { color: var(--verde-osc); }

/*=====================================================================
  RESPONSIVE
=====================================================================*/
@media (max-width: 767px) {
  .box { border-radius: 10px; }
  .btn { padding: 8px 14px; }
  .content-header > h1 { font-size: 1.4em; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .box, .small-box { transition: none; }
  .btn:hover, .small-box:hover { transform: none; }
}

/*=====================================================================
  MODO OSCURO — se activa con <html data-theme="dark"> (toggle en cabezote)
=====================================================================*/
html[data-theme="dark"] body,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .wrapper {
  background: #0e120f !important;
  color: #dfe6e0;
}
html[data-theme="dark"] .box,
html[data-theme="dark"] .small-box,
html[data-theme="dark"] .nav-tabs-custom,
html[data-theme="dark"] .modal-content {
  background: #171d18 !important;
  border-color: #24302a !important;
  color: #dfe6e0;
}
html[data-theme="dark"] .box-header,
html[data-theme="dark"] .box-footer {
  background: #171d18 !important;
  border-color: #24302a !important;
  color: #dfe6e0;
}
html[data-theme="dark"] .box-title,
html[data-theme="dark"] .content-header > h1 { color: #f0f4f0; }

html[data-theme="dark"] .table,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > thead > tr > th {
  color: #dfe6e0;
  border-color: #24302a;
}
html[data-theme="dark"] .table-hover > tbody > tr:hover { background: rgba(63,226,45,.10); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: #141a15; }

html[data-theme="dark"] .form-control {
  background: #10160f;
  border-color: #2a352d;
  color: #eaf0ea;
}
html[data-theme="dark"] .form-control:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(63,226,45,.22);
}
html[data-theme="dark"] .btn-default {
  background: #1d251f;
  color: #dfe6e0;
  border-color: #2a352d;
}
html[data-theme="dark"] .content-header { background: transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #141a15; }
html[data-theme="dark"] a { color: #7ef06f; }
html[data-theme="dark"] .text-muted { color: #8fa093 !important; }