/* ============================================================
   YUCORE — Tema (capa de estilos del producto)  v2
   Marca: navy #1B3A6B · azul #2B5AA0 · rojo #E1251B · dorado #F2A900
   Carga vía aah.php (coreResourceList, peso 9999) → último en cascada
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- 1. Tokens ---------- */
:root {
  --aah-colour-brand: #2B5AA0;
  --aah-colour-brand-dark: #1B3A6B;
  --aah-button-bg: #1B3A6B;
  --aah-button-bg-hover: #122A52;
  --aah-button-bg-secondary: #e8eef7;
  --aah-button-bg-secondary-hover: #d4e0f1;
  --aah-button-colour-secondary: #1B3A6B;
  --aah-bg-layer: #f4f6fa;

  --hu-navy: #1B3A6B;
  --hu-navy-dark: #122A52;
  --hu-navy-darker: #0E2244;
  --hu-blue: #2B5AA0;
  --hu-blue-light: #5BA4D6;
  --hu-red: #E1251B;
  --hu-red-dark: #B81C14;
  --hu-gold: #F2A900;
  --hu-gold-dark: #d49600;

  --hu-bg: #f3f5f9;
  --hu-surface: #ffffff;
  --hu-border: #e4e8ef;
  --hu-text: #1f2733;
  --hu-text-muted: #66707f;

  --hu-radius: 14px;
  --hu-radius-sm: 9px;
  --hu-radius-pill: 999px;
  --hu-shadow-sm: 0 1px 2px rgba(18,42,82,.06), 0 1px 3px rgba(18,42,82,.08);
  --hu-shadow-md: 0 4px 14px rgba(18,42,82,.09), 0 2px 5px rgba(18,42,82,.06);
  --hu-shadow-lg: 0 16px 40px rgba(14,34,68,.18);
  --hu-transition: all .18s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Base / tipografía ---------- */
body, body.aah-theme, .aah-wrapper, #crm-container, .crm-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--hu-text);
  -webkit-font-smoothing: antialiased;
}
body, body.aah-theme { background: var(--hu-bg) !important; }

.crm-container h1, .crm-container h2, .crm-container h3,
#crm-container h1, #crm-container h2, #crm-container h3,
.crm-page-title, .crm-container .crm-section-title {
  font-weight: 700; letter-spacing: -.01em; color: var(--hu-navy);
}
.crm-container a, #crm-container a { color: var(--hu-blue); transition: var(--hu-transition); }
.crm-container a:hover, #crm-container a:hover { color: var(--hu-red); }

/* ============================================================
   3. BARRA SUPERIOR (menubar)  — moderna, ergonómica, de marca
   ============================================================ */
#civicrm-menu,
#crm-menubar #civicrm-menu,
body #civicrm-menu {
  background: linear-gradient(100deg, var(--hu-navy-dark) 0%, var(--hu-navy) 50%, var(--hu-blue) 135%) !important;
  border: 0 !important;
  border-bottom: 3px solid var(--hu-gold) !important;
  box-shadow: 0 2px 12px rgba(14,34,68,.22);
  font-family: 'Inter', sans-serif !important;
  min-height: 46px;
}
/* Items de primer nivel */
#civicrm-menu > li > a {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px;
  padding: 12px 15px !important;
  border-radius: 0;
  transition: var(--hu-transition);
}
#civicrm-menu > li > a:hover,
#civicrm-menu > li.crm-menu-hover > a,
#civicrm-menu > li:hover > a,
#civicrm-menu > li.menumain.highlighted > a {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
}
/* Item activo */
#civicrm-menu > li.menu-active > a { background: rgba(242,169,0,.18) !important; color:#fff !important; }

/* Iconos del menú: nítidos, alineados, dorado sutil */
#civicrm-menu i.crm-i, #civicrm-menu .crm-i,
#crm-menubar i.crm-i {
  color: #ffd97a !important;
  font-size: 14px;
  margin-right: 6px;
  vertical-align: -1px;
}
#civicrm-menu > li > a:hover i.crm-i { color: var(--hu-gold) !important; }

