/* Theme toggle */
.dc-theme-toggle{
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.dc-theme-toggle:hover{ background: rgba(33,80,91,.08); }
.dc-theme-toggle:active{ transform: translateY(1px); }
.dc-theme-toggle__icon{
  position: absolute;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--text);
  transition: opacity .2s ease, transform .2s ease;
}
.dc-theme-toggle__icon svg{
  width: 18px;
  height: 18px;
  display: block;
}
.dc-theme-toggle__icon--sun{
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.dc-theme-toggle__icon--moon{
  opacity: 0;
  transform: scale(.7) rotate(30deg);
}
:root[data-theme="dark"] .dc-theme-toggle{
  background: rgba(255,255,255,.06);
}
:root[data-theme="dark"] .dc-theme-toggle__icon--sun{
  opacity: 0;
  transform: scale(.7) rotate(-30deg);
}
:root[data-theme="dark"] .dc-theme-toggle__icon--moon{
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
/* =========================================================
   RESET + BASE
========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* =========================================================
   VARIABLES
========================================================= */
:root{
  /* Layout */
  --sidebar-collapsed: 64px;   /* rail de iconos */
  --sidebar-expanded: 276px;   /* rail 64 + panel de categoria 212 */
  --collapsed-item: 50px;
  --nav-item-h: 50px;

  --header-h: 64px;
  --header-bg: #fff;
  --header-border: rgba(28,31,35,.10);
  --header-shadow: 0 5px 5px rgba(0,0,0,.1);
  --header-pad-x: 18px;

  --header-top-gap: 14px;
  --header-right-gap: 50px;
  --header-left-gap: 50px;
  --header-radius: 18px;

  --content-max: 2000px;

  /* Breakpoints & helpers */
  --bp-mobile: 900px;
  --overlay: rgba(0,0,0,.35);

  /* Spacing */
  --pad-x: 10px;
  --pad-y: 24px;
  --row-gap: 6px;
  --page-bottom-gap: 110px;
  --page-bottom-gap-mobile: 70px;

  /* Colors */
  --green: #21505b;
  --green-soft: rgba(33,80,91,.08);
  --primary: var(--green);
  --secondary: #c15d1a;
  --secondary-soft: rgba(193,93,26,.10);
  --text: #1c1f23;
  --muted: rgba(28,31,35,.65);

  /* Surfaces */
  --surface: #ffffff;
  --surface-2: #f7f9fa;
  --surface-3: #edf1f4;
  --input-bg: rgba(255,255,255,.9);


  /* Radius & shadow */
  --radius: 18px;
  --radius-pill: 999px;
  --shadow: 0 5px 5px rgba(0,0,0,.1);

  /* Icons */
  --icon-size: 26px;

  /* App background */
  --app-bg-base: #f5f7f8;
  --app-bg-1: rgba(33,80,91,.1);
  --app-bg-2: rgba(2,140,89,.1);
  --app-bg-3: rgba(28,31,35,.1);
  --app-bg-4: rgba(255,255,255,.6);

  --btn-h: 34px;
  --btn-r: 999px;

  --border: rgba(28,31,35,.12);

  --danger: #c0392b;
  --danger-soft: rgba(192,57,43,.12);
}


/* =========================================================
   THEME (dark)
========================================================= */
:root[data-theme="dark"]{
  color-scheme: dark;
  --text: #e7ebf0;
  --muted: rgba(231,235,240,.65);
  --border: rgba(231,235,240,.12);
  --shadow: 0 8px 20px rgba(0,0,0,.55);

  --app-bg-base: #12161a;
  --app-bg-1: rgba(33,80,91,.18);
  --app-bg-2: rgba(2,140,89,.12);
  --app-bg-3: rgba(255,255,255,.04);
  --app-bg-4: rgba(0,0,0,.35);

  --surface: #151a20;
  --surface-2: #1b222a;
  --surface-3: #101419;
  --input-bg: rgba(21,26,32,.95);

  --header-bg: #151a20;
  --header-border: rgba(231,235,240,.12);
}

:root[data-theme="dark"] body{
  background: #12161a;
  color: var(--text);
}

:root[data-theme="dark"] .dc-header,
:root[data-theme="dark"] .dc-sidebar,
:root[data-theme="dark"] .dc-card,
:root[data-theme="dark"] .dc-dashbar,
:root[data-theme="dark"] .dc-hnotif__menu,
:root[data-theme="dark"] .dc-huser__menu,
:root[data-theme="dark"] .dc-hdrop__menu,
:root[data-theme="dark"] .dc-mselect__panel{
  background: var(--surface);
  border-color: var(--border);
}

:root[data-theme="dark"] .dc-hcenter{
  background: rgba(255,255,255,.04);
  border-color: var(--border);
}

:root[data-theme="dark"] .dc-input,
:root[data-theme="dark"] .dc-ptools__select{
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="dark"] .dc-label{
  color: var(--muted);
}

:root[data-theme="dark"] .dc-ptable,
:root[data-theme="dark"] .dc-ptable td{
  color: var(--text);
}

:root[data-theme="dark"] .dc-ptable th{
  color: var(--muted);
}

:root[data-theme="dark"] .swal2-popup{
  background: var(--surface);
  color: var(--text);
}

:root[data-theme="dark"] .swal2-styled.swal2-confirm,
:root[data-theme="dark"] .swal2-styled.swal2-cancel{
  color: #fff;
}



:root[data-theme="dark"] .swal2-styled.swal2-cancel{
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}


:root[data-theme="dark"] .dc-ptools__select option,
:root[data-theme="dark"] .dc-input option{
  background: var(--surface);
  color: var(--text);
}



:root[data-theme="dark"] select,
:root[data-theme="dark"] .dc-ptools__select,
:root[data-theme="dark"] .dc-input{
  color: var(--text);
}
:root[data-theme="dark"] select{ color-scheme: dark; }



:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] .dc-input[type="date"]{
  color-scheme: dark;
}


:root[data-theme="dark"] .dc-op-inputicon__btn img{
  filter: brightness(0) invert(1);
  opacity: .95;
}





:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] .dc-input[type="date"]{
  color-scheme: dark;
  padding-right: 36px;
  background-image:
    linear-gradient(transparent, transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M8 2v4M16 2v4M3 9h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .dc-input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: 0 !important;
}

:root[data-theme="dark"] img[src*="DC_menu.svg"],
:root[data-theme="dark"] img[src*="droncore_menu.svg"]{
  filter: brightness(0) invert(1);
}

body {
  font-family: Poppins, Arial, sans-serif;
  background:
    radial-gradient(900px 520px at 15% 10%, var(--app-bg-1) 0%, transparent 100%),
    radial-gradient(760px 520px at 85% 18%, var(--app-bg-2) 0%, transparent 100%),
    radial-gradient(760px 520px at 30% 92%, var(--app-bg-3) 0%, transparent 100%),
    linear-gradient(180deg, var(--app-bg-4) 10%, var(--app-bg-base) 55%, var(--app-bg-base) 100%);
  background-attachment: fixed;
  color: var(--text);
}

/* =========================================================
   DETAILS / SUMMARY RESET
========================================================= */
details > summary{ list-style: none; }
details > summary::-webkit-details-marker{ display: none; }

/* =========================================================
   OVERLAY (MÓVIL)
========================================================= */
.dc-overlay{
  position: fixed;
  inset: 0;
  /*background: var(--overlay);*/
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 850; /* header 900, sidebar 1000 */
}
body.dc-nav-open .dc-overlay{
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   HEADER (ÚNICO)
========================================================= */
.dc-header{
  position: fixed;
  top: var(--header-top-gap);

  /* antes: left: var(--sidebar-collapsed); */
  left: calc(var(--sidebar-collapsed) + max(0px, (100% - var(--sidebar-collapsed) - var(--content-max)) / 2));

  /* antes: width: calc(100% - var(--sidebar-collapsed)); */
  width: min(calc(100% - var(--sidebar-collapsed)), var(--content-max));

  height: var(--header-h);
  background: var(--header-bg);
  border: 1px solid var(--header-border);
  border-radius: var(--header-radius);
  box-shadow: var(--header-shadow);

  z-index: 900; /* sidebar 1000, overlay 850 */
}

.dc-header__inner{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 14px;
  padding: 0 var(--header-pad-x);
}

.dc-header__left,
.dc-header__center,
.dc-header__right{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dc-header__left{ justify-content: flex-start; }
.dc-header__center{ justify-content: center; }
.dc-header__right{ justify-content: flex-end; }

/* Burger: existe siempre, se muestra solo <900px */
.dc-burger{
  display: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  place-items: center;
  font-size: 20px;
  color: var(--text);
}
.dc-burger:hover{ background: var(--green-soft); }

/* Botón icono (campana) */
.dc-hiconbtn{
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--text);
}
.dc-hiconbtn:visited{ color: var(--text); }
.dc-hiconbtn:hover{ background: rgba(0,0,0,.04); }
.dc-hiconbtn__icon{ width: 26px; height: 26px; object-fit: contain; opacity: .9; }
.dc-hiconbtn__badge{
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  background: var(--green);
  color: #fff;
}

/* Breadcrumb 2 líneas (detalle) */
.dc-hcrumb{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 16px;
}
.dc-hcrumb__top{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.dc-hcrumb__bottom{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-banner-ajena{  display: inline-flex;  align-items: center;  gap: 6px;  margin-left: 12px;  padding: 6px 16px;  border-radius: 10px;  background: var(--secondary);  color: #fff;  font-size: 13px;  font-weight: 800;  letter-spacing: 0.04em;  white-space: nowrap;}
.dc-hcrumb:hover{ background: rgba(0,0,0,.03); }

/* Rango: label fuera + dropdown */
.dc-hrange{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dc-hrange__top{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
  padding-left: 2px;
}

/* Dropdown rango */
.dc-hdrop{ position: relative; }
.dc-hdrop__trigger{
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.02);
}
.dc-hdrop__trigger:hover{ background: rgba(0,0,0,.04); }
.dc-hdrop__value{ font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.dc-hdrop__caret{ font-size: 14px; color: var(--muted); transform: translateY(1px); }
.dc-hdrop__menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 240px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid rgba(28,31,35,.10);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  z-index: 950;
}
.dc-hdrop__item{
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  color: var(--text);
}
.dc-hdrop__item:hover{ background: var(--green-soft); }
.dc-hdrop:not([open]) .dc-hdrop__menu{ display: none; }

/* Centro: reloj + meteo */
.dc-hcenter{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 16px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(28,31,35,.08);
}
.dc-clock{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 8px;
  border-right: 1px solid rgba(28,31,35,.10);
  min-width: 110px;
}
.dc-clock__time{
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: .2px;
}
.dc-clock__meta{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.dc-weather{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
}
.dc-weather__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(33,80,91,.10);
  color: var(--green);
  font-size: 18px;
  line-height: 1;
}
.dc-weather__info{
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
  min-width: 0;
}
.dc-weather__temp{
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}
.dc-weather__desc{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Usuario dropdown */
.dc-huser{ position: relative; }
.dc-huser__trigger{
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 16px;
}
.dc-huser__trigger:hover{ background: rgba(0,0,0,.04); }

/* Acceso rápido a cloud.droncore.com (junto al avatar). Solo se renderiza
   cuando $_SESSION['cloud_activo'] === 1 (ver nuevo/partials/header.php). */
.dc-hcloud{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-right: 8px;
  border-radius: 16px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--green, #21505b);
  background: rgba(33,80,91,.08);
  transition: background .15s, transform .15s;
}
.dc-hcloud:hover{
  background: rgba(33,80,91,.16);
  text-decoration: none;
  color: var(--green, #21505b);
}
.dc-hcloud i{ font-size: 14px; }
@media (max-width: 720px){
  .dc-hcloud__label{ display: none; }
  .dc-hcloud{ padding: 6px 10px; }
}

/* Acceso rápido a meteo.droncore.com (junto al botón de Cloud). Solo se
   renderiza cuando $_SESSION['meteo_activo'] === 1 (ver nuevo/partials/header.php). */
.dc-hmeteo{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-right: 8px;
  border-radius: 16px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: #0277bd;
  background: rgba(2,119,189,.08);
  transition: background .15s, transform .15s;
}
.dc-hmeteo:hover{
  background: rgba(2,119,189,.16);
  text-decoration: none;
  color: #0277bd;
}
.dc-hmeteo i{ font-size: 14px; }
@media (max-width: 720px){
  .dc-hmeteo__label{ display: none; }
  .dc-hmeteo{ padding: 6px 10px; }
}
.dc-huser__avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(33,80,91,.10);
  color: var(--green);
  font-weight: 800;
}
.dc-huser__info{ display: flex; flex-direction: column; line-height: 1.1; min-width:0; max-width:220px; }
.dc-huser__name{ font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-huser__role{ font-size: 12px; color: var(--muted); white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-huser__caret{
  font-size: 14px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(1px) rotate(0deg);
  transition: transform .3s ease;
}
.dc-huser[open] .dc-huser__caret{
  transform: translateY(1px) rotate(180deg);
}

.dc-huser__menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(28,31,35,.10);
  border-radius: 18px;
  box-shadow: 0 5px 5px rgba(0,0,0,.1);
  z-index: 950;
}
.dc-huser__item{
  display: block;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  color: var(--text);
}
.dc-huser__item:hover{ background: var(--green-soft); }
.dc-huser__divider{ height: 1px; background: rgba(28,31,35,.10); margin: 6px; }
.dc-huser__item.is-danger{ color: rgba(220,0,0,.85); }
.dc-huser:not([open]) .dc-huser__menu{ display: none; }

/* Selector de idioma (panel v3) — mismo estilo que Lite */
.dc-huser__footrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px 6px;
}
.dc-lite-lang__flags{
  display:inline-flex;
  gap:8px;
  line-height:1;
}
.dc-lite-lang__flags a{
  width:22px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:5px;
  opacity:.72;
  padding:1px;
}
.dc-lite-lang__flags a.is-active{
  border-color:var(--secondary);
  opacity:1;
}
.dc-lite-lang__flags img{
  width:18px;
  height:12px;
  display:block;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}

/* Notificaciones dropdown */
.dc-hnotif{ position: relative; }
.dc-hnotif__menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: #fff;
  border: 1px solid rgba(28,31,35,.10);
  border-radius: 18px;
  box-shadow: 0 5px 5px rgba(0,0,0,.1);
  padding: 8px;
  z-index: 950;
}
.dc-hnotif__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 8px 10px;
}
.dc-hnotif__title{ font-size: 14px; font-weight: 800; color: var(--text); }
.dc-hnotif__action{
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 8px;
  border-radius: 12px;
}
.dc-hnotif__action:hover{ background: var(--green-soft); color: var(--text); }

.dc-hnotif__list{
  max-height: 320px;
  overflow: auto;
  padding: 6px;
}
.dc-hnotif__list::-webkit-scrollbar{ width: 3px; }
.dc-hnotif__list::-webkit-scrollbar-thumb{ background-color: rgba(33,80,91,.45); border-radius: 999px; }
.dc-hnotif__list::-webkit-scrollbar-track{ background: transparent; }

.dc-hnotif__item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-decoration: none;
  color: var(--text);
  padding: 10px 10px;
  border-radius: 14px;
}
.dc-hnotif__item:hover{ background: var(--green-soft); }
.dc-hnotif__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 4px;
  background: rgba(28,31,35,.18);
  flex: 0 0 10px;
}
.dc-hnotif__item.is-unread .dc-hnotif__dot{ background: var(--green); }
.dc-hnotif__content{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dc-hnotif__text{
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dc-hnotif__meta{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-hnotif__footer{
  padding: 8px 10px 10px 10px;
  border-top: 1px solid rgba(28,31,35,.08);
}
.dc-hnotif__all{
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  color: var(--green);
  padding: 10px 12px;
  border-radius: 14px;
}
.dc-hnotif__all:hover{ background: rgba(33,80,91,.10); }
.dc-hnotif:not([open]) .dc-hnotif__menu{ display: none; }

/* =========================================================
   SIDEBAR (DESKTOP)
========================================================= */
.dc-sidebar{
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: var(--sidebar-collapsed);
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .18s ease, transform .2s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--green) transparent;
  z-index: 1000;
}

/* Hover: se abre (desktop) */
.dc-sidebar.is-expanded{ width: var(--sidebar-expanded); }

/* Scrollbar WebKit */
.dc-sidebar::-webkit-scrollbar{ width: 3px; }
.dc-sidebar::-webkit-scrollbar-track{ background: transparent; }
.dc-sidebar::-webkit-scrollbar-thumb{ background-color: rgba(33,80,91,.55); border-radius: 999px; }
.dc-sidebar::-webkit-scrollbar-thumb:hover{ background-color: rgba(33,80,91,.80); }

/* Marca + logos */
.dc-sidebar__brand{
  display: grid;
  place-items: center;
  padding: 22px 10px 10px 10px;
  text-decoration: none;
}

.dc-brand__logo{
  display: block;
  height: 22px;
  width: auto;
}

.dc-brand__logo--compact{ display: block; }
.dc-brand__logo--full{ display: none; }

.dc-sidebar.is-expanded .dc-brand__logo--compact{ display: none; }
.dc-sidebar.is-expanded .dc-brand__logo--full{ display: block; }

body.dc-nav-open .dc-brand__logo--compact{ display: none; }
body.dc-nav-open .dc-brand__logo--full{ display: block; }

/* Logo operadora en sidebar */
.dc-sidebar__brand--oplogo{ padding: 4px 10px 0; }
.dc-sidebar__brand--oplogo + .dc-nav{ padding-top: 8px; }
.dc-sidebar__brand--oplogo .dc-brand__logo{
  height: auto;
  width: 100%;
  max-width: 50px;
  max-height: 50px;
  object-fit: contain;
  border-radius: 6px;
  transition: max-width .2s ease, max-height .2s ease;
}
.dc-sidebar.is-expanded .dc-sidebar__brand--oplogo .dc-brand__logo,
body.dc-nav-open .dc-sidebar__brand--oplogo .dc-brand__logo{
  max-width: 140px;
  max-height: 140px;
}

/* Menú */
.dc-nav{
  padding: 18px var(--pad-x) 0 var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  flex: 1 1 auto;
}

/* Item base */
.dc-nav__item{
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--nav-item-h);
  width: 100%;
  text-decoration: none;
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0 10px;
  border-radius: 25px;
}
.dc-nav__item:hover{ background: var(--green-soft); }
.dc-nav__item.is-active{ background: rgba(33,80,91,.10); }

.dc-nav__item.dc-nav__item--affiliated-return{
  background: rgba(230,81,0,.12) !important;
}

.dc-nav__item.dc-nav__item--affiliated-return:hover{
  background: rgba(230,81,0,.16) !important;
}

.dc-nav__icon{
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: block;
  object-fit: contain;
}


.dc-nav__text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Colapsado: texto fuera */
body:not(.dc-nav-open) .dc-sidebar:not(.is-expanded) .dc-nav__text{ display: none; }

/* Colapsado: TODOS los items miden igual */
body:not(.dc-nav-open) .dc-sidebar:not(.is-expanded) .dc-nav__item{
  height: var(--nav-item-h);
  padding: 0;
  justify-content: center;
  align-items: center;
}

/* Bottom */
.dc-sidebar__bottom{
  margin-top: auto;
  padding: 24px var(--pad-x) 22px var(--pad-x);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
}

/* CTA */
.dc-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--green);
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 25px;
}
.dc-cta__text{ white-space: nowrap; }

.dc-cta.is-enterprise{
  background: linear-gradient(135deg, #d6dbe2 0%, #b5beca 100%);
  color: #1c1f23;
}

.dc-cta.is-enterprise .dc-cta__text{
  color: #1c1f23;
}

.dc-cta.is-simulated{
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  color: #fff;
}
.dc-cta.is-simulated .dc-cta__text{
  color: #fff;
  font-weight: 600;
}

/* Corona: sin animación en hover */

/* Logout */
.dc-logout{
  display: flex;
  text-decoration: none;
  justify-content: center;
  color: var(--muted);
  font-size: 16px;
  padding: 8px 10px;
  border-radius: 20px;
}
.dc-logout:hover{
  background: rgba(0,0,0,.04);
  color: var(--text);
}

/* Colapsado: CTA text y logout fuera */
body:not(.dc-nav-open) .dc-sidebar:not(.is-expanded) .dc-cta__text,
body:not(.dc-nav-open) .dc-sidebar:not(.is-expanded) .dc-logout{ display: none; }
body:not(.dc-nav-open) .dc-sidebar:not(.is-expanded) .dc-cta{ justify-content: center; padding: 12px 0; }

/* Submenús */
.dc-nav__group{
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}
body:not(.dc-nav-open) .dc-sidebar:not(.is-expanded) .dc-nav__group{ display: contents; }

.dc-nav__caret{
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 14px;
  transform: translateY(1px);
}

.dc-submenu{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 28px;
  padding-left: 10px;
  border-left: 1px solid rgba(28,31,35,.10);
}
.dc-submenu__item{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  padding: 8px 10px;
  border-radius: 18px;
}
.dc-submenu__item:hover{ background: var(--green-soft); color: var(--text); }
.dc-submenu__icon{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
}


body:not(.dc-nav-open) .dc-sidebar:not(.is-expanded) .dc-nav__caret{ display: none; }
body:not(.dc-nav-open) .dc-sidebar:not(.is-expanded) .dc-submenu{ display: none; }

.dc-submenu[hidden]{ display: none !important; }
.dc-submenu:not([hidden]){ display: flex !important; }

/* Item compuesto (link + caret) */
.dc-nav__item--has-submenu{
  padding: 0;
  height: var(--nav-item-h);
  overflow: hidden;
  border-radius: 25px;
}
.dc-nav__link{
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  border-radius: 25px;
  color: inherit;
  text-decoration: none;
}
.dc-nav__caret-btn{
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 100%;
  padding: 0 16px;
  border-radius: 25px;
  color: inherit;
  position: relative;
  isolation: isolate;
}
.dc-nav__item--has-submenu:hover{ background: var(--green-soft); }
.dc-nav__item--has-submenu:hover .dc-nav__link,
.dc-nav__item--has-submenu:hover .dc-nav__caret-btn{ background: transparent; }

body:not(.dc-nav-open) .dc-sidebar:not(.is-expanded) .dc-nav__item--has-submenu{
  height: var(--nav-item-h);
  justify-content: center;
}
body:not(.dc-nav-open) .dc-sidebar:not(.is-expanded) .dc-nav__item--has-submenu .dc-nav__link{
  height: 100%;
  width: 100%;
  padding: 0;
  justify-content: center;
  align-items: center;
}
body:not(.dc-nav-open) .dc-sidebar:not(.is-expanded) .dc-nav__caret-btn{ display: none; }

.dc-nav__caret-btn::before{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 20px;
  background: rgba(33,80,91,.10);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .12s ease, transform .12s ease;
  z-index: -1;
}
.dc-nav__caret-btn:hover::before,
.dc-nav__caret-btn:focus-visible::before{
  opacity: 1;
  transform: scale(1);
}
.dc-nav__caret-btn:hover .dc-nav__caret{
  color: rgba(28,31,35,.75);
}

/* =========================================================
   CONTENT
   - Desktop: deja hueco sidebar colapsado + header
   UNICO CAMBIO REAL: este bloque
========================================================= */
.dc-content{
  /* Solo el hueco del sidebar */
  margin-left: var(--sidebar-collapsed);
  transition: margin-left .18s ease;

  /* Alineaci�n EXACTA con el header */
  padding-left: var(--header-left-gap);
  padding-right: var(--header-right-gap);

  width: min(100%, var(--content-max));
  margin-right: auto;

  /* Debajo del header fijo */
  padding-top: 20px;

  /* Aire inferior (aj�stalo si quieres) */
  padding-bottom: var(--page-bottom-gap);
}

/* El empuje del contenido al expandir el sidebar vive en el sistema
   body.dc-layout de mas abajo (el unico activo). */

/* El estilo del boton de colapsar sidebar vive en system-v2.css
   (.dc2-sidebar__toggle) — aqui solo queda el empuje de .dc-content. */

/* =========================================================
   RESPONSIVE (<=900px)
   - Sidebar cerrado por defecto (drawer)
   - Header full width + burger visible
   - Header: solo notifs + avatar derecha; sin center
========================================================= */
@media (max-width: 900px){

  /* Header full width */
  .dc-header{
    left: 8px;                         /* aire lateral en móvil */
    right: 8px;                        /* en vez de width:100% */
    width: auto;
    top: var(--header-top-gap);
  }
  /* Burger visible */
  .dc-burger{
    display: grid;
  }

  /* Rejilla del header: 2 columnas */
  .dc-header__inner{
    grid-template-columns: 1fr auto;
    padding: 0 8px;
  }

  /* Ocultamos centro (reloj/meteo) en móvil */
  .dc-header__center{
    display: none;
  }

  /* En móvil NO ocultamos el left entero: ahí va la burger */
  .dc-header__left{
    gap: 10px;
  }

  /* Ocultamos crumb/rango en móvil (solo burger) */
  .dc-hcrumb,
  .dc-hrange{
    display: none;
  }

  /* Usuario: solo avatar (sin nombre/rol/caret) */
  .dc-huser__info{ display: none; }
  .dc-huser__caret{ display: none; }

  /* Drawer sidebar */
  .dc-sidebar{
    width: var(--sidebar-expanded);
    transform: translateX(-105%);
  }
  body.dc-nav-open .dc-sidebar{
    transform: translateX(0);
  }


  .dc-content{
    margin-left: 0;

    /* En móvil: alinea con header (12px) */
    padding-left: 8px;
    padding-right: 8px;

    padding-top: 20px;
    padding-bottom: var(--page-bottom-gap-mobile);
  }

  /* Al abrir drawer: forzar expandido real */
  body.dc-nav-open .dc-nav__text{ display: inline; }
  body.dc-nav-open .dc-nav__item{
    height: var(--nav-item-h);
    padding: 0 10px;
    justify-content: flex-start;
    align-items: center;
  }
  body.dc-nav-open .dc-nav__item--has-submenu{
    height: var(--nav-item-h);
    justify-content: flex-start;
  }
  body.dc-nav-open .dc-nav__item--has-submenu .dc-nav__link{
    height: 100%;
    padding: 0 10px;
    justify-content: flex-start;
    align-items: center;
  }
  body.dc-nav-open .dc-nav__caret-btn{ display: inline-flex; }

  body.dc-nav-open .dc-cta__text{ display: inline; }
  body.dc-nav-open .dc-logout{ display: flex; }

  /* En móvil, el group debe ser caja normal */
  .dc-sidebar:not(.is-expanded) .dc-nav__group{
    display: flex;
    flex-direction: column;
  }

  /* Popups: que no se salgan por pantalla */
  .dc-hnotif__menu,
  .dc-huser__menu{
    width: min(340px, calc(100vw - 24px));
    right: 0;
    left: auto;
  }
}

/* =========================================================
   LAYOUT GRID (dc-layout)
========================================================= */
/*
  Objetivo:
  - Sidebar fijo a la izquierda (ya existe)
  - Header en su propia "caja" arriba (NO fixed)
  - Contenido en su propia "caja" debajo (con scroll interno)
  - Así NUNCA hay contenido pasando por debajo del header, ni del navbar sticky de cada página
*/

body.dc-layout{
  height: auto;
  overflow: auto;
  --layout-w: calc(100% - var(--sidebar-collapsed));
  /* Antes centraba el contenido dentro de --content-max (2000px), lo que
     en pantallas normales no llegaba a activarse pero cuando lo hacia
     dejaba el mismo hueco a cada lado del CONTENIDO -- visualmente
     asimetrico igualmente, porque el sidebar ya "come" espacio real a
     la izquierda que no tiene equivalente a la derecha. Sin centrado:
     el contenido usa todo el ancho disponible, mismo padding fijo
     (--header-left-gap/--header-right-gap) a los dos lados. */
  --layout-x: 0px;
  --layout-shell-w: var(--layout-w);
  --layout-inner-x: calc(var(--layout-x) + var(--header-left-gap));
  --layout-inner-w: calc(var(--layout-shell-w) - var(--header-left-gap) - var(--header-right-gap));
}

/* Columna principal a la derecha del sidebar */
body.dc-layout .dc-main{
  margin-left: var(--sidebar-collapsed);
  width: calc(100% - var(--sidebar-collapsed));
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .18s ease, width .18s ease;
}

/* Caja del header (aire superior + laterales) */
body.dc-layout .dc-headerwrap{
  padding-top: var(--header-top-gap);
  padding-left: 0;
  padding-right: 0;
  flex: 0 0 auto;
  color: var(--text);
}

/* Header dentro del flujo (sin offsets raros) */
body.dc-layout .dc-header{
  position: fixed;
  top: var(--header-top-gap);
  /* Anclado por los dos lados (sin width calculado): el mismo hueco
     que el contenido a la izquierda del sidebar y a la derecha del
     viewport, sea cual sea el ancho del sidebar. */
  left: calc(var(--sidebar-collapsed) + var(--header-left-gap));
  right: var(--header-right-gap);
  width: auto;
  z-index: 900; /* por encima del contenido */
  transition: left .18s ease;
}

/* Sidebar fijado en expandido (boton toggle): --layout-w recalcula con
   el ancho expandido, y --layout-x/--layout-shell-w (definidas en
   body.dc-layout de arriba con var(--layout-w)) heredan el nuevo valor
   automaticamente en cualquier elemento -- solo hace falta corregir
   .dc-main/.dc-header, que usan var(--sidebar-collapsed) directamente
   en vez de las variables derivadas. .dc-content ya usa --layout-x/
   --layout-shell-w, no necesita regla propia. */
@media (min-width: 901px){
  body.dc-layout.dc-sidebar-expanded{
    --layout-w: calc(100% - var(--sidebar-expanded));
  }
  body.dc-layout.dc-sidebar-expanded .dc-main{
    margin-left: var(--sidebar-expanded);
    width: var(--layout-w);
  }
  body.dc-layout.dc-sidebar-expanded .dc-header{
    left: calc(var(--sidebar-expanded) + var(--header-left-gap));
  }
}

/* Caja de contenido: aqu� vive el scroll */
body.dc-layout .dc-content{
  /* .dc-main ya descuenta el sidebar (margin-left + width). Antes esto
     valia var(--layout-shell-w) = calc(100% - sidebar), pero ese 100%
     se resuelve contra .dc-main (no contra el viewport), asi que el
     sidebar se restaba DOS veces: hueco extra a la derecha igual al
     ancho del sidebar, y al expandir el contenido encogia por los dos
     lados. El header no lo sufria porque es position:fixed (su 100% es
     el viewport). Ahora: llena .dc-main, mismo padding a ambos lados. */
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--header-left-gap);
  padding-right: var(--header-right-gap);
  width: auto;
  /*distancia entre header y navbar*/
  padding-top: 20px;
  padding-bottom: var(--page-bottom-gap);

  overflow: visible;
  flex: 1 1 auto;
  min-height: 0; /* clave para que el overflow funcione en flex */
}

/* Móvil: sidebar drawer => la columna principal ocupa todo */
@media (max-width: 900px){
  body.dc-layout .dc-header{
    left: 8px;
    right: 8px;
    width: auto;
    top: var(--header-top-gap);
  }

  body.dc-layout{
    --layout-w: 100%;
    --layout-x: 0px;
    --layout-shell-w: 100%;
    --layout-inner-x: 0px;
    --layout-inner-w: calc(100% - 24px);
  }

  body.dc-layout .dc-main{
    margin-left: 0;
    width: 100%;
  }

  body.dc-layout .dc-content{
    width: 100%;
    margin-left: 0;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 20px;
    padding-bottom: var(--page-bottom-gap-mobile);
  }
}

/* =========================================================
   BUTTONS (global)
========================================================= */
/* Base */
.dc-btn{
  height: var(--btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: var(--btn-r);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: background .14s ease, border-color .14s ease, transform .06s ease;
}
a.dc-btn, a.dc-btn:hover, a.dc-btn:focus, a.dc-btn:visited, a.dc-btn:active{ text-decoration: none; }
.dc-btn:active{ transform: translateY(1px); }

/* Primary */
.dc-btn--primary{
  background: var(--primary);
  border-color: transparent;
  color: #fff;
  text-decoration: none;
}
.dc-btn--primary:hover{ filter: brightness(0.98); }

/* Secondary (outline neutro) */
.dc-btn--secondary{
  background: var(--input-bg);
  border-color: var(--border);
}
.dc-btn--secondary:hover{
  background: rgba(33,80,91,.06);
  border-color: rgba(33,80,91,.18);
}

/* Ghost */
.dc-btn--ghost{
  background: transparent;
  border-color: transparent;
}
.dc-btn--ghost:hover{ background: rgba(28,31,35,.06); }

/* Danger */
.dc-btn--danger{
  background: var(--danger);
  border-color: transparent;
  color:#fff;
}
.dc-btn--danger:hover{ filter: brightness(0.98); }

/* Upload / Attention (cuando falta doc) */
.dc-btn--attention{
  background: var(--secondary-soft);
  border-color: rgba(193,93,26,.35);
  color: var(--text);
}
.dc-btn--attention:hover{
  background: rgba(193,93,26,.18);
  border-color: rgba(193,93,26,.45);
}

/* SM variant */
.dc-btn--sm{
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 10px;
}

.dc-btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Required fields (global) */
.dc-required{
  background: var(--secondary-soft);
}
.dc-required.is-filled{
  background: var(--input-bg);
}


/* =========================================================
   Inputs / Selects (look igual a dc-ptools__select)
========================================================= */
.dc-input{
  height: 34px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 10px;
  background: var(--input-bg);
  font-family: Poppins, "Segoe UI", system-ui, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis; /* visual */
  white-space: nowrap;
}

.dc-input:focus{
  border-color: rgba(33,80,91,.35);
  box-shadow: 0 0 0 3px rgba(33,80,91,.10);
}

.dc-input.dc-required:not(.is-filled){
  background: var(--secondary-soft);
}

/* Mismo fallback para popups SweetAlert2: en Edge, Poppins no siempre renderiza
   la Ñ correctamente y aparece como ñ minúscula o N sin tilde. */
.swal2-popup,
.swal2-title,
.swal2-html-container{
  font-family: Poppins, "Segoe UI", system-ui, Arial, sans-serif;
}


/* Labels (mismo tono que usas en tablas) */
.dc-label{
  display:block;
  font-size:12px;
  font-weight:800;
  color: var(--muted);
  margin-bottom: 10px;
}

.dc-labelrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 14px;
}

/* =========================================================
   Calendario
========================================================= */

/* el overflow hidden tiene que ganar a cualquier .dc-frame global */
.dc-frame--opscal{
  overflow: hidden !important;
  min-height: 0;
}

/* padding REAL del calendario */
.dc-opscal{
  height: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
  position: relative; /* para el picker */
}

.dc-opscal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(33,80,91,.28);
  border: 1px solid rgba(33,80,91,.35);
}