/* Logo YUCORE en la barra */
#civicrm-menu .crm-logo-sm, #crm-menubar .crm-logo-sm,
#civicrm-menu li.crm-logo a, #civicrm-menu img {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
#crm-menubar .crm-menubar-toggle-btn, #civicrm-menu .crm-menu-toggle { color:#fff !important; }

/* ----- Dropdowns / submenús -----
   FIX CONTRASTE: CiviCRM da a los items fondo navy (--crm-menubar-item-color).
   El texto DEBE ser claro (blanco), nunca el color de fondo. Se sobreescriben
   tambien las variables nativas del menubar para corregirlo en la raíz. */
#crm-menubar, :root {
  --crm-menubar-text-color: #ffffff;
  --crm-menubar-highlight-color: #27508c;
  --crm-menubar-highlight-text-color: #ffffff;
}
/* LOGO de la barra: símbolo YUCORE con la forma del logo (triángulo anidado).
   Versión blanca para la barra. Marco triangular hueco + triángulo interior. */
:root {
  --crm-svg-logo: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="white"><path fill-rule="evenodd" d="M50 7 L95 91 L5 91 Z M50 34 L75 80 L25 80 Z"/><path d="M50 52 L64 78 L36 78 Z"/></g></svg>');
}
/* asegurar tamaño visible del logo en la barra */
#civicrm-menu-nav .crm-logo-sm,
#civicrm-menu .crm-logo-sm {
  background-size: contain !important;
  background-position: center !important;
  width: 30px !important; height: 30px !important;
}
/* contenedor del submenú: navy un poco más oscuro para dar profundidad */
#civicrm-menu ul {
  background: var(--hu-navy-dark) !important;
  border: 0 !important;
  border-top: 3px solid var(--hu-gold) !important;
  border-radius: 0 0 var(--hu-radius-sm) var(--hu-radius-sm) !important;
  box-shadow: var(--hu-shadow-lg) !important;
  padding: 4px !important;
  margin-top: 0;
}
/* items del submenú: TEXTO BLANCO sobre navy (contraste AA) */
#civicrm-menu ul li a,
#civicrm-menu li ul li a,
#civicrm-menu ul li ul li a {
  color: #ffffff !important;
  background: transparent !important;
  border-radius: var(--hu-radius-sm) !important;
  padding: 9px 14px !important;
  font-size: 13.5px;
  font-weight: 500 !important;
  transition: var(--hu-transition);
}
/* hover / focus: fondo más claro + texto blanco, opción activa distinguible */
#civicrm-menu ul li a:hover,
#civicrm-menu ul li a:focus,
#civicrm-menu li ul li a:hover,
#civicrm-menu li ul li a:focus,
#civicrm-menu ul li.crm-menu-hover > a {
  background: #27508c !important;
  color: #ffffff !important;
  padding-left: 18px !important;
  outline: 0;
}
#civicrm-menu ul li a i.crm-i,
#civicrm-menu li ul li a i.crm-i { color: var(--hu-gold) !important; }
#civicrm-menu .menu-separator,
#civicrm-menu li ul li.menu-separator { border-color: rgba(255,255,255,.18) !important; }

/* Caja de búsqueda rápida en la barra */
#crm-qsearch input, #civicrm-menu #crm-qsearch-input {
  border-radius: var(--hu-radius-pill) !important;
  border: 0 !important;
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  padding: 6px 14px !important;
}
#crm-qsearch input::placeholder { color: #cdd9ec !important; }
#crm-qsearch input:focus { background:#fff !important; color: var(--hu-navy) !important; }

/* ---------- 4. Breadcrumb ---------- */
.crm-container .crm-breadcrumb, #crm-container #crm-breadcrumb,
.crm-container .breadcrumb {
  background: transparent !important;
  font-size: 13px;
  color: var(--hu-text-muted);
  padding: 12px 0 6px;
}

/* ---------- 5. Botones ---------- */
.crm-container .btn, #crm-container .btn,
.crm-container input[type=submit], .crm-container button.btn,
.crm-container .crm-button input {
  border-radius: var(--hu-radius-sm) !important;
  font-weight: 600; letter-spacing: .01em;
  padding: 8px 18px; border: 0;
  box-shadow: var(--hu-shadow-sm); transition: var(--hu-transition);
}
.crm-container .btn:hover, #crm-container .btn:hover { transform: translateY(-1px); box-shadow: var(--hu-shadow-md); }
.crm-container .btn:active { transform: translateY(0); }
.crm-container .btn-primary, .crm-container input.crm-form-submit,
.crm-container .crm-button input[type=submit], .crm-container .crm-button-type-upload input {
  background: var(--hu-navy) !important; color:#fff !important;
}
.crm-container .btn-primary:hover { background: var(--hu-navy-dark) !important; }
.crm-container .btn-danger { background: var(--hu-red) !important; color:#fff !important; }
.crm-container .btn-danger:hover { background: var(--hu-red-dark) !important; }
.crm-container .btn-success { background:#2e8b57 !important; }
.crm-container .btn-warning { background: var(--hu-gold) !important; color: var(--hu-navy-darker) !important; }
.crm-container .btn-default, .crm-container .btn-secondary {
  background:#fff !important; color: var(--hu-navy) !important; border:1px solid var(--hu-border) !important;
}
.crm-container .btn-default:hover { background:#f0f4fa !important; }
/* Barra de botones de formulario: tira fija inferior */
.crm-container .crm-submit-buttons {
  background:#fbfcfe; border-top:1px solid var(--hu-border);
  border-radius:0 0 var(--hu-radius) var(--hu-radius); padding:14px 16px; margin-top:8px;
}

/* ---------- 6. Tarjetas / paneles / dashlets ---------- */
.crm-container .panel, .crm-container .crm-accordion-wrapper,
.crm-container .crm-form-block, .crm-container .crm-content-block,
#crm-container .panel, .crm-container fieldset,
.crm-container .dashlet, .crm-container .crm-dashlet,
.crm-container .ui-widget-content.crm-dashlet {
  background: var(--hu-surface);
  border: 1px solid var(--hu-border) !important;
  border-radius: var(--hu-radius) !important;
  box-shadow: var(--hu-shadow-sm);
}
.crm-container .panel-heading, .crm-container .crm-accordion-header,
.crm-container .dashlet-header, .crm-container .crm-dashlet .header {
  background:#f7f9fc !important; border-bottom:1px solid var(--hu-border) !important;
  font-weight:600; color: var(--hu-navy) !important; padding:12px 16px;
}
.crm-container .crm-accordion-header { border-left:3px solid var(--hu-gold) !important; }
.crm-container fieldset > legend, .crm-container .crm-accordion-header {
  font-weight:700; color: var(--hu-navy);
}

/* ---------- 7. Pestañas (tabs) modernas ---------- */
.crm-container .ui-tabs .ui-tabs-nav, .crm-container .crm-tab-button,
.crm-container ul.crm-tabs { border:0 !important; background:transparent !important; }
.crm-container .ui-tabs-nav li, .crm-container ul.ui-tabs-nav li {
  background:transparent !important; border:0 !important; margin:0 2px !important;
}
.crm-container .ui-tabs-nav li a {
  color: var(--hu-text-muted) !important; border:0 !important;
  border-radius: var(--hu-radius-sm) var(--hu-radius-sm) 0 0 !important;
  font-weight:600; padding:10px 16px !important;
}
.crm-container .ui-tabs-nav li.ui-tabs-active a,
.crm-container .ui-tabs-nav li.ui-state-active a {
  color: var(--hu-navy) !important; background:#fff !important;
  border-bottom:3px solid var(--hu-gold) !important;
}
.crm-container .ui-tabs-nav li a:hover { color: var(--hu-blue) !important; }

/* ---------- 8. Formularios ---------- */
.crm-container input[type=text], .crm-container input[type=email],
.crm-container input[type=password], .crm-container input[type=number],
.crm-container input[type=tel], .crm-container input[type=search],
.crm-container textarea, .crm-container select,
.crm-container .select2-choice, .crm-container .select2-container,
.crm-container .crm-form-text {
  border-radius: var(--hu-radius-sm) !important;
  border:1px solid var(--hu-border) !important;
  transition: var(--hu-transition); background:#fff;
}
.crm-container input[type=text]:focus, .crm-container input[type=email]:focus,
.crm-container input[type=password]:focus, .crm-container input[type=search]:focus,
.crm-container textarea:focus, .crm-container select:focus,
.crm-container .select2-container-active .select2-choice {
  border-color: var(--hu-blue) !important;
  box-shadow: 0 0 0 3px rgba(43,90,160,.18) !important; outline:0;
}
.crm-container label { color:#3a4453; font-weight:600; }

/* ---------- 9. Tablas ---------- */
.crm-container table.crm-info-panel, .crm-container .crm-search-results table,
.crm-container table.display, .crm-container .dataTable,
.crm-container table.row-highlight, .crm-container table.selector {
  border-radius: var(--hu-radius) !important; overflow:hidden;
  box-shadow: var(--hu-shadow-sm);
  border-collapse:separate !important; border-spacing:0;
  border:1px solid var(--hu-border);
}
.crm-container table thead th, .crm-container .dataTable thead th,
.crm-container table.selector thead th {
  background: var(--hu-navy) !important; color:#fff !important;
  font-weight:600; border:0 !important; padding:11px 12px;
}
.crm-container table thead th a { color:#dce6f5 !important; }
.crm-container table tbody tr:nth-child(even) { background:#f7f9fc; }
.crm-container table tbody tr:hover { background:#eef3fb !important; }
.crm-container table td { border-color: var(--hu-border) !important; padding:9px 12px; }

/* ---------- 10. Badges / etiquetas / tags ---------- */
.crm-container .label, .crm-container .badge, .crm-container .crm-tag-item,
.crm-container .crm-marker {
  border-radius: var(--hu-radius-pill) !important; font-weight:600; padding:3px 10px;
}
.crm-container .label-primary, .crm-container .badge { background: var(--hu-blue) !important; }
.crm-container .crm-tag-item { background:#eef3fb !important; color: var(--hu-navy) !important; }

/* ---------- 11. Alertas / mensajes / estado ---------- */
.crm-container .crm-error, .crm-container .alert-danger {
  border-radius: var(--hu-radius-sm) !important; border-left:4px solid var(--hu-red) !important;
}
.crm-container .crm-success, .crm-container .alert-success {
  border-radius: var(--hu-radius-sm) !important; border-left:4px solid #2e8b57 !important;
}
.crm-container .status, .crm-container .messages, .crm-container .crm-status,
.crm-container .help, .crm-container .crm-help {
  border-radius: var(--hu-radius-sm) !important;
}
.crm-container .crm-status-bar .ui-corner-all { border-radius: var(--hu-radius-pill) !important; }

/* ---------- 12. Iconos generales ---------- */
.crm-container .crm-i { color: var(--hu-blue); }
.crm-container a.action-item, .crm-container .crm-hover-button { transition: var(--hu-transition); }
.crm-container .crm-hover-button:hover { background: var(--hu-blue) !important; color:#fff !important; border-radius: var(--hu-radius-sm); }
.crm-container .crm-i.fa-trash, .crm-container .delete-button .crm-i { color: var(--hu-red); }
.crm-container .crm-i.fa-check, .crm-container .fa-circle-check { color:#2e8b57; }

/* ---------- 13. Login / página pública ---------- */
.crm-standalone-login #crm-container, body.civicrm-login,
body.crm-standalone-login {
  background: linear-gradient(135deg, var(--hu-navy-dark), var(--hu-navy) 60%, var(--hu-blue)) !important;
}
#crm-container .crm-login-form, .crm-container form.CRM_Standaloneusers_Form_Login,
.crm-container #crm-login {
  background:#fff; border-radius: var(--hu-radius);
  box-shadow: var(--hu-shadow-lg); padding:34px; max-width:420px; margin:7vh auto;
}

/* ---------- 14. Avatares / fotos de contacto ---------- */
.crm-container .crm-contact-thumbnail img, .crm-container img.crm-contact-image,
.crm-container .crm-summary-block img, .crm-container .crm-contact_image img {
  border-radius:50% !important; object-fit:cover; border:3px solid #fff; box-shadow: var(--hu-shadow-md);
}

/* ---------- 15. Pulido final ---------- */
.crm-container .crm-page-title, .crm-container h1.crm-page-title {
  border-bottom:2px solid var(--hu-gold); padding-bottom:10px; margin-bottom:18px;
}
.crm-container ::selection { background: rgba(242,169,0,.3); }
.crm-container ::-webkit-scrollbar { width:10px; height:10px; }
.crm-container ::-webkit-scrollbar-thumb { background:#c2ccdb; border-radius: var(--hu-radius-pill); }
.crm-container ::-webkit-scrollbar-thumb:hover { background: var(--hu-blue); }

/* Resumen de contacto: encabezado de marca */
.crm-container .crm-summary-contactname, .crm-container .crm-contact-summary h2 {
  color: var(--hu-navy) !important;
}
.crm-container #crm-contactname-content, .crm-container .crm-summary-block .contactCardLeft {
  border-radius: var(--hu-radius);
}

/* ============================================================
   16. FIX CONTRASTE — panel "tableros disponibles" del inicio
   + legibilidad de fuente (brief #1 y #2). El panel de dashlets
   inactivos va sobre fondo claro → texto navy legible y negrita.
   ============================================================ */
.crm-container #crm-dashboard-inactive-dashlets,
.crm-container .crm-dashboard-inactive,
.crm-container #available-dashlets,
.crm-container .crm-dashlet-listing {
  background: #f7f9fc !important;
  border-radius: var(--hu-radius) !important;
}
.crm-container #crm-dashboard-inactive-dashlets a,
.crm-container .crm-dashboard-inactive a,
.crm-container #available-dashlets a,
.crm-container .crm-dashlet-listing a,
.crm-container .crm-dashboard-list a {
  color: var(--hu-navy) !important;
  background: transparent !important;
  font-weight: 600 !important;
}
.crm-container #crm-dashboard-inactive-dashlets a:hover,
.crm-container .crm-dashboard-inactive a:hover,
.crm-container #available-dashlets a:hover {
  color: var(--hu-blue) !important;
  background: #eef3fb !important;
}
/* dashboard angular: toggle "+ N tableros disponibles" legible */
.crm-container [ng-click*="inactive"], .crm-container .crm-dashboard-toggle,
.crm-container .crm-inactive-dashlets-header {
  color: var(--hu-navy) !important;
  font-weight: 600 !important;
}

/* Legibilidad general de fuente (brief #2): nada por debajo de 400,
   módulos/menús/títulos con peso medio-alto */
.crm-container, #crm-container, body.aah-theme { font-weight: 400; }
.crm-container .crm-section-title, .crm-container .crm-accordion-header,
.crm-container .panel-heading, .crm-container fieldset > legend,
.crm-container .dashlet-header, .crm-container .crm-dashlet .header,
.crm-container .ui-tabs-nav li a {
  font-weight: 600 !important;
}
.crm-container label { font-weight: 600 !important; }

/* ============================================================
   17. SISTEMA TIPOGRÁFICO UNIFICADO (brief ficha de contacto)
   Toda la interfaz en Inter. Antes mezclaba Inter+Lato+Verdana
   (393 elementos en Lato). Se excluyen los iconos (Font Awesome)
   para no romper sus glifos.
   ============================================================ */
#crm-container *:not(.crm-i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="fa-"]):not([class^="icon-"]):not([class*=" icon-"]),
.crm-container *:not(.crm-i):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]),
.ui-dialog *:not(.crm-i):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ============================================================
   18. FICHA DE CONTACTO — diseño basado en tarjetas + contraste
   ============================================================ */
#contact-summary { background: transparent; }
#contact-summary .crm-summary-block {
  background: var(--hu-surface);
  border: 1px solid var(--hu-border);
  border-radius: var(--hu-radius);
  box-shadow: var(--hu-shadow-sm);
  padding: 16px 18px;
  margin-bottom: 16px;
}
/* etiquetas: gris medio, mayúsculas suaves, peso medio (escala modular) */
#contact-summary .crm-label,
#contact-summary .crm-summary-row .crm-label {
  color: #5a6675 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: .02em;
}
/* valores: casi negro, 14.5px, buen interlineado (contraste AA) */
#contact-summary .crm-content,
#contact-summary .crm-summary-row .crm-content,
#contact-summary .crm-summary-row > div:not(.crm-label) {
  color: #1f2733 !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
}
/* filas con más aire (espaciado 8pt) */
#contact-summary .crm-summary-row { padding: 5px 0; }
/* nombre del contacto más fuerte */
#contact-summary .crm-summary-contactname,
.crm-summary-contactname { color: var(--hu-navy) !important; font-weight: 700 !important; }

/* ============================================================
   19. AVATAR + PREVISUALIZACIÓN DE IMAGEN (modal centrado)
   ============================================================ */
/* miniatura: recorte cover + borde sutil */
#contact-summary .crm-contact_image img,
.crm-contact_image img, img.crm-contact-image, .crm-summary-block img.crm-image {
  object-fit: cover !important;
  border-radius: 14px !important;
  border: 2px solid #fff;
  box-shadow: var(--hu-shadow-md);
}
/* diálogo de previsualización: ancho mínimo (título no se trunca) + centrado */
.ui-dialog.crm-container, .ui-dialog {
  min-width: 360px !important;
  border-radius: var(--hu-radius) !important;
  box-shadow: var(--hu-shadow-lg) !important;
  overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar {
  background: var(--hu-navy) !important;
  border: 0 !important;
  padding: 12px 16px !important;
}
.ui-dialog .ui-dialog-title { color: #fff !important; font-weight: 700 !important; overflow: visible !important; }
.ui-dialog .ui-dialog-titlebar .ui-button, .ui-dialog .ui-dialog-titlebar button { color: #fff !important; }
/* imagen dentro del diálogo: centrada, sin estirar */
.ui-dialog .crm-custom-image-popup {
  display: flex !important; align-items: center; justify-content: center;
  padding: 16px; min-height: 180px; background: #f7f9fc;
}
.ui-dialog .crm-custom-image-popup img,
.ui-dialog .crm-contact-image-preview img, .ui-dialog img[src*="media/contacts"] {
  max-width: 100% !important; max-height: 62vh !important; height: auto !important;
  object-fit: contain !important; border-radius: 12px;
  box-shadow: var(--hu-shadow-md); border: 3px solid #fff;
}
/* overlay atenuado para los diálogos modales */
.ui-widget-overlay { background: rgba(14,34,68,.45) !important; opacity: 1 !important; }
/* ICONO ROTO del botón "Alternar pantalla completa": CiviCRM lo crea como
   jQuery UI button con icono fa-expand, pero .ui-icon (sprite + text-indent
   negativo) oculta el glifo de Font Awesome → se ve "tofu". Se resetea. */
.ui-dialog .crm-dialog-titlebar-resize {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  width: 22px; height: 22px;
}
.ui-dialog .crm-dialog-titlebar-resize .ui-icon,
.ui-dialog .crm-dialog-titlebar-resize .ui-button-icon,
.ui-dialog .crm-dialog-titlebar-resize span[class*="fa-"] {
  text-indent: 0 !important;
  background-image: none !important;
  background: none !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  color: #fff !important;
  width: auto !important; height: auto !important;
  margin: 0 !important; overflow: visible !important; position: static !important;
}
.ui-dialog .crm-dialog-titlebar-resize .ui-icon.fa-expand::before,
.ui-dialog .crm-dialog-titlebar-resize .ui-button-icon::before { content: "\f065"; }
/* la X de cerrar también en blanco y nítida */
.ui-dialog .ui-dialog-titlebar-close .ui-icon, .ui-dialog .ui-dialog-titlebar-close .ui-button-icon {
  color: #fff !important;
}

/* ============================================================
   20. DASHBOARD — desbordes y menú fijo (auditoría UI)
   ============================================================ */
/* Ningún dashlet desborda su tarjeta */
.crm-container .crm-dashlet,
.crm-container [class*="dashboard-column"] .crm-dashlet { overflow: hidden; }
.crm-container .crm-dashlet .dashlet-content,
.crm-container .crm-dashlet .crm-dashlet-content,
.crm-container .crm-dashlet form,
.crm-container .crm-dashlet .crm-search-form,
.crm-container .crm-dashlet .crm-accordion-body { max-width: 100% !important; box-sizing: border-box; }
/* Filtro de Actividades: que envuelva en varias filas en vez de cortarse */
.crm-container .crm-dashlet .crm-search-form,
.crm-container .crm-dashlet form .crm-section,
.crm-container .crm-dashlet .crm-accordion-body > div {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
}
.crm-container .crm-dashlet select,
.crm-container .crm-dashlet .select2-container,
.crm-container .crm-dashlet .crm-form-text,
.crm-container .crm-dashlet input[type=text] { max-width: 100% !important; }
/* Tabla de datos del dashlet: scroll horizontal DENTRO de la tarjeta */
.crm-container .crm-dashlet .dataTables_wrapper,
.crm-container .crm-dashlet table.dataTable,
.crm-container .crm-dashlet .crm-search-results { display: block; width: 100% !important; overflow-x: auto; }

/* Iconos de control de la cabecera del dashlet: separados y alineados */
.crm-container .crm-dashlet .dashlet-controls,
.crm-container .crm-dashlet .header .crm-dashlet-actions { display: inline-flex; gap: 8px; align-items: center; }
.crm-container .crm-dashlet .dashlet-controls a, .crm-container .crm-dashlet .crm-i.dashlet-control { margin: 0 2px; opacity: .85; }
.crm-container .crm-dashlet .dashlet-controls a:hover { opacity: 1; }

/* Menú fijo (position:fixed, 46px) no debe tapar el título/contenido */
.crm-container .crm-page-title,
.crm-container h1.crm-page-title { scroll-margin-top: 60px; }
#crm-container, body.crm-standalone #crm-container { padding-top: 6px; }

/* ============================================================
   21. TAREA 2 — Controles del tablero (4 iconos) con aire/hover
   Anchors directos en .crm-dashlet-header (title = tooltip nativo).
   ============================================================ */
.crm-container .crm-dashlet .crm-dashlet-header { padding: 8px 12px; }
.crm-container .crm-dashlet .crm-dashlet-header > a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  margin: 0 3px; opacity: .75; text-decoration: none;
  transition: all .15s cubic-bezier(.4,0,.2,1); cursor: pointer;
}
.crm-container .crm-dashlet .crm-dashlet-header > a:hover {
  background: rgba(27,58,107,.12); opacity: 1; transform: translateY(-1px);
}
.crm-container .crm-dashlet .crm-dashlet-header > a:active { transform: translateY(0); }
.crm-container .crm-dashlet .crm-dashlet-header > a .crm-i,
.crm-container .crm-dashlet .crm-dashlet-header > a i { color: #2B5AA0 !important; font-size: 13px; }
.crm-container .crm-dashlet .crm-dashlet-header > a.crm-dashlet-collapse:hover .crm-i { color: #1B3A6B !important; }

/* ============================================================
   22. TAREA 3 — Ocultar Quick Search nativo (#crm-qsearch)
   Redundante con el menú "Buscar" y confunde (muestra campos).
   ============================================================ */
#crm-qsearch, #crm-qsearch-field, li.crm-qsearch, .crm-quickSearchField { display: none !important; }

/* ============================================================
   LOGIN PROFESIONAL YUCORE — paleta del logo Harold
   navy #253D6B · azul #4CA0CC · dorado #FFCC2A · rojo #D21B10
   Estilo corporativo: tarjeta blanca limpia sobre fondo navy.
   ============================================================ */
/* Fondo BLANCO puro en TODA la pantalla (html, body y contenedores) —
   regla: nada de fondos oscuros. Elimina las franjas navy laterales. */
html:has(.standalone-auth-form),
body:has(.standalone-auth-form),
body.crm-standalone:has(.standalone-auth-form),
#crm-container:has(.standalone-auth-form),
.crm-container:has(.standalone-auth-form) {
  background: #ffffff !important;
}
.standalone-auth-form {
  min-height: 100vh; width: 100%; position: relative;
  background: #ffffff !important;
  display: flex; align-items: center; justify-content: center;
}
.standalone-auth-box { position: relative; z-index: 1; }

/* Tarjeta blanca limpia (versión aprobada) */
.standalone-auth-box {
  overflow: hidden;
  background: #ffffff !important;
  border: 1px solid #e7ecf3 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(37,61,107,.18), 0 4px 14px rgba(37,61,107,.10) !important;
  padding: 46px 40px 36px !important;
  max-width: 410px; width: 92%;
  animation: yucoreIn .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes yucoreIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Franja superior tricolor */
.standalone-auth-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #253D6B 0%, #4CA0CC 45%, #FFCC2A 75%, #D21B10 100%);
  z-index: 2;
}

/* Logo de Harold centrado */
.standalone-auth-box .crm-logo,
.standalone-auth-form .crm-logo,
#crm-container .standalone-auth-box .crm-logo {
  content: url("../images/login-logo.png") !important;
  display: block !important;
  width: 240px !important; max-width: 82% !important; height: auto !important;
  margin: 4px auto 28px !important;
}

/* Etiquetas: gris oscuro profesional */
.standalone-auth-box label,
.standalone-auth-form label {
  color: #3a4658 !important; font-weight: 600 !important;
  font-size: 12.5px !important; letter-spacing: .02em;
}
.standalone-auth-box .crm-login-message, .standalone-auth-box p { color: #6b7585 !important; }

/* Inputs limpios con foco navy */
.standalone-auth-box input[type=text],
.standalone-auth-box input[type=password],
.standalone-auth-box input[type=email],
.standalone-auth-form input[type=text],
.standalone-auth-form input[type=password] {
  background: #f6f8fb !important;
  border: 1px solid #d7dee8 !important;
  border-radius: 10px !important;
  color: #1f2733 !important;
  padding: 12px 14px !important;
  width: 100% !important; box-sizing: border-box;
  transition: all .16s ease;
}
.standalone-auth-box input::placeholder { color: #9aa6b6 !important; }
.standalone-auth-box input:focus {
  border-color: #253D6B !important; background: #fff !important;
  box-shadow: 0 0 0 4px rgba(37,61,107,.14) !important; outline: 0;
}

/* Botón navy corporativo, ancho completo */
.standalone-auth-box button,
.standalone-auth-box input[type=submit],
.standalone-auth-box .btn,
.standalone-auth-form button[type=submit] {
  background: #253D6B !important;
  border: 0 !important; border-radius: 10px !important;
  color: #fff !important; font-weight: 700 !important; letter-spacing: .02em;
  padding: 13px 24px !important;
  width: 100% !important; box-sizing: border-box;
  box-shadow: 0 8px 20px rgba(37,61,107,.30) !important;
  transition: all .16s ease; cursor: pointer;
}
.standalone-auth-box button:hover,
.standalone-auth-box .btn:hover {
  background: #1c2f54 !important; transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(37,61,107,.42) !important;
}

/* Enlaces */
.standalone-auth-box a { color: #2f6da3 !important; text-decoration: none; font-weight: 600; }
.standalone-auth-box a:hover { color: #D21B10 !important; }