.dc-opscal__today{
  height: 30px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-size: 12px;
  font-weight: 850;
  color: rgba(28,31,35,.78);
  cursor: pointer;
  text-decoration: none;
}
.dc-opscal__today:hover{ background: rgba(33,80,91,.08); }

.dc-opscal__nav{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dc-opscal__btn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  cursor: pointer;
  text-decoration: none;
  font-weight: 900;
  color: rgba(28,31,35,.75);
}
.dc-opscal__btn:hover{ background: rgba(33,80,91,.08); }

/* label clicable */
.dc-opscal__monthbtn{
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  color: rgba(28,31,35,.78);
  white-space: nowrap;
  min-width: 110px;
  text-align: center;
  padding: 6px 10px;
  border-radius: 12px;
}
.dc-opscal__monthbtn:hover{
  background: rgba(33,80,91,.08);
}

/* Grid: DOW + 6 semanas (siempre) */
.dc-opscal__grid{
  flex: 1 1 auto;
  min-height: 0;

  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 22px repeat(6, 1fr);
  gap: 10px;

  overflow: hidden;
}

.dc-cal__dow{
  font-size: 11px;
  font-weight: 900;
  color: rgba(28,31,35,.55);
  text-align: center;
  align-self: end;
}

/* Día estilo pill */
.dc-cal__day{
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 900;
  color: rgba(28,31,35,.70);
  user-select: none;
}

.dc-cal__day.is-out{ opacity: .32; }
.dc-cal__day.is-today{
  border-color: rgba(27,119,255,.45);
  box-shadow: 0 0 0 4px rgba(27,119,255,.20);
}
.dc-cal__day.is-weekend{ background: rgba(28,31,35,.12); }

.dc-cal__paint{
  position: absolute;
  inset: 0;
  opacity: .55;
  border-radius: inherit;
  display: flex;
}

/* planificada vencida (color plano gris ↔ rojo cada 2s) */
/* estados calendario */
.dc-cal__paint--planned{ background: var(--dc-planned); }
.dc-cal__paint--open{ background: var(--dc-open); }
.dc-cal__paint--done{ background: var(--dc-done); }
.dc-cal__paint--cancelled{ background: var(--dc-cancelled); }

.dc-cal__slice{
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

.dc-cal__slice--planned{ background: var(--dc-planned); }
.dc-cal__slice--open{ background: var(--dc-open); }
.dc-cal__slice--done{ background: var(--dc-done); }
.dc-cal__slice--cancelled{ background: var(--dc-cancelled); }

/* planificada retrasada (naranja corporativo) */
.dc-cal__paint--overdue,
.dc-cal__slice--overdue{
  background: var(--secondary);
}

.dc-cal__daynum{
  position: relative;
  z-index: 2;
}

.dc-cal__day:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Tooltip del calendario */
.dc-cal-tip{
  position: fixed;
  z-index: 850;
  max-width: min(340px, calc(100vw - 24px));
  background: rgba(28,31,35,.92);
  color: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .10s ease, transform .10s ease;
}
.dc-cal-tip.is-on{ opacity: 1; transform: translateY(0); }
.dc-cal-tip__title{
  font-size: 12px;
  font-weight: 900;
  opacity: .92;
  margin-bottom: 6px;
}
.dc-cal-tip__item{
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  opacity: .96;
}
.dc-cal-tip__muted{ opacity: .78; font-weight: 800; margin-right: 6px; }
.dc-cal-tip__code{ color: var(--secondary); font-weight: 800; }

/* =========================================================
   Picker mes/año (popover)
========================================================= */
.dc-calpick{
  position: absolute;
  top: 54px;
  right: 18px;
  width: 280px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(28,31,35,.10);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
  padding: 12px;
  z-index: 60;
}

.dc-calpick[hidden]{ display:none; }

.dc-calpick__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.dc-calpick__yctrl{
  display:flex;
  align-items:center;
  gap: 8px;
}

.dc-calpick__ybtn{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.95);
  cursor: pointer;
  text-decoration: none;
  font-weight: 950;
  color: rgba(28,31,35,.78);
}
.dc-calpick__ybtn:hover{ background: rgba(33,80,91,.08); }

.dc-calpick__year{
  font-size: 12px;
  font-weight: 950;
  color: rgba(28,31,35,.78);
  min-width: 64px;
  text-align:center;
}

.dc-calpick__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dc-calpick__m{
  border: 1px solid rgba(28,31,35,.10);
  background: rgba(28,31,35,.04);
  border-radius: 12px;
  padding: 9px 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(28,31,35,.74);
  cursor: pointer;
  text-decoration: none;
  text-align:center;
}
.dc-calpick__m:hover{ background: rgba(33,80,91,.10); }
.dc-calpick__m.is-active{
  background: rgba(2,140,89,.12);
  border-color: rgba(2,140,89,.22);
  color: rgba(2,90,60,1);
}

/* =========================================================
   Calendario - responsive (global)
========================================================= */
@media (max-width: 1200px){
  .dc-calpick{
    right: 8px;
    width: min(280px, calc(100% - 24px));
  }
}

@media (max-width: 720px){
  .dc-opscal__monthbtn{ min-width: 96px; }
}

/* Popover genérico para calendarios */
.dc-datepop{
  position: absolute;
  z-index: 90;
  margin-top: 8px;
}
[data-datefield] .dc-op-inputicon{ position: relative; }

/* Tabs como links: sin subrayado */
.dc-dashtab{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.dc-dashtab.is-active{
  background: rgba(33,80,91);
  color: #fff;
}

/* =========================================================
   DC-DASHBAR responsive: tabs que envuelven en varias filas
   (evita que se corten y hace wrap en cuanto no caben)
========================================================= */
.dc-dashbar{
  overflow: visible; /* si estaba en hidden, recortaba los tabs */
}

.dc-dashbar__tabs{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  overflow: visible;
  min-width: 0;
}

/* cada botón ocupa su ancho natural y salta de línea cuando toca */
.dc-dashtab{
  flex: 0 0 auto;
  max-width: 100%;
}

/* =========================================================
   NAVBAR (dc-dashbar) - en móvil NO sticky/fixed
   - evita que corte pantalla al hacer scroll
========================================================= */
@media (max-width: 560px){
  .dc-dashbar{
    position: static !important;
    top: auto !important;
  }
}

.dc-section-title {
	margin:0;
	font-size:14px;
	font-weight:900;
	color: rgba(28,31,35,.82);
}

/* =========================================================
   VIEW TOGGLE (Tabla / Tarjetas)
   Reutilizable en UAS, Operaciones, etc.
========================================================= */
.dc-viewtoggle{
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}

.dc-viewtoggle__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(2,140,89,.1);
  text-decoration: none;
  color: rgba(28,31,35,.78);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.dc-viewtoggle__btn:hover{
  background: rgba(28,31,35,.06);
}

.dc-viewtoggle__btn.is-active,
.dc-viewtoggle__btn[aria-current="page"]{
  background: rgba(2,140,89,.12);
  border: 1px solid rgba(2,140,89,.22);
  color: rgba(28,31,35,.92);
}

/* Icon button genérico (reutiliza el look & feel de dc-op-trash) */
.dc-iconbtn{
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}
.dc-iconbtn:hover{ background: rgba(28,31,35,.06); }
.dc-iconbtn img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: .88;
}

/* Departamento: select + +btn en línea y creador debajo */
.dc-deptrow{
  display:flex;
  align-items:center;
  gap: 10px;
}
.dc-deptrow__select{ flex: 1 1 auto; min-width: 0; }

.dc-deptnew{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.dc-deptnew .dc-input{ flex: 1 1 auto; min-width: 0; }

.dc-opfilters__titlepack{
  display:flex;
  align-items: baseline;   /* alinea con la tipografía */
  gap:10px;
  flex-wrap:nowrap;
  min-width:0;
}

.dc-opfilters__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 5px;
  width: 32px;
  height: 28px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  cursor: pointer;
  text-decoration: none;

  position: relative;
  top: 1px;               /* ajuste óptico */
}

.dc-opfilters__toggle:focus,
.dc-opfilters__toggle:focus-visible{
  outline: none;
}

.dc-opfilters__toggleIcon{
  display:inline-block;
  font-weight: 900;
  line-height: 1;
  transform: rotate(90deg);
}


/* =========================================================
   SweetAlert2 (look & feel)
========================================================= */
.swal2-popup{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.4rem 1.2rem;
}
.swal2-title{
  color: var(--text);
  font-weight: 800;
}
.swal2-html-container{
  color: var(--muted);
}
.swal2-actions{
  gap: 10px;
}
.swal2-styled{
  border-radius: var(--btn-r);
  height: var(--btn-h);
  padding: 0 16px;
  font-weight: 800;
  border: 1px solid var(--border);
  box-shadow: none !important;
}
.swal2-confirm{
  background: var(--primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.swal2-cancel{
  background: rgba(255,255,255,.95) !important;
  color: var(--text) !important;
}
.swal2-styled:focus{
  box-shadow: 0 0 0 3px rgba(2,140,89,.18) !important;
}


/* =========================================================
   Form helpers (operadora)
========================================================= */
.dc-field--span3{ grid-column: span 3; }
@media (max-width: 1100px){
  .dc-field--span3{ grid-column: span 2; }
}
@media (max-width: 640px){
  .dc-field--span3{ grid-column: span 1; }
}

/* =========================================================
   SweetAlert2 (legacy class support)
========================================================= */
.swal2-confirm-button-custom{
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: var(--btn-r) !important;
  height: var(--btn-h) !important;
  padding: 0 16px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.swal2-confirm-button-custom:hover{
  filter: brightness(0.98);
}

/* Simple note box */
.dc-note{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--secondary-soft);
  border: 1px solid rgba(193,93,26,.28);
  color: var(--text);
  font-weight: 700;
}


/* Extra bottom air in content panels */
.dc-dashpanel{ padding-bottom: var(--page-bottom-gap); }
@media (max-width: 900px){
  .dc-dashpanel{ padding-bottom: var(--page-bottom-gap-mobile); }
}


:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] .dc-input[type="date"]{
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M8 2v4M16 2v4M3 9h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .dc-input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: 0 !important;
  pointer-events: none;
}
.swal2-cancel-button-custom{
  background: rgba(255,255,255,.95) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--btn-r) !important;
  height: var(--btn-h) !important;
  padding: 0 16px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.swal2-cancel-button-custom:hover{
  filter: brightness(0.98);
}