@charset "utf-8";

/* ============================================================================
   dokuflex.css — hoja principal del theme dokuflex (produccion)
   ============================================================================
   Estructura (buscar por nombre de seccion, no por linea):
     1. CSS Custom Properties (Design Tokens)  — :root, tokens --dkf-*
     2. Nucleo legacy (import de estilos.css/modules.css): portlets, arbol,
        toolbar, formularios, grids, select2, calendario, workflow...
        Sin cabeceras de seccion; ordenado historicamente.
     3. Secciones modernas con cabecera propia (al final del fichero):
        OU admin page, Navbar superior, User menu dropdown, Alerts dropdown,
        Destructive actions, Document context menu, Flatpickr override,
        Toast notifications, UX refresh Foros, appViewer...

   Convenciones (ver CLAUDE.md > Working Conventions > CSS):
   - Colores SIEMPRE via tokens var(--dkf-*). Si el hex exacto ya tiene token,
     `node tools/css-hex-to-token.js --dry-run` lo detecta.
   - !important solo para anular inline-styles puestos por JS (y comentar cual).
   - Antes de anadir una regla, grep del selector: si ya existe, editar la
     definicion existente en su seccion — no anadir otra copia al final.
   - z-index de capas altas via tokens --dkf-z-* (escala 1060-1080).
   ============================================================================ */

/* ==============================================
   CSS Custom Properties (Design Tokens)
   ============================================== */
:root {
	/* Brand Colors */
	--dkf-primary: #1e3799;
	--dkf-primary-dark: #111c46;
	--dkf-primary-light: #364ba7;
	--dkf-primary-hover: #1c339b;
	--dkf-primary-tint: #e8eefb;
	--dkf-accent: #f9aa1a;
	--dkf-accent-dark: #d49014;
	--dkf-teal: #33636e;
	--dkf-green: #72cda6;
	--dkf-green-alt: #8cc63f;
	--dkf-green-dark: #73a630;

	/* Neutros slate — escala fria usada por las secciones modernas
	   (navbar, dropdowns, foros...). No mezclar con --dkf-gray-* (calida). */
	--dkf-slate-900: #0f172a;
	--dkf-slate-800: #1e293b;   /* unificacion jul-2026: absorbe #1f2937 */
	--dkf-slate-700: #334155;   /* texto principal de bloques modernos */
	--dkf-slate-600: #475569;
	--dkf-slate-550: #576373;   /* unificacion jul-2026: absorbe #5b6470 */
	--dkf-slate-500: #64748b;
	--dkf-slate-400: #94a3b8;
	--dkf-slate-200: #e2e8f0;

	/* UI Colors */
	--dkf-link: #337ab7;
	--dkf-info: #7f9ad1;
	--dkf-info-hover: #95acdb;
	--dkf-info-alt: #23b7e5;
	--dkf-danger: #eb8584;
	--dkf-danger-dark: #d9534f;
	--dkf-danger-hover: #f09998;
	--dkf-danger-text: #a94442;
	--dkf-warning: #ffca76;
	--dkf-warning-hover: #ffd38e;
	--dkf-success: var(--dkf-green);  /* mismo valor que --dkf-green: alias semantico */
	--dkf-success-hover: #88d6b5;

	/* Acentos unificados jul-2026 — cada token es el canonico de un cluster de
	   casi-duplicados (dE <= ~4.5) que existia disperso por el fichero. */
	--dkf-blue-pale: #a0c5e8;    /* absorbe #9fc5e8 y #accbee (tour, labels, autocomplete) */
	--dkf-blue-muted: #b6cae6;   /* absorbe #b0c5e0 (menus de cabecera, forumIcon) */
	--dkf-indigo-tint: #e0e7ff;  /* absorbe #dbe4f8 (fondos indigo suaves) */
	--dkf-info-soft: #5bc0de;    /* BS3 brand-info; absorbe #46b8da */
	--dkf-warning-dark: #ec971f; /* BS3 warning hover; absorbe #e78f08 */
	--dkf-red-bright: #e40000;   /* .red / marcadores mandatory; absorbe #ee0000 */
	--dkf-red-soft: #ffaeae;     /* alarm_red / nodos rechazo; absorbe #ffacac */
	--dkf-green-strong: #008000; /* horas positivas / progreso; absorbe #038603 */
	--dkf-teal-tint: #ccfbf1;    /* fondos teal suaves; absorbe #d5f9ee */
	--dkf-facebook: #3b5998;     /* brand Facebook; absorbe #3c5a9a */

	/* Acentos Tailwind compartidos (sep-2026). Los tenian el planner como
	   tokens --dkfpl-* propios y el catalogo freemium / bloqueo de pagina
	   como literales; ahora hay un unico canonico. */
	--dkf-red-alert: #ef4444;      /* red-500: linea "ahora" del planner, quitar tarjeta del catalogo */
	--dkf-red-alert-dark: #dc2626; /* red-600: tramo invalido del planner */
	--dkf-gray-cool: #6b7280;      /* gray-500 Tailwind: texto secundario del planner. dE 6 a slate-500: no fusionar */

	/* Workflow designer v2 — colores semanticos por tipo de nodo (ago-2026).
	   Criterio: personas = azules, automatizacion = violeta, decision = ambar,
	   tiempo = naranja, inicio = verde ("go"), final = slate oscuro (distinto
	   de inicio). Mismos tokens en el icono del nodo y en la franja del
	   dropdown "+" para que el mapa mental sea unico. */
	--dkf-wf-start: var(--dkf-green);
	--dkf-wf-reader: #8ecae6;
	--dkf-wf-approver: #219ebc;
	--dkf-wf-approver-parallel: #066579;
	--dkf-wf-action: #6554c0;            /* antes #023047 (se leia como negro) */
	--dkf-wf-condition: #ffb703;
	--dkf-wf-scheduler: #fb8500;
	--dkf-wf-linked: #ff3d98;
	--dkf-wf-end: var(--dkf-slate-800);
	--dkf-wf-line: var(--dkf-slate-400); /* cables, codos y bordes del lienzo */

	/* Holidays / vacaciones — colores semanticos de la leyenda del calendario.
	   Deben coincidir con los bordes de celda que pinta listMyHolidaysStats.jsp
	   (customDayRenderer) para que leyenda y calendario se lean igual. */
	--dkf-holiday-contract: darkorange;
	--dkf-holiday-today: darkslateblue;
	--dkf-holiday-limit: lightgray;

	/* Paleta contextual Bootstrap (alerts, panels, opciones de estado).
	   Tonos heredados de BS3 (bg/border/text) + acentos BS (botones/links).
	   El texto danger es --dkf-danger-text (ya existia). */
	--dkf-alert-success-bg: #dff0d8;
	--dkf-alert-success-border: #d6e9c6;
	--dkf-alert-success-text: #3c763d;
	--dkf-alert-info-bg: #d9edf7;
	--dkf-alert-info-border: #bce8f1;
	--dkf-alert-info-text: #31708f;
	--dkf-alert-warning-bg: #fcf8e3;
	--dkf-alert-warning-border: #faebcc;
	--dkf-alert-warning-text: #8a6d3b;
	--dkf-alert-danger-bg: #f2dede;
	--dkf-alert-danger-border: #ebccd1;
	--dkf-bs-success: #5cb85c;
	--dkf-bs-success-dark: #398439;
	--dkf-bs-danger: #dc3545;
	--dkf-bs-danger-dark: #c9302c;
	--dkf-link-active: #0b5ed7;

	/* Neutral Palette */
	--dkf-white: #fff;
	--dkf-black: #000;
	--dkf-gray-950: #222;       /* unificacion jul-2026: absorbe #262626 */
	--dkf-gray-900: #333;
	--dkf-gray-800: #555;
	--dkf-gray-700: #676a6c;
	--dkf-gray-650: #777;       /* unificacion jul-2026: absorbe #71787e */
	--dkf-gray-600: #888;
	--dkf-gray-500: #999;
	--dkf-gray-400: #acacac;
	--dkf-gray-300: #ccc;
	--dkf-gray-200: #ddd;
	--dkf-gray-150: var(--dkf-gray-200);  /* unificacion sep-2026: era #dbdbdb (dE 0.7) */
	--dkf-gray-100: #eee;
	--dkf-gray-50: #f5f5f5;
	--dkf-gray-25: #fafafa;

	/* Borders */
	--dkf-border: #d5d5d5;
	--dkf-border-light: var(--dkf-gray-200);  /* unificacion sep-2026: era #e0e0e0 (dE 1.1) */
	--dkf-border-tab: #c5d0dc;
	--dkf-border-input: var(--dkf-gray-300);  /* unificacion sep-2026: era #d0d0d0 (dE 1.4) */

	/* Backgrounds */
	--dkf-bg-body: var(--dkf-white);
	--dkf-bg-cream: #fffff6;    /* unificacion jul-2026: chrome del appBuilder; absorbe #fffff2 */
	--dkf-bg-highlight: #fffdcf;
	--dkf-bg-hover: #f0f7fc;
	--dkf-bg-section: var(--dkf-gray-25);   /* unificacion sep-2026: era #f9f9f9 (dE 0.3) */
	--dkf-bg-header: var(--dkf-gray-100);   /* unificacion sep-2026: era #efefef (dE 0.3) */

	/* Paneles de estadisticas y tarjetas KPI (panel de admin /admin y panel
	   freemium). Estaban escritos como hexadecimales sueltos dentro del
	   <style> de cada JSP; ahora viven aqui y los comparten las dos pantallas. */
	--dkf-surface-card: var(--dkf-white);
	--dkf-surface-muted: #f8fafc;   /* cabeceras de grupo y fondos de seccion frios */
	--dkf-border-card: #e8edf5;     /* borde de tarjeta de panel */
	--dkf-border-soft: #e5e7eb;     /* separadores finos */
	--dkf-kpi-blue: #3b82f6;
	--dkf-kpi-blue-dark: #2563eb;
	--dkf-kpi-purple: #8b5cf6;
	--dkf-kpi-purple-dark: #7c3aed;
	--dkf-kpi-green: #10b981;
	--dkf-kpi-green-dark: #059669;
	--dkf-kpi-orange: #f59e0b;
	--dkf-kpi-orange-dark: #d97706;
	--dkf-kpi-pink: #ec4899;
	--dkf-kpi-pink-dark: #db2777;
	--dkf-kpi-cyan: #06b6d4;
	--dkf-kpi-cyan-dark: #0891b2;
	--dkf-shadow-stat: 0 2px 8px rgba(15, 23, 42, 0.04);
	--dkf-progress-fill: rgba(15, 23, 42, 0.16);   /* velo de progreso sobre un color de estado */

	/* Focus */
	--dkf-focus: #66afe9;

	/* Tabs */
	--dkf-tab-active: #4c8fbd;
	--dkf-tree-line: #67b2dd;

	/* Typography */
	--dkf-font-family: 'Roboto', sans-serif;
	--dkf-font-family-alt: 'PT Sans', Verdana, sans-serif;
	--dkf-font-size-base: 14px;
	--dkf-line-height-base: 1.42857143;

	/* Spacing */
	--dkf-radius: 8px;
	--dkf-radius-sm: 4px;
	--dkf-radius-lg: 10px;
	--dkf-radius-round: 50%;

	/* Shadows */
	--dkf-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.3);
	--dkf-shadow-md: 0 0 5px 0 rgba(0,0,0,0.3);
	--dkf-shadow-lg: 0 5px 20px rgba(0,0,0,0.05);
	--dkf-shadow-card: 0px 0px 5px 0px rgba(0,0,0,0.2);
	--dkf-shadow-panel: 0 1px 2px 0 rgba(0,0,0,0.08), 0 2px 6px 0 rgba(0,0,0,0.06);

	/* Transitions */
	--dkf-transition-fast: 0.2s ease;
	--dkf-transition-base: 0.4s ease;
	--dkf-transition-slow: 0.5s ease;

	/* Z-index Scale — orden de capas de toda la app. No usar literales nuevos
	   por encima de 1060: anadir/usar un token de esta escala.
	   sidebar < sticky < backdrop < modal/dropdown < modal-double < popover
	   < overlay < toast < blockpage */
	--dkf-z-sidebar: 1000;
	--dkf-z-sticky: 1060;
	--dkf-z-modal-backdrop: 1064;
	--dkf-z-dropdown: 1065;
	--dkf-z-modal: 1065;
	--dkf-z-modal-double: 1066;
	--dkf-z-popover: 1067;   /* flotantes que ganan a cualquier modal: datepicker, ghost de drag */
	--dkf-z-overlay: 1070;   /* capas fullscreen: .gridFloating, #maximized_image */
	--dkf-z-toast: 1075;     /* toasts visibles incluso sobre overlays */

	/* Timings por paso de workflow (manageSystem/timingSteps y la pantalla
	   OLD de manageSystem/timingsByStepApproval_.jsp). Familia azul-grisacea
	   propia de esas dos pantallas; antes vivian como variables locales --ms-*
	   dentro de un <style>. Unificacion sep-2026: los tonos a dE <= 2 de un
	   token base son alias de ese token; los propios (primary, border, title,
	   label, text-2, neutral, green/blue/red) se quedan. */
	--dkf-ts-primary: #0078d4;
	--dkf-ts-border: #d8e2f1;
	--dkf-ts-border-soft: var(--dkf-slate-200);   /* era #e5eaf2 (dE 0.8); absorbe #e1e7f0, #e4eaf3, #e9eef6 */
	--dkf-ts-bg: var(--dkf-bg-hover);             /* era #f1f4f8 (dE 1.7; mismo cluster slate-100 que absorbio bg-hover) */
	--dkf-ts-bg-light: var(--dkf-surface-muted);  /* era #f8fbff (dE 1.1); absorbe #f7f9fc, #f5f7fb */
	--dkf-ts-bg-strong: var(--dkf-border-card);   /* era #e8edf6 (dE 0.5); absorbe #e9f0fb, #edf2f9, #eaf0f8 */
	--dkf-ts-text: var(--dkf-slate-800);          /* era #1c2738 (dE 1.2) */
	--dkf-ts-text-2: #243247;        /* absorbe #2f3f56 */
	--dkf-ts-title: #3b4e6a;
	--dkf-ts-label: #4d5f7d;
	--dkf-ts-muted: var(--dkf-slate-500);         /* era #6a7890 (dE 2.0); absorbe #5f6f86 */
	--dkf-ts-neutral: #8ea2bf;
	--dkf-ts-green: #1f7a3a;
	--dkf-ts-blue: #335fd6;
	--dkf-ts-blue-dark: #1f4e87;
	--dkf-ts-red: #8a1116;

	/* Pantallas de finanzas (tickets/finance_*.jsp, manageCompany/orgFinance.jsp) */
	--dkf-finance-accent: #3d70b2;
	--dkf-khaki: #bdb76b;            /* darkkhaki: transaccion similar inicial */
	--dkf-olive: #556b2f;            /* darkolivegreen: transaccion similar confirmada */

	/* Sueltos absorbidos de JSP */
	--dkf-gold: #dda120;             /* bordes de la tabla de invitaciones (community/invitations.jsp) */
	--dkf-warning-strong: #b8860b;   /* darkgoldenrod: cabecera de aviso del test de workflow */
	--dkf-danger-strong: #a52a2a;    /* brown: cabecera de error del test de workflow */
	--dkf-focus-ring: 0 0 0 3px rgba(30, 55, 153, 0.12);
	--dkf-z-blockpage: 1080; /* bloqueo de pagina: por encima de todo */
}


/* Imported estilos.css, modules.css */

a { text-decoration:none; }
a:hover{color:var(--dkf-teal);text-decoration:none}
::-moz-selection{background-color:var(--dkf-teal);color:var(--dkf-white)}
::selection{background-color:var(--dkf-teal);color:var(--dkf-white)}
hr{border:0;border-top:1px solid var(--dkf-gray-100);border-bottom:1px solid var(--dkf-white)}
.field,.verde{color:var(--dkf-teal)}
.gris_oscuro{color:var(--dkf-gray-300)}
label.error{color:var(--dkf-teal);font-size:75%}
input:focus,select:focus,textarea:focus{outline:0}
.doc{margin-right:10px}
.contentArticle H2,.destacado{font-size:1.8em;line-height:1.8em}
.contentArticle a:link{color:var(--dkf-accent);text-decoration:none}
.contentArticle a:visited{color:var(--dkf-accent);text-decoration:none}
.contentArticle a:hover{color:var(--dkf-accent);text-decoration:none}
.contentArticle a:active{color:var(--dkf-accent);text-decoration:none}
.contentArticle p{font-style:normal;color:var(--dkf-gray-500)}
.titulo_doc{font-size:1.1em;color:var(--dkf-accent);line-height:25px;font-style:normal}
.fecha{color:var(--dkf-teal);font-style:normal;line-height:16px}
.subtitulo3{font-weight:700;font-size:1em;color:var(--dkf-gray-500);line-height:16px}
#barra_top{width:100%;height:10px;background-color:var(--dkf-accent);margin-bottom:15px;position:fixed;top:0;z-index:var(--dkf-z-sticky);left:0}
#body_inicio{margin:0;text-align:center;font-family:'PT Sans',Verdana,sans-serif;font-size:14px;line-height:14px;background-image:url(../../common/images/bg.png)}
#contenedor_inicio{width:745px;position:relative;margin:auto;text-shadow:1px 2px var(--dkf-white)}
#cuerpo_inicio{width:745px;float:left}
#header_inicio{width:725px;height:125px;float:left;margin-bottom:10px;text-align:left;border-bottom:2px solid var(--dkf-bg-header);margin-top:10px}
#bienvenida_header_inicio{width:300px;height:80px;float:right;text-align:right;color:var(--dkf-border);font-size:20px;font-style:italic;margin-top:40px;line-height:20px}
.idioma_header_inicio{font-size:15px;color:var(--dkf-gray-300);padding-top:20px}
.idioma_header_inicio a:link{color:var(--dkf-accent);text-decoration:none}
.idioma_header_inicio a:visited{color:var(--dkf-accent);text-decoration:none}
.idioma_header_inicio a:hover{color:var(--dkf-teal);text-decoration:none}
.idioma_header_inicio a:active{color:var(--dkf-accent);text-decoration:none}
#login_inicio{width:420px;float:left;font-style:italic;font-size:35px;color:var(--dkf-accent);text-shadow:1px 2px var(--dkf-white);text-align:left;margin-top:25px;line-height:37px;padding-bottom:20px}
.campo_login_home{width:380px;height:40px;margin-top:5px;margin-bottom:12px;padding:5px;font-style:italic;background-color:var(--dkf-white);font-size:24px;color:var(--dkf-gray-150);border-radius:10px;border:1px solid var(--dkf-border-input);padding-left:10px;font-family:'PT Sans',sans-serif}
.campo_login_home:hover{border:1px solid var(--dkf-teal)}
.boton_login_home{width:395px;height:50px;margin-bottom:5px;padding:5px;font-style:italic;background-color:var(--dkf-teal);font-size:20px;color:var(--dkf-white);border-radius:10px;border:1px solid var(--dkf-green-dark);font-family:'PT Sans',sans-serif;text-align:center;margin-top:10px}
.boton_login_home:hover{border:1px solid #588122;background-color:var(--dkf-green-dark)}
.link_login_home{font-size:14px;font-style:normal;color:var(--dkf-gray-500);line-height:15px}
.link_login_home a:link{color:var(--dkf-gray-500);text-decoration:none}
.link_login_home a:visited{color:var(--dkf-gray-500);text-decoration:none}
.link_login_home a:hover{color:var(--dkf-teal);text-decoration:none}
.link_login_home a:active{color:var(--dkf-gray-500);text-decoration:none}
#registrarse_inicio{line-height:29px}
#body_login #registrarse_inicio{width:275px;height:145px;float:left;margin-top:65px;text-align:left;border-radius:10px;border:1px solid var(--dkf-border-input);padding-left:28px;padding-top:13px;background-color:var(--dkf-gray-25);color:var(--dkf-teal);font-size:37px;font-style:italic;margin-left:50px}
#registrarse_inicio:hover{border:1px solid var(--dkf-teal)}
#registrarse_inicio a:link{font-size:22px;color:var(--dkf-tab-active);text-decoration:none;line-height:40px}
#registrarse_inicio a:visited{color:var(--dkf-tab-active);text-decoration:none}
#registrarse_inicio a:hover{color:#438ea9;text-decoration:none}
#registrarse_inicio a:active{color:var(--dkf-tab-active);text-decoration:none}
#body_principal{font-family:'PT Sans',Verdana,sans-serif;font-size:12px;line-height:12px;margin:0;background-color:var(--dkf-gray-100)}
#cuerpo_principal{position:absolute;top:85px;float:left;left:10px;right:10px;padding-bottom:50px}
#header_principal{text-align:left;border-bottom:2px solid var(--dkf-bg-header);background-color:var(--dkf-gray-25);padding-top:3px;height:55px;position:fixed;width:100%;top:10px;padding-left:10px;padding-right:30px;font-size:14px;font-style:italic;font-weight:700;color:var(--dkf-border);z-index:var(--dkf-z-sticky);left:0}
#main-menu-user-profile A{line-height:1.1em}
.communityTitle{color:var(--dkf-black);font-size:1.7em;padding-top:0;padding-right:4px;font-weight:700}
.subnav .btn-group{padding-top:6px}
#submenu{height:25px;text-align:left;border-bottom:4px solid var(--dkf-bg-header);background-color:var(--dkf-gray-25);padding-top:4px;top:70px;position:fixed;width:100%;font-size:17px;font-style:normal;font-weight:700;color:var(--dkf-border);padding-left:30px;padding-right:30px;text-transform:uppercase;z-index:500;left:0}
#submenu UL.navigation{margin:0;padding:3px 0 0;float:left;list-style:none}
#submenu UL.navigation LI{list-style:none;float:left}
#submenu UL.navigation LI A.selected,#submenu a:hover{color:var(--dkf-accent);text-decoration:none}
#submenu a:link{color:var(--dkf-border);text-decoration:none}
#submenu a:visited{color:var(--dkf-border);text-decoration:none}
#submenu a:active{color:var(--dkf-border);text-decoration:none}
.toolbar .icons{height:15px;float:right;text-align:right;margin-right:2%}
.campo_formulario{margin-bottom:0;padding:5px;background-color:var(--dkf-white);font-size:14px;border-radius:4px;border:1px solid var(--dkf-border-input);padding-left:7px;font-weight:400}
.errorField{border-color:var(--dkf-danger-text)!important;box-shadow:inset 0 1px 1px rgba(0,0,0,.075)!important;color:var(--dkf-danger-text)!important;font-weight:700}
.boton_busqueda_doc:hover,.button:hover,.buttonOrange:hover,.fg-button:hover{border:1px solid #588122;background-color:var(--dkf-green-dark);text-decoration:none}
.readonly{background-color:var(--dkf-border)}
#footer_inicio{position:fixed;bottom:0;width:100%;height:45px;background-color:var(--dkf-gray-50);color:var(--dkf-black);border-top:2px solid var(--dkf-accent-dark);padding-top:10px;left:0}
#footer_inicio_contenido{width:700px;height:40px;margin:auto;background-repeat:no-repeat;background-position:top right;text-align:left;font-weight:700}
#footer_principal{bottom:0;margin-top:10px;background-color:var(--dkf-gray-50);color:var(--dkf-black);border-top:2px solid var(--dkf-accent-dark);height:20px;padding-top:5px;left:0;right:0;border-color:var(--dkf-accent-dark);border-radius:4px;border-style:solid;border-width:2px}
#footer_principal_contenido{height:32px;margin:auto;text-align:left;font-weight:700;float:left;left:29px;position:absolute;right:30px;background-image:url(../../common/images/logo_footer_ppal.png);background-repeat:no-repeat;background-position:top right}
.creditos_footer{margin-right:35px;height:20px;float:left}
.creditos_footer a:link{color:var(--dkf-black);text-decoration:none}
.creditos_footer a:visited{color:var(--dkf-black);text-decoration:none}
.creditos_footer a:hover{color:var(--dkf-black);text-decoration:underline}
.creditos_footer a:active{color:var(--dkf-black);text-decoration:none}
#ayuda{width:580px;font-family:'PT Sans',sans-serif;font-weight:700;font-style:italic;text-shadow:1px 2px var(--dkf-white);font-size:37px;color:var(--dkf-teal);height:250px;float:left;background-color:var(--dkf-bg-section);padding-top:30px;background-image:url(../../common/images/ayuda_bg.png);background-repeat:no-repeat;background-position:top left;padding-left:140px;line-height:30px;overflow:hidden;border-color:var(--dkf-accent)}
#ayuda .subtitulo3{line-height:30px}
#ayuda a:link{color:var(--dkf-teal);text-decoration:none}
#ayuda a:visited{color:var(--dkf-teal);text-decoration:none}
#ayuda a:hover{color:var(--dkf-green-dark);text-decoration:none}
#ayuda a:active{color:var(--dkf-teal);text-decoration:none}
.popup{font-family:'PT Sans',sans-serif;font-size:20px;line-height:20px;color:var(--dkf-teal);float:left;border:6px solid var(--dkf-teal);background-color:var(--dkf-bg-section);padding-top:0;padding-left:25px;padding-right:25px;overflow:hidden;border-color:var(--dkf-teal);font-style:italic;font-weight:700}
.popup .header{font-size:24px;line-height:24px;text-shadow:1px 2px var(--dkf-white)}
#idiomas{width:283px;font-family:'PT Sans',sans-serif;font-weight:700;font-style:italic;text-shadow:1px 2px var(--dkf-white);font-size:35px;color:var(--dkf-accent);height:443px;float:left;border:6px solid var(--dkf-accent);background-color:var(--dkf-bg-section);padding-top:25px;padding-left:55px;line-height:36px;overflow:hidden;border-color:var(--dkf-accent)}
#idiomas a:link,.popup a:link{color:var(--dkf-teal);text-decoration:none}
#idiomas a:visited,.popup a:visited{color:var(--dkf-teal);text-decoration:none}
#idiomas a:hover,.popup a:hover{color:var(--dkf-green-dark);text-decoration:none}
#idiomas a:active,.popup a:active{color:var(--dkf-teal);text-decoration:none}
.bandera_idioma{margin-right:8px;margin-top:5px}
.loadMore{background-color:#ef8036;padding:4px}
.loadMore A{color:var(--dkf-white)}
div#reportsreportForm input,div#reportsreportForm textarea{display:block}
.form-group{display:block}

.widget-item{font-size:18px;box-shadow:none!important;padding:10px;height:290px}
.widget-item>label>a{color:#444;font-weight:700;cursor:pointer}
.widget-item>label{display:block}
.widget-item>small{color:var(--dkf-gray-650);display:block}
.grid2{margin-top:20px!important}
.agregarapp{margin-top:8px}
.agregarapp:hover{text-decoration:underline;cursor:pointer}
.paginacionSelect,.pagination{margin-top:10px!important}
.sep{clear:both}
.hrsep{clear:both;background-color:var(--dkf-gray-300);margin:1px;height:2px}
.hrseplight{clear:both;background-color:var(--dkf-gray-100);margin:1px;height:2px}
.portlet:not(.lightProcessIcon){position:relative;clear:both;margin-bottom:2em;width:99%}
.portlet:not(.lightProcessIcon) .title{position:relative;line-height:35px;}
.portlet:not(.lightProcessIcon) .title h3{top:2px;position:relative;left:5px;display:inline-block;margin-right:3em;font-size:14px;font-weight:600;color:var(--dkf-gray-800);line-height:18px;text-shadow:1px 1px 2px rgba(255,255,255,.5)}
.portlet:not(.lightProcessIcon) .title [class*=" icon-"],.portlet:not(.lightProcessIcon) .title [class^=icon-]{display:inline-block;margin-left:8px;margin-right:-2px;font-size:16px;color:var(--dkf-gray-800);vertical-align:middle}
.portlet:not(.lightProcessIcon) .content, .portlet:not(.lightProcessIcon) .title, .openProcessSidebar{padding:20px 15px 15px;background:var(--dkf-white);border:1px solid var(--dkf-border);border-radius:5px}
.portlet:not(.lightProcessIcon) .widget-nopad .content{padding:0}
.portlet:not(.lightProcessIcon) .content:after,.portlet:not(.lightProcessIcon) .content:before{display:table;content:"";line-height:0}
.portlet:not(.lightProcessIcon) .content:after{clear:both}
.portlet:not(.lightProcessIcon) .title IMG{vertical-align:middle}
.portlet:not(.lightProcessIcon) .content {clear:both;padding-top:0}
.portlet:not(.lightProcessIcon) a:link,a.link:link{color:var(--dkf-gray-600);text-decoration:none;font-style:normal}
.portlet:not(.lightProcessIcon) a:visited,a.link:visited{color:var(--dkf-gray-600);text-decoration:none}
.portlet:not(.lightProcessIcon) a:hover,a.link:hover{color:var(--dkf-green-alt);text-decoration:none}
.portlet:not(.lightProcessIcon) a:active,a.link:active{color:var(--dkf-gray-600);text-decoration:none}
.publicInbox{float:left;margin-right:12px;margin-top:12px}
.doc_item{float:left;padding-bottom:10px;margin-right:1%;border-bottom:1px solid var(--dkf-gray-300);width:98%;padding-top:10px}
.doc_item:hover{background-color:var(--dkf-gray-25)}
.portlet:not(.lightProcessIcon) .toolbar{margin-bottom:12px}
.portlet:not(.lightProcessIcon) .toolbar .acciones{float:left;position:relative;left:5px}
.portlet:not(.lightProcessIcon) .title .icons,.portlet:not(.lightProcessIcon) .toolbar .icons{float:right;position:relative;right:5px}
DIV.visor{width:69%;float:left}
DIV.infoDocumento{width:30%;float:left}
DIV.infoDocumento .cabeceraDatos{background-color:var(--dkf-teal);padding:4px;min-height:18px}
DIV.infoDocumento .cabeceraDatos A{color:var(--dkf-gray-500);font-weight:700}
DIV.cabeceraDatos A.open::before,DIV.cabeceraDatos A.closed::before{font-family:"Font Awesome 6 Pro";font-weight:300;display:inline-block;width:14px;margin-right:5px;text-align:center}
DIV.cabeceraDatos A.open::before{content:"\f103"} /* fa-angles-down */
DIV.cabeceraDatos A.closed::before{content:"\f101"} /* fa-angles-right */
DIV.cuerpoDatos DL{margin:0;padding:8px}
DIV.cuerpoDatos DT{display:block;float:left;width:100px;color:var(--dkf-accent);line-height:14px}
DIV.cuerpoDatos DD{display:block;font-weight:700;color:var(--dkf-green-alt)}
DIV.cuerpoDatos .sep{display:block;clear:both}
DIV.fileManager .filesAll{margin-left:0!important}
DIV.fileManager .files .item .acciones{display:none}
DIV.fileManager .files .item:hover .acciones{display:block}
SPAN.noitems{background:url(../../common/images/info.png) no-repeat left center transparent;padding-left:30px}
DIV.item{padding-top:5px;min-height:35px}
.itemListDetall .icono{display:none}
.itemListDetall .check{padding-top:5px!important}
.itemListDetall .detalles{padding-left:25px;min-height:35px}
.itemListDetall .fecha,.itemListDetall .size{display:inline;padding-left:5px}
DIV.itemGallery{border:1px solid var(--dkf-white);float:left;height:200px;padding:10px;width:25%}
.buttonsFloatGallery{top:-172px;right:-8px}
.buttonsListGallery{top:0;right:0;float:left;display:block}
.viewGalleryIcon{width:100%;height:100%;overflow:hidden}
.viewGalleryList{width:200px;height:200px;margin-right:15px;display:inline;float:left;overflow:hidden}
.itemGallery .icono IMG{border:5px solid var(--dkf-gray-100);display:block;width:100px}
.itemGallery .metadata,.itemGallery H4{display:none}
.itemSepGallery{display:none}
.itemListSepGallery{padding-bottom:5px;display:block!important;margin-bottom:5px}
DIV.item .icono{float:left;width:105px;height:80px}
DIV.detalles{line-height:1.5em;padding-top:0;min-height:80px;margin-right:130px}
DIV.detalles .version{padding-left:10px;display:inline;color:#f33;font-size:70%}
DIV.item .actions UL{margin:0;padding:0}
DIV.item .actions UL LI{display:inline}
DIV.item .actions UL LI IMG{border:none}
DIV.item .actions UL LI.sep{border-left:1px dotted var(--dkf-border-input);margin-left:5px;margin-right:5px}
DIV.itemSep{border-bottom:1px dotted #ffae33;clear:both}
DIV.clearRight{clear:right}
A.favorito:hover,A.no-favorito{/*background:url(../../common/images/star-silver-icon.png) no-repeat center left transparent;*/padding-left:20px}
A.favorito,A.no-favorito:hover{/*background:url(../../common/images/star-icon.png) no-repeat center left transparent;*/padding-left:20px}
A.comentarios{/*background:url(../../common/images/Discussion-icon.png) no-repeat center left transparent;*/padding-left:20px}
UL.users-list{list-style:none;padding:0}
UL.users-list LI{list-style:none}
.shortcuts{text-align:center}
.shortcuts .shortcut{width:110px;display:inline-block;padding:12px 0;margin:0 5px 1em;vertical-align:top;text-decoration:none;background:var(--dkf-gray-50);background-color:var(--dkf-bg-section);background-image:linear-gradient(to bottom,var(--dkf-white),var(--dkf-gray-100));background-repeat:repeat-x;border:1px solid var(--dkf-gray-200);box-sizing:border-box;border-radius:5px}
.shortcuts .shortcut .shortcut-icon{margin-top:.25em;margin-bottom:.35em;font-size:32px;color:var(--dkf-gray-800)}
.shortcuts .shortcut:hover{background:var(--dkf-gray-100);background-color:var(--dkf-bg-header);background-image:linear-gradient(to bottom,var(--dkf-gray-25),var(--dkf-border-light));background-repeat:repeat-x}
.shortcuts .shortcut:hover .shortcut-icon{color:var(--dkf-gray-700)}
.shortcuts .shortcut-label{display:block;font-weight:400;color:var(--dkf-gray-700)}
.ui-widget-content{background:var(--dkf-gray-25);border:1px solid var(--dkf-gray-200);color:var(--dkf-gray-900)}
.ui-widget-header{background:var(--dkf-accent);border:1px solid var(--dkf-warning-dark);color:var(--dkf-white);font-weight:700}
.ui-widget{font-family:'PT Sans',Verdana,sans-serif}
.ui-dialog{z-index:var(--dkf-z-modal)!important} /* !important: jQuery UI pone z-index inline via su stack option */
/* !Imported estilos.css, modules.css */

.dropdown-menu > li > a {
	display: block;
	padding: 3px 20px;
	clear: both;
	color: var(--dkf-gray-900);
	white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	color: var(--dkf-gray-950);
	text-decoration: none;
	background-color: var(--dkf-gray-50);
}
.dropdown-menu .divider {
	height: 1px;
	margin: 9px 0;
	overflow: hidden;
	background-color: var(--dkf-border-light);
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline: none; }

#body_principal, #body_principal .fa-no-fontawesome, .condSummaryAffected pre { font-family: 'Roboto', sans-serif !important; }
#body_principal.condensed, #body_principal.condensed .fa-no-fontawesome { font-family: 'Roboto Condensed', sans-serif !important; }
#body_principal.montserrat, #body_principal.montserrat .fa-no-fontawesome { font-family: 'Montserrat', sans-serif !important; }
#body_principal.lato, #body_principal.lato .fa-no-fontawesome { font-family: 'Lato', sans-serif !important; }
#body_principal.opensans, #body_principal.opensans .fa-no-fontawesome { font-family: 'Open Sans', sans-serif !important; }
#body_principal.sourcesans, #body_principal.sourcesans .fa-no-fontawesome { font-family: 'Source Sans Pro', sans-serif !important; }
#body_principal.notosans, #body_principal.notosans .fa-no-fontawesome { font-family: 'Noto Sans JP', sans-serif !important; }
#body_principal.rubik, #body_principal.rubik .fa-no-fontawesome { font-family: 'Rubik', sans-serif !important; }
#body_principal.worksans, #body_principal.worksans .fa-no-fontawesome { font-family: 'Work Sans', sans-serif !important; }

/* Removed zooms, dude problems width bootstrap tooltips, backgrounds and other stuffs positioning. */



ul, li{margin:0; padding:0; list-style:none;}
.menu_body li{ border-bottom: 1px solid var(--dkf-border-input); }
.menu_body li.alt, .menu_body li.alt:hover { background-color: #64B13C; }
.menu_body li.alt a, .menu_body li.alt a:hover{ color: var(--dkf-white) !important; font-weight: bold; }
.menu_body li a{ color:var(--dkf-green-alt) !important; text-decoration:none; padding: 10px 10px 10px 5px; display:block; }
.menu_body li a:hover{ color: var(--dkf-gray-500) !important; }
#header-create-process a { padding: 10px 16px; }

@keyframes dokuSpin {
	from {transform:translateY(-50%) translateX(-50%) rotate(0deg);}
	to {transform:translateY(-50%) translateX(-50%) rotate(1turn);}
}
@keyframes shake {
	10%, 90% { transform: translate3d(-1px, 0, 0); }
	20%, 80% { transform: translate3d(2px, 0, 0); }
	30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
	40%, 60% { transform: translate3d(4px, 0, 0); }
}
@keyframes shakeLinkTo {
	0% { transform: translate(1px, 1px) rotate(-1deg); }
	10% { transform: translate(0px, 0px) rotate(0deg); }
	20% { transform: translate(1px, 1px) rotate(1deg); }
	30% { transform: translate(0px, 0px) rotate(0deg); }
	40% { transform: translate(1px, 1px) rotate(-1deg); }
	50% { transform: translate(0px, 0px) rotate(0deg); }
	60% { transform: translate(1px, 1px) rotate(1deg); }
	70% { transform: translate(0px, 0px) rotate(0deg); }
	80% { transform: translate(1px, 1px) rotate(-1deg); }
	90% { transform: translate(0px, 0px) rotate(0deg); }
	100% { transform: translate(1px, 1px) rotate(1deg); }
}
@keyframes moving-gradient {
	0% { background-position: -250px 0; }
	100% { background-position: 250px 0; }
}

@keyframes ring {
	0% { transform: rotate(0); }
	1% { transform: rotate(30deg); }
	3% { transform: rotate(-28deg); }
	5% { transform: rotate(34deg); }
	7% { transform: rotate(-32deg); }
	9% { transform: rotate(30deg); }
	11% { transform: rotate(-28deg); }
	13% { transform: rotate(26deg); }
	15% { transform: rotate(-24deg); }
	17% { transform: rotate(22deg); }
	19% { transform: rotate(-20deg); }
	21% { transform: rotate(18deg); }
	23% { transform: rotate(-16deg); }
	25% { transform: rotate(14deg); }
	27% { transform: rotate(-12deg); }
	29% { transform: rotate(10deg); }
	31% { transform: rotate(-8deg); }
	33% { transform: rotate(6deg); }
	35% { transform: rotate(-4deg); }
	37% { transform: rotate(2deg); }
	39% { transform: rotate(-1deg); }
	41% { transform: rotate(1deg); }
	43% { transform: rotate(0); }
	100% { transform: rotate(0); }
}
/*Importado de ACE ***/
.commentsForm #textareaWrap {
	text-align: center;
	/*background-color: #F2F2F2;*/
	border:solid 1px #B4BBCD;
	padding-bottom:5px;
	padding-top: 2px;
	margin-top:0;
	margin-bottom:0;

}
.noselect {
	/* iOS Safari */
	/* Safari */
	/* Old versions of Firefox */
	/* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}
select {
	appearance:caret;
}
::placeholder {
	opacity: 1; /* Firefox */
}
.commentsForm .totalComments { padding: 4px}
#wallComments .moreRepplies .loadMoreMainAnswers { margin-left: 30px; margin-bottom: 10px; margin-top: 5px;}
#modalWFHistoryCommentsList .itemdiv .repplies {padding-top:2px!important;}
#modalWFHistoryCommentsList .itemdivsystem {min-height:50px !important;}
#modalWFHistoryCommentsList .itemdiv .alert {margin-bottom:5px !important;}
.itemdiv .user img {max-width:36px;}
.commentdiv .body {margin-left:0!important;}

.dialogs{padding:9px 9px 0;position:relative}
.itemdiv{padding-right:3px;min-height:60px;position:relative}
.itemdiv .body{margin-left:50px;padding-left:0;width:auto;margin-right:12px;position:relative}

.itemdiv .body>.time [class*="icon-"]{font-size:14px;font-weight:normal}
.itemdiv .body>.name{display:block;}
.itemdiv .body>.text{display:block;padding-bottom:19px;padding-left:7px;font-size:13px;position:relative}
.itemdiv .body>.text>[class*="icon-quote-"]:first-child{color:var(--dkf-slate-200);margin-right:4px}
.itemdiv:last-child>.body>.text{border-bottom:0}
.itemdiv:last-child>.body>.text:after{display:none}
.itemdiv.dialogdiv{padding-bottom:2px}
.itemdiv.dialogdiv>.user>img{border-color:var(--dkf-border-tab)}
.itemdiv.dialogdiv>.body{border:1px solid var(--dkf-bg-header);padding:3px 7px 7px;border-left-width:2px;margin-right:1px}
.itemdiv.dialogdiv>.body>.text{padding-left:0;padding-bottom:0}
.itemdiv.dialogdiv>.body>.text:after{display:none}
.itemdiv.dialogdiv .tooltip>.tooltip-inner{word-break:break-all}
.itemdiv.memberdiv{width:175px;padding:2px;margin:3px 0;float:left;border-bottom:1px solid var(--dkf-gray-100)}
.itemdiv.memberdiv>.user>img{border-color:var(--dkf-slate-200)}
.itemdiv.memberdiv>.body>.time{position:static}
.itemdiv.memberdiv>.body>.name{line-height:18px;height:18px;margin-bottom:0}
.itemdiv.memberdiv>.body>.name>a{display:inline-block;max-width:100px;max-height:18px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}
.itemdiv .tools{width:auto;position:absolute;right:2px;bottom:0px;display:none;z-index:200;}
.itemdiv .tools .btn{border-radius:36px;margin:1px 0}
.itemdiv .body .tools{bottom:9px}
.itemdiv .repplies {padding-left:40px;padding-top:10px}
.itemdiv.commentdiv .tools{right:2px}
.itemdiv .body:hover .tools{display:inline-block}
.repplies .itemdiv:hover .tools{display:inline-block}

.bggreen { background-color:var(--dkf-success)!important; }
.cpointer { cursor: pointer; }
.textOverflow { text-overflow:ellipsis; display: inline-block; text-wrap:nowrap; overflow:hidden; }

/* Tree  Importado*/
.tree{padding-left:9px;overflow-x:hidden;overflow-y:auto;position:relative}
.tree:before{display:inline-block;content:"";position:absolute;top:-20px;bottom:16px;left:0;border:1px dotted var(--dkf-tree-line);border-width:0 0 0 1px;z-index:1}
.tree .tree-folder{width:auto;min-height:20px;cursor:pointer}
.tree .tree-folder .tree-folder-header{position:relative;height:20px;line-height:20px; border-radius: 8px; }
.tree .tree-folder .tree-folder-header:hover, .tree .tree-folder .selected{background-color:var(--dkf-bg-hover)}
.tree .tree-folder .tree-folder-header .actions { display: none; margin-top: 4px; }
.tree .tree-folder .tree-folder-header:hover .actions { display: inline}
.tree .tree-folder .tree-folder-header .tree-folder-name,.tree .tree-item .tree-item-name{display:inline;z-index:2}
.tree .tree-folder .tree-folder-header>[class*="icon-"]:first-child,.tree .tree-item>[class*="icon-"]:first-child{display:inline-block;position:relative;z-index:2;top:-1px}
.tree .tree-folder .tree-folder-header .tree-folder-name{margin-left:2px}
.tree .tree-folder .tree-folder-header>[class*="icon-"]:first-child{margin:-2px 0 0 -2px}
.tree .tree-folder:last-child:after{display:inline-block;content:"";position:absolute;z-index:1;top:15px;bottom:0;left:-15px;border-left:1px solid var(--dkf-white)}
.tree .tree-folder .tree-folder-content{margin-left:23px;position:relative}
.tree .tree-folder .tree-folder-content:before{display:inline-block;content:"";position:absolute;z-index:1;top:-21px;bottom:16px;left:-27px;border:1px dotted var(--dkf-tree-line);border-width:0 0 0 1px}
.tree .tree-item{position:relative;height:20px;line-height:20px;cursor:pointer}
.tree .tree-folder-root { margin-top:10px;margin-left:8px;text-transform: uppercase;}
.tree .tree-item:hover{background-color:var(--dkf-bg-hover)}
.tree .tree-item .tree-item-name{margin-left:3px}
.tree .tree-item .tree-item-name>[class*="icon-"]:first-child{margin-right:3px}
.tree .tree-item>[class*="icon-"]:first-child{margin-top:-1px}
.tree .tree-folder,.tree .tree-item{position:relative}
.tree .tree-folder:before,.tree .tree-item:before{display:inline-block;content:"";position:absolute;top:17px;left:-21px;width:18px;height:0;border-top:1px dotted var(--dkf-tree-line);z-index:1}
.tree .tree-selected{background-color:rgba(98,168,209,0.1);color:#6398b0}
.tree .tree-selected:hover{background-color:rgba(98,168,209,0.1)}
.tree .tree-item,.tree .tree-folder{border:1px solid var(--dkf-white)}
.tree .tree-item,.tree .tree-folder .tree-folder-header{margin:0;padding:10px;color:var(--dkf-slate-550);box-sizing:content-box}
.tree .tree-item>[class*="icon-"]:first-child{color:var(--dkf-alert-warning-border);width:13px;height:13px;line-height:13px;font-size:11px;text-align:center;border-radius:3px;box-sizing:content-box;background-color:var(--dkf-gray-25);border:1px solid var(--dkf-gray-300);box-shadow:0 1px 2px rgba(0,0,0,0.05)}
.tree .tree-selected>[class*="icon-"]:first-child{background-color:var(--dkf-warning-dark);border-color:var(--dkf-warning-dark);color:var(--dkf-white)}
.tree .icon-plus[class*="icon-"]:first-child,.tree .icon-minus[class*="icon-"]:first-child{border:1px solid var(--dkf-gray-200);vertical-align:middle;height:11px;width:11px;box-sizing:content-box;text-align:center;/*border:1px solid #8baebf;*/line-height:10px;background-color:var(--dkf-white);position:relative;z-index:1}
.tree .icon-plus[class*="icon-"]:first-child:before{display:block;content:"+";font-family:"Open Sans";font-size:16px;position:relative;z-index:1}
.tree .icon-minus[class*="icon-"]:first-child:before{content:"";display:block;width:7px;height:0;/*border-top:1px solid #4d6878;*/position:absolute;top:5px;left:2px}
.tree .tree-unselectable .tree-item>[class*="icon-"]:first-child{color:#5084a0;width:13px;height:13px;line-height:13px;font-size:10px;text-align:center;border-radius:0;background-color:transparent;border:0;box-shadow:none}
.tree [class*="icon-"][class*="-down"]{transform:rotate(-45deg)}
.tree .icon-spin{height:auto}
.tree .tree-loading{margin-left:36px}
.tree img{display:inline}
.tree .tree-folder-header { position:relative; }
.tree .tree-folder-header .actions { position:absolute; top:2px; right:6px; }
.tree:before { border:none; }
.tree .emptyBox { border-left: 1px dotted var(--dkf-tree-line); padding: 2px; display: none; }
.tree ul, .pageAgrupation { margin: 10px 0 10px 10px; border-left: 1px dotted var(--dkf-tree-line); }
.tree ul li, .pageAgrupation li { margin: 10px; cursor:move; }
.tree ul li > span.fa { cursor: pointer; }
.tree-folder-name .userSelected { width: auto!important; margin-left:10px; padding:3px 6px; margin-top: -5px; }
.tree .label-children { margin-left:5px; }

/* From Bootstrap3 to Bootstrap5 */
body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; }
a { color: var(--dkf-link); }
.panel-body { padding: 15px; }
.form-label { margin-bottom: 0; }
.component-right .form-label:not(.panel-label) { width: 100%; margin-bottom:.5rem; }
.component-right .form-label:not(.panel-label):not(.hide) { display:inline-block; }
.dropdown-toggle::after { border:none; }
.portlet > .row { clear:both; }
*:focus-visible { outline: none; box-shadow: none; }
.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
.input-group>.select2 {	position: relative; flex: 1 1 auto; width: 1%!important; min-width: 0; }
.h5, h5 { font-size: 14px; }
.alert .h5:last-child, .alert h5:last-child { margin-bottom:0; }
.form-group:not([class*="mb-"]) { margin-bottom: 1rem; }
.cursor-pointer { cursor:pointer; }
.btn-block { display: block; width: 100%; }
.btn-default { color: var(--dkf-gray-900); background-color: var(--dkf-white);	border-color: var(--dkf-gray-300); }
.btn-default:hover { color: var(--dkf-gray-900); background-color: var(--dkf-border-light); border-color: var(--dkf-gray-400); }
.btn-default:focus, .btn-default.focus { color: var(--dkf-gray-900); background-color: var(--dkf-border-light); border-color: var(--dkf-gray-600); box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); }
.btn-default:active, .btn-default.active, .show > .btn-default.dropdown-toggle { color: var(--dkf-gray-900); background-color: var(--dkf-border); border-color: var(--dkf-gray-400); }
.btn-default:disabled, .btn-default.disabled { color: var(--dkf-gray-900); background-color: var(--dkf-white); border-color: var(--dkf-gray-300); opacity: 0.65; }

/* Glyph on plugins to FontAwesome (mapeo completo glyphicon-* -> FA6 Pro) */
.glyphicon { font-family: "Font Awesome 6 Pro"; font-weight: 300; display: inline-block; }
.glyphicon-check::before { content: "\f00c"; }
.glyphicon-chevron-down::before { content: "\f078"; }
.glyphicon-chevron-left::before { content: "\f104"; }
.glyphicon-chevron-right::before { content: "\f105"; }
.glyphicon-chevron-up::before { content: "\f077"; }
.glyphicon-exclamation-sign::before { content: "\f06a"; }
.glyphicon-info-sign::before { content: "\f05a"; }
.glyphicon-off::before { content: "\f011"; }
.glyphicon-ok-sign::before { content: "\f058"; }
.glyphicon-remove::before { content: "\f00d"; }
.glyphicon-remove-sign::before { content: "\f057"; }
.glyphicon-search::before { content: "\f002"; }
.glyphicon-sort-by-attributes::before { content: "\f15d"; }
.glyphicon-sort-by-attributes-alt::before { content: "\f15e"; }
.glyphicon-time::before { content: "\f017"; }

/* Group pages */
.pageAgrupation li[data-group-id] { padding: 10px 0 20px; font-weight:bold; }
.pageAgrupation li:not([data-group-id]) { padding-left: 20px; }
.pageAgrupationCreateWrapper .input-group-text { cursor:pointer; }
.menuGroup { padding-left:0!important; }
.menuGroup > span { font-weight: bold; font-size:12px; }

/* FIle upload*/
.file_upload, .file_upload_large, .file_upload_small { text-align: center !important; height: 30px !important; background: none !important; }
.file_upload, .file_upload_large, .file_upload_small, .fileUploadPaste p { color: var(--dkf-gray-400) !important; }
.file_upload:not(.errorField):not(.file_upload_highlight):not(.file_upload_inbox), .fileUploadPaste { border-width: 2px !important; border-style: dashed !important; border-radius: 6px; }
.file_upload_highlight, .file_upload_large { color: var(--dkf-gray-950) !important; border: 1px solid var(--dkf-gray-950) !important; background: var(--dkf-white) !important; }
.file_upload div { font-size:15px; }
FORM.file_upload INPUT{ width: 100% !important; }
.isImagePreview .file-uploaded { width:100%!important; height:auto!important; }
.isImagePreview .file-uploaded p { display:none; }
.file_upload > div > i, .fileUploadPaste > p > span { font-size: 40px; font-weight: 100!important; float: left; width: 100%; margin-bottom: 10px; }
.file_upload:hover, .file_upload:not(.errorField):not(.file_upload_highlight):hover, .fileUploadPaste:hover p, .fileUploadPaste:hover, .fileUploadPaste:focus-within p, .fileUploadPaste:focus-within { color:var(--dkf-focus)!important; border-color:var(--dkf-focus)!important; }
.file_upload_extensions { margin-bottom:10px; font-size: 12px; color: var(--dkf-gray-400); }
.file_upload_extensions p { margin-bottom:0; }
.removingFileWrapper { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 8px); }
.file-cover .removingFileWrapper { height: 100%; }
.removingFileWrapper .dokuLoader { position: absolute; top: calc(50% - 10px); left: calc(50% - 10px); width: 20px; height: 20px; }
.file-uploading > div, .removingFileWrapper { background: rgba(0, 0, 0, 0.3); border-radius: 10px; }

/* Avatar */
.user-avatar { border-radius:50%; }
.avatar { display:inline-block }
.avatar img { -ms-border-radius:50%; -o-border-radius:50%; border-radius:50%; box-shadow:0 1px 3px 0 rgba(0,0,0,0.3) }
.avatar-small{ max-width:40px;max-height:40px; }
.userSelected { line-height:22px; }
.userSelected img { float:left; width:14px; height:14px; margin:3px 3px 3px 1px; }
/* Color Avatar */
.avatarContainer{ height: 30px; display: flex; margin-bottom: 2px; flex-direction: row; flex-wrap: wrap;}
.avatarColor{ cursor: pointer; border-radius: 50%; flex-basis: 10%;}

/* Predicted max width */
.filter-heading.focused label.userSelected > span, .filter-heading.focused label.cmmSelected > span { background-color:transparent!important; float:left; overflow:hidden; text-overflow:ellipsis; }
.filter-heading.focused label.userSelected > span.predictedFromGrid, .filter-heading.focused label.cmmSelected > span.predictedFromGrid { width:100%; max-width:calc(100% - 16px); }

/* **************************** */
/* ****** iRealWorks CSS ****** */
/* **************************** */
body { overflow-x:hidden; }
body.overflow { overflow-y:hidden!important; }
.w100, .w-100 { width:100%; }
.w90, .w-90 { width:90%!important; }
.w80, .w-80 { width:80%!important; }
.w70, .w-70 { width:70%!important; }
.w60, .w-60 { width:60%!important; }
.w40, .w-40 { width:40%!important; }
.w30, .w-30 { width:30%!important; }
.w20, .w-20 { width:20%!important; }
.w10, .w-10 { width:10%!important; }

/* FA icons sin especificar que sean FAL */
.fa { font-weight: 300!important; }

/* Las css flexpaper setea el modal-content a display none y hace que no se vean los modales, esto lo parchea */
.in .modal-content { display:block!important; }
.modal { z-index:1065!important; }
.modal.double-modal { z-index:1066!important; }
.modal-backdrop { z-index:1064!important; }
#modal-confirm .modal-body p { font-size:15px; line-height:18px; }
.modal-open { overflow:hidden!important; }

/* Clase para esconder elementos temporalmente */
.remove-temp { display:none!important; }

.row-table{display:table;table-layout:fixed;height:100%;width:100%;margin:0}
.row-table>[class*=col-]{display:table-cell;float:none;table-layout:fixed;vertical-align:middle}
.row-table.vtop>[class*=col-]{vertical-align:top}

.btn-info { background-color:var(--dkf-info-alt); }

/* Eliminar la ordenación en tablas anterior */
table[data-sortable] th:after { content: normal; }

.portlet:not(.lightProcessIcon) a:not(.btn):hover, a.link:not(.btn):hover { color:var(--dkf-black); }
.portlet:not(.lightProcessIcon) .process_text_white a:hover, .process_text_white a.link:hover { color:var(--dkf-gray-100)!important; }

.hideNormal { display:none; }
.onadmin { width:100%!important; margin-left:0!important; }
.vcenter { display: inline-block; vertical-align: middle; float: none; }
.unselectable, .unselectable * { user-select: none; }
.nooutline { outline:none!important; }
.noshadow { box-shadow:none!important; }
.autocompleteHack { opacity:0; position:absolute; top:0; left:0; width:0; height:0; }

/* *************************** */
/* ******** PublicLink ******* */
/* *************************** */
#body_public_link { background-color:var(--dkf-white); }
#body_public_link .logo { width:100%; text-align:center; }
#body_public_link .logo img { max-width:120px; }
/* Tarjeta y pie compartidos por la pagina de enlace publico y el login */
#body_public_link .container, #body_login .container { background-color:var(--dkf-white); margin-top:5%; min-width:320px; padding:20px; border-radius: 5px; border:1px solid var(--dkf-border); }
#body_public_link .footer, #body_login .footer { text-align:center; margin:0 auto; max-width:500px; min-width:320px; padding:20px; }
#body_public_link .footer ul, #body_login .footer ul { width:100%; }
#body_public_link .footer ul li, #body_login .footer ul li { list-style-type:none; float:left; margin:0 4px; }

/* ********************** */
/* ******** Login ******* */
/* ********************** */
#body_login { background-color:var(--dkf-gray-50); }
#body_login input:-webkit-autofill, #body_login input:-webkit-autofill:hover, #body_login input:-webkit-autofill:focus, #body_login input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }
#body_login .alert-info { background-color:var(--dkf-alert-info-bg)!important; border-color:var(--dkf-alert-info-border); }
#body_login .container:not(.container-mauto) { max-width:500px; }
#body_login .container > .row { background-color:var(--dkf-white); }
#body_login:not(.registerOrg) .container > .row .row { margin-left:0!important; margin-right:0!important; }

#body_login .login-splash { width:100%; }
#body_login .input-group-text { background-color:var(--dkf-white); border:none; }
#body_login .input-group { width:100%; }
#body_login .input-group .fa { font-size:30px; width:55px; }
#body_login .input-group input { font-size:18px; border:none; border-bottom:1px solid var(--dkf-gray-200); box-shadow:none; }
#body_login .login-options-bar { width:100%; }
#body_login .login-options-bar > div { float:left; }
#body_login .login-options-bar .line { margin-top:7px; border-top:1px solid; width:45% }
#body_login .login-options-bar .circle { width:10%; text-align:center; }
#body_login .login-options-bar .circle > div { margin:0 auto; width: 15px; height: 15px; background-color:var(--dkf-black); border-radius: 50px; }
#body_login #access-layer > div { padding-right:0!important; padding-left:0!important; }
#body_login .checkbox input[type=checkbox], #body_login .checkbox input[type=radio] { margin-top:4px; }
#body_login .actual-lang { border:none; padding:0!important; }
#body_login .actual-lang .caret { margin:15px 7px 0 0; }
#body_login .logo { width:100%; text-align:center; }
#body_login .logo img { max-width:120px; }
#body_login .social { margin-top:10px; }
#body_login .social p { margin-top:4px; font-size:16px; }
#body_login .social-button-google { background-color:#de4b39!important; }
#body_login .social-button-linkedin { background-color:var(--dkf-link)!important; }
#body_login .social-button-twitter { background-color:var(--dkf-focus)!important; }
#body_login .social-button-fb { background-color:var(--dkf-facebook)!important; }
#body_login .select-language { float:right; }
#body_login .select-language .caret { float:right; }
#body_login .select-language .form-group { width:100%; }
#body_login .select-language label { float:left; font-size:18px;font-weight:normal; }
#body_login .select-language .dropdown { float:left; margin-left:10px; width:100%; }
#body_login .select-language .dropdown-toggle { width:60px; }
#body_login input:focus, #body_login input:hover, #body_login input:active { outline: none; box-shadow: none !important; }

.connect-google-wrapper > div { padding:4px 0 4px!important; }
.connect-google-wrapper svg { cursor:pointer; width:18px; height: 18px; }
.registerOrg .connect-google-wrapper svg { margin:1px 6px 0 0; }
.registerOrg .connect-google-wrapper { cursor:pointer; }
.registerAlreadyAccount { font-size: 12px; }
#remindPassForm .form-group, #remindPassForm p { text-align:left; }
#remindPassForm p { color: var(--dkf-gray-700); }
#remindPassFormMsg { text-align: left; }

/* Login OTP */
.login-numbers table { width:100%; }
.login-numbers table td { cursor:pointer; padding:10px; border:1px solid var(--dkf-gray-200); text-align:center; }
.login-numbers table td:hover { background-color:var(--dkf-bg-highlight); }
.floatLabel { position:relative; }
.floatLabel input[type="password"], .floatLabel input[type="text"] { border:1px solid; border-radius:8px!important;}
.floatLabel label { position:absolute; opacity:0; }
.floatLabel input:focus::placeholder { color: var(--dkf-white) !important; }
.floatLabel input:focus + label { top: 0; z-index:10; left:0; opacity:1; margin:-10px 0 0 5px; transition: 0.2s; padding:5px; background-color:var(--dkf-white); line-height:10px; color:var(--dkf-focus); }
.floatLabel input:focus { border-color:var(--dkf-focus)!important; }
.floatLabel input[value="hola"] { border:2px dashed yellow!important; }

.registerOrgPhone .form-group { margin-bottom:0; }
.registerOrgPhone .form-group, .registerOrgPhone select, .registerOrgPhone .floatLabel { float:left; }
.registerOrgPhone select { max-width:120px; }
.registerOrgPhone .floatLabel { width:calc(100% - 130px); margin-left:10px; }

/* ********************** */
/* ****** Cabecera ****** */
/* ********************** */

/* Ocultar el título de la página al imprimirla */
@page { size: auto;  margin-top: 0; margin-left:0; }

.label {
	padding:.2em .3em .2em;
	line-height: 11px;
}

/* Dropdown al hover */
.dropdown-hover:hover > ul.dropdown-menu, .dropdown-submenu:hover > .dropdown-menu { display: block!important; }
#user-menu-desplegable .dropdown-menu, .dropdown-hover .dropdown-menu { margin-top:0; }

/* Flechas de dropdown */
.nav-icons > .dropdown-menu:before, #comunity-dropdown .dropdown-menu:before, #user-menu-desplegable .dropdown-menu:before { position: absolute; top: -6px; left: 5px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid var(--dkf-gray-300); border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; }
.nav-icons > .dropdown-menu:after, #comunity-dropdown .dropdown-menu:after, #user-menu-desplegable .dropdown-menu:after { position: absolute; top: -5px; left: 6px;  display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid var(--dkf-white); border-left: 6px solid transparent; content: ''; }
#user-menu-desplegable .dropdown-menu:after, #user-menu-desplegable .dropdown-menu:before { left: calc(100% - 14px) !important; transform: translateX(-100%); }
#user-menu-desplegable .dropdown-menu:after { width: 14px; }
#user-menu-desplegable .dropdown-menu:before { width: 16px; }




#user-menu-desplegable .dropdown-menu:before { right:12px!important; }
#user-menu-desplegable .dropdown-menu:after { right:13px!important; }

/* Menús y Submenú */
.dropdown-menu { z-index:1065; overflow: hidden; }
.dropdown-submenu { position: relative; }
.dropdown-submenu .dropdown-menu { top: 0; right: 100%; margin-top: -1px; border-top-right-radius:0!important; }
.dropdown-submenu .label { color:var(--dkf-white)!important; position:absolute; right:20px; top:6px; }
.dropdown-submenu > a { padding: 3px 50px 3px 20px!important; }
.dropdown-toggle > .glyphicon { font-size:10px; top:0; }
.dropdown-menu > li > a { padding:3px 10px; }
.dropdown-menu.dropdown-right { right:0!important; left:auto!important; }
.arrow-grey { color:var(--dkf-gray-400)!important; }
.navbar-left { display: flex; }
.autocomplete_fieldsname a:hover,
#header .nav .fas:hover,
#header .nav .fal:hover,
#header .nav .fa:hover,
#header .nav .fa-thin:hover,
#header .nav .fa-solid:hover,
#header .nav .fa-duotone:hover,
#header .nav .fa-brands:hover { color:var(--dkf-primary)!important; }
.menu-element .popover .fal { font-size:13px!important; }
.menu-element.active a span:not(:first-child) { font-weight:bold; }
.menu-element.active a span:not(:first-child), .menu-element .submenu .active a, #main-menu li.active a > span:last-child { font-weight:bold; }
.menu-element .submenu a span { font-size:12px !important; margin-top:19px !important; }
.btn-create-process { width:100%; font-size:13px!important; }
.freemiumAddOrgIcon { cursor:pointer; font-size:13px; position:absolute; right: -15px; top: calc(50% - 10px) }
.haveSubMenu.active { padding-bottom: 10px !important; }

/* Switch */
.switch { display: inline-block; height: 16px; position: relative; width: 28px; float:left; }
.switch input { display:none; }
.slider { background-color: var(--dkf-gray-300); bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; }
.slider:before { background-color: var(--dkf-white); bottom: 3px; content: ""; height: 10px; left: 3px; position: absolute; transition: .4s; width: 10px; }
input:checked + .slider:before { transform: translateX(12px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
.switch-wrapper > span { float:left; margin-left: 10px; }

/* Barra superior */
#header { width:100%; padding:0 15px; }
.navbar { margin-bottom:0; border:none; border-bottom:1px solid; border-color:var(--dkf-border); max-height:49px; border-radius: 0; }
.navbar.fixed { position:sticky; top:0; z-index:1063; box-shadow:var(--dkf-shadow-lg); }
.brandClient { float:left; margin:7px 0 0 10px!important; }
.brandClient img { max-height:36px; }

.navbar-right { float:right !important; }
.navbar-right .input-group { max-width:200px; margin-right:10px; margin-bottom:0!important; }
.form-control, #html5-qrcode-select-camera { padding:9px 12px!important; height:auto!important; }
select.form-control[size], select.form-control[multiple], textarea.form-control[rows], #html5-qrcode-select-camera { height:auto!important; }
.navbar-right .form-control { margin:2px 0 0 0!important; }
.navbar-right .input-group-btn .btn { margin:2px 0 0 -1px!important; }
.navbar-right .row { margin-right:35px!important; }
#header > .row > div:last-child { padding-right:0!important; }
#header .movil { padding:10px; margin: 1px 5px 0 -5px; font-size:17px; }
#header h1, #header h2 { text-transform:uppercase; color:var(--dkf-white); font-size:17px; float:left; margin:11px 0 16px; }
#header h1 { font-weight:bold; }
#header-upper-menu { max-width:250px; }
#header-upper-menu h1 { text-align:center; width:calc(100% - 15px); font-weight:bold; margin-top:0; line-height:32px; position: relative; }
#header-upper-menu > a:last-child { margin: 17px 8px 0 0; font-size:14px; }
.header-upper-image { margin:0; padding:0; }
.header-upper-image img { width:100%; height:100%; float:left; max-height:49px; max-width:250px; }
.dropdown-menu .fa-spinner { font-size:13px!important; }
.nav-user, .nav-control-time { text-align:right; padding-left:50px; }
.nav-user a { color:var(--dkf-white)!important; }
.nav-user .dropdown-menu a { color:var(--dkf-gray-900)!important; }
.nav-user > div { float:left; }
.nav-user > div:first-child { padding-right:5px!important; }
.nav-user > div:last-child { padding-left:0!important; padding-right:0!important; width:40px; position:relative; margin-right:10px; }
.nav-user > div .btn:not([data-upgrade-freemium]) { font-size:10px !important; padding:1px 3px; }
.nav-user > div [data-upgrade-freemium] { margin-top: -3px; }
.nav-user img { max-width:none!important; }
.nav-user .glyphicon { top:2px; }
.nav-user .btn { margin-top:3px; }
.nav-control-time { margin-right: 0!important; }
.nav-control-time > div { margin-top: 10px; }
.nav-control-time .button-signing-time:not(.button-signing-time-in-table) { float:left; padding: 2px 5px; margin: 0 5px 0 0; }
#header .nav .nav-control-time button i.fa-solid:hover { color:var(--dkf-white)!important; }
.user-name { white-space: nowrap; float:right; }
.nav-icons > a:focus, .nav-icons > a:hover { background:none!important; }
.navbar-right > li { float:left; }
.nav-icons > a { position:relative; padding:0 8px 0!important; }
.nav-icons > a .fas,
.nav-icons > a .fa-solid,
.nav-icons > a .fa-regular,
.nav-icons > a .fa-thin,
.nav-icons > a .fa-duotone,
.nav-icons > a .fa-brands,
.nav-icons > a .fal
{ margin:0; font-size:20px!important; color:var(--dkf-white)!important; }
.nav-icons > a .badge { background-color:var(--dkf-danger-dark); position:absolute; font-size:10px; top:-15px; right:0; padding:1px 4px!important; border:1px solid var(--dkf-white); }
#dropdrownRecentDocs .badge { background-color:var(--dkf-gray-650); }
#logout-icon { position:absolute; bottom:0; right:0; }
#header .navbar-right .glyphicon:hover { color:var(--dkf-alert-info-bg)!important; }
#header .navbar-right .glyphicon-off:hover { color:var(--dkf-black)!important; }
#header .navbar-right .input-group .glyphicon:hover { color:var(--dkf-black)!important; }
#dropDownAlerts.shake-bell span { color: var(--dkf-primary)!important; }
#header-searcher-wrapper { display: flex; }
#header-searcher-wrapper * { float:left; }
#header-searcher-wrapper input { display: none; border-left: none; border-right:none; border-top:none; border-radius:0; padding: 6px !important; width: calc(100% - 36px) }
#header-shortcuts-wrapper, .header-searcher-wrapper { border-left: 1px solid; padding: 0 0 5px 10px; margin-left: 10px!important; }

/* Menú comunidades */
#comunity-name { display:table!important; float:none; max-width:300px; margin:5px 30px; line-height:12px; }
#comunity-name > div { display:table-cell!important; vertical-align:middle; overflow:hidden; }
#comunity-name > a { font-size:20px; margin: 9px 10px 0 0; color:var(--dkf-white); }
#comunityMenu, #organizationMenu { width:100%; float:left; background-color:transparent; font-size:17px; font-weight:bold; margin:0 0 0 0; line-height:18px; }
#comunityMenu i { display:inline-block; margin-top:2px; }
/* Community switcher dropdown — redesigned. The matching JSP markup +
   class names live in WebContent/html/app/jsp/themes/dokuflex/header_menu_comunity_search.jsp.
   When changing one, change both. Old rules (border-radius:0!important,
   .icons{display:none}, max-height:133px, ...) intentionally removed —
   they fought the new layout. Icons now hide at rest and reveal on row hover,
   but a MARKED icon (favourite/home, class .fas) stays visible always. */
/* Container chrome aligned with #user-menu (see docs/ux/dropdown-menu-bestpractices.md).
   Colours use --dkf-* tokens, not hardcoded hex. */
#comunity-menu { min-width:320px; max-width:360px; padding:0; overflow:hidden; border:1px solid var(--dkf-border-light); border-radius:var(--dkf-radius); box-shadow:var(--dkf-shadow-lg); }
#comunity-menu .cmm-section { padding:12px 14px 0; }
#comunity-menu .cmm-section-title { font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--dkf-gray-700); margin:0 0 8px; }
#comunity-menu #listFavCommunities { display:flex; flex-wrap:wrap; gap:6px; padding:0; max-width:none; }
#comunity-menu #listFavCommunities .btn { padding:4px 10px; font-size:0.85rem; border-radius:999px; margin-bottom:0; }
#comunity-menu .cmm-empty { font-size:0.82rem; color:var(--dkf-gray-500); font-style:italic; margin:0; }
/* Search — icon overlaid INSIDE the input (modern UX), no Bootstrap addon. */
#community_menu_search_input.cmm-search { position:relative; margin:12px 14px 6px; }
#community_menu_search_input.cmm-search .cmm-search-icon {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:var(--dkf-gray-400); font-size:0.95rem; pointer-events:none; line-height:1;
}
#community_menu_search_input.cmm-search .form-control {
    /* !important necesario: una regla global `.form-control { padding:9px 12px !important }`
       pisaba este padding-left (aunque esta tenga mas especificidad) y la lupa
       (left:12px) quedaba encima del texto del placeholder. */
    padding-left:34px !important; border-radius:var(--dkf-radius-sm); border:1px solid var(--dkf-border-light);
    background-color:var(--dkf-bg-section); box-shadow:none;
}
#community_menu_search_input.cmm-search .form-control:focus {
    background-color:var(--dkf-white); border-color:var(--dkf-primary);
    box-shadow:0 0 0 3px rgba(30,55,153,.12);
}
#community_menu_search_input.cmm-search .form-control::placeholder { color:var(--dkf-gray-500); }
#community_menu_search { max-height:320px; overflow-y:auto; margin:0; padding:4px 6px 10px; border-top:1px solid var(--dkf-border-light); }
#community_menu_search .list-group-item { display:flex; align-items:center; justify-content:space-between; gap:8px; border:0; border-radius:var(--dkf-radius-sm); padding:8px 10px; margin-bottom:2px; cursor:pointer; line-height:1.4; position:relative; }
#community_menu_search .list-group-item:hover { background-color:var(--dkf-bg-hover); }
#community_menu_search .list-group-item.active { background-color:rgba(30,55,153,.08); color:var(--dkf-primary); font-weight:600; box-shadow:inset 3px 0 0 0 var(--dkf-primary); }
#community_menu_search .list-group-item .cmm-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#community_menu_search .list-group-item .icons { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; position:static; }
/* Cada icono oculto en reposo; se revela al hover/focus de la fila. Un icono
   MARCADO (estrella de favorito -> .fas, casita de comunidad principal -> .fas)
   permanece visible siempre, aunque no haya hover, para que de un vistazo se
   vean las comunidades favoritas y cual es la principal. El estado .fas lo pone
   comunityTabInit() en dokuflex.irealworks.js (~lineas 2150-2160). */
#community_menu_search .list-group-item .icons a { opacity:0; transition:opacity var(--dkf-transition-fast); }
#community_menu_search .list-group-item:hover .icons a,
#community_menu_search .list-group-item:focus-within .icons a { opacity:1; }
#community_menu_search .list-group-item .icons a:has(.fas) { opacity:1; }
#community_menu_search .list-group-item .icons a { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; color:var(--dkf-gray-700); border-radius:var(--dkf-radius-sm); text-decoration:none; line-height:1; padding:0; }
#community_menu_search .list-group-item .icons a:hover { background-color:var(--dkf-white); color:var(--dkf-primary); }
#community_menu_search .list-group-item .icons a .fas.fa-house,
#community_menu_search .list-group-item .icons a .fa-house.fas { color:var(--dkf-primary); }
#comunity-menu .cmm-footer { border-top:1px solid var(--dkf-border-light); padding:10px 14px; background:var(--dkf-bg-section); }
#comunity-menu .cmm-footer .btn { width:100%; }

/* ============================================================================
   OU admin page (/admin#menu_unidades-organizativas) — see
   WebContent/html/app/jsp/portlets/organizationUnit/UX-REVIEW.md.
   Scoped under #manageOrgUnits so other admin sections are not affected.
   The matching JSP markup is in manageOrgUnits.jsp — when changing
   one, change both.
   ============================================================================ */

/* Toolbar — primary CTA on the right, secondaries grouped */
#manageOrgUnits .dkf-ou-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    justify-content: flex-end; margin-bottom: 8px;
}
#manageOrgUnits .dkf-ou-toolbar .btn { font-size: 0.88rem; }
#manageOrgUnits .dkf-ou-toolbar .btn-success {
    font-weight: 600; padding: 8px 16px;
    box-shadow: 0 1px 2px rgba(34,197,94,.25);
}
#manageOrgUnits .dkf-ou-toolbar .btn-light {
    background: var(--dkf-gray-25); border: 1px solid var(--dkf-slate-200); color: var(--dkf-slate-600);
}
#manageOrgUnits .dkf-ou-toolbar .btn-light:hover {
    background: var(--dkf-slate-200); color: var(--dkf-slate-900);
}
#manageOrgUnits .dkf-ou-toolbar .dkf-ou-more-actions .dropdown-menu {
    min-width: 240px; padding: 6px;
}
#manageOrgUnits .dkf-ou-toolbar .dropdown-item {
    border-radius: 6px; padding: 6px 10px; font-size: 0.88rem;
}

/* Filter labels */
#manageOrgUnits label {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--dkf-slate-500); font-weight: 600;
}

/* Tree — clear hierarchy + hover */
#manageOrgUnits .tree { padding: 4px 0; }
#manageOrgUnits .tree .tree-folder { position: relative; padding: 0; margin: 0; }
#manageOrgUnits .tree .tree-folder-header {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 6px;
    transition: background-color .12s ease-in-out;
    cursor: pointer;
}
#manageOrgUnits .tree .tree-folder-header:hover { background-color: var(--dkf-bg-hover); }

/* The legacy rule .tree-folder-name { display: inline } collapses the
   caret + label + chip onto a single inline run, which overlaps when the
   chip has its own margins. Force a flex row inside this panel so the
   label can grow and the chip stays pinned to the right of it. */
#manageOrgUnits .tree .tree-folder-header .tree-folder-name {
    display: flex; align-items: center; gap: 10px;
    flex: 1 1 auto; min-width: 0;
}

#manageOrgUnits .tree .dkf-tree-caret {
    flex-shrink: 0; width: 14px; color: var(--dkf-slate-400);
    transition: transform .15s ease-in-out;
}
/* When the children container is collapsed (display:none) the caret rotates */
#manageOrgUnits .tree .tree-folder:has(> .tree-folder-content[style*="display: none"]) > .tree-folder-header .dkf-tree-caret,
#manageOrgUnits .tree .tree-folder:has(> .tree-folder-content[style*="display:none"]) > .tree-folder-header .dkf-tree-caret {
    transform: rotate(-90deg);
}

/* OU code — monospace, discreto. Sin fondo en estado reposo para
   reducir carga visual; el chip aparece al hover de la fila. */
#manageOrgUnits .tree .dkf-ou-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem; color: var(--dkf-slate-600); font-weight: 600;
    background: transparent; padding: 2px 4px; border-radius: 4px;
    transition: background-color .12s ease-in-out, color .12s ease-in-out;
}
#manageOrgUnits .tree .tree-folder-header:hover .dkf-ou-code {
    background: var(--dkf-bg-hover); color: var(--dkf-link-active);
}
#manageOrgUnits .tree .dkf-ou-sep { color: var(--dkf-border-tab); margin: 0 4px; }
#manageOrgUnits .tree .dkf-ou-desc { color: var(--dkf-slate-900); }

/* Label cell — shrink-to-content (no grow) so the responsible chip sits
   right next to the OU identity instead of being flung to the far-right
   edge of a wide row (the chip was stranded ~1000px away, visually
   detached from the unit it belongs to). It still shrinks with ellipsis
   before the chip when the row is narrow (flex-shrink:1 + min-width:0). */
#manageOrgUnits .tree .dkf-ou-label {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Responsible chip — replaces the heavy alert-info treatment.
   The legacy rule `.tree-folder-name .userSelected { margin-top: -5px }`
   pulled the chip up by 5px and made it overlap the row text — neutralise
   it here (the chip carries both .userSelected and .dkf-ou-resp). */
#manageOrgUnits .tree .dkf-ou-resp,
#manageOrgUnits .tree .tree-folder-name .userSelected {
    display: inline-flex; align-items: center; gap: 6px;
    flex: 0 0 auto; max-width: 220px;
    /* Reposo: sólo avatar + nombre, sin chip "tipo pastilla". El chip
       aparece al hover de la fila para reducir carga visual. */
    background: transparent !important; border: 1px solid transparent !important;
    color: var(--dkf-slate-500) !important; padding: 3px 10px 3px 4px;
    border-radius: 999px; font-size: 0.82rem;
    box-shadow: none; margin: 0 !important; margin-top: 0 !important;
    overflow: hidden;
    transition: background-color .12s, border-color .12s, color .12s;
}
#manageOrgUnits .tree .tree-folder-header:hover .dkf-ou-resp,
#manageOrgUnits .tree .tree-folder-header:hover .tree-folder-name .userSelected,
#manageOrgUnits .tree .tree-folder-header:focus-within .dkf-ou-resp,
#manageOrgUnits .tree .tree-folder-header:focus-within .tree-folder-name .userSelected {
    background: var(--dkf-gray-25) !important; border-color: var(--dkf-slate-200) !important;
    color: var(--dkf-slate-600) !important;
}
#manageOrgUnits .tree .dkf-ou-resp .user-avatar {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
}
#manageOrgUnits .tree .dkf-ou-resp .dkf-ou-resp-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Edit / delete icons — visible on every row by default.
   The legacy CSS has TWO traps we must override:
     1. `.tree .tree-folder .tree-folder-header .actions { display: none }`
        (line ~470) — hides them entirely. Beaten by !important.
     2. `.tree .tree-folder-header .actions { position: absolute; right: 6px }`
        (line ~502) — positions them OVER the row content, so the
        responsibility chip name span intercepts pointer events and the
        buttons "don't work" when clicked. Force position: static so they
        sit in the flex row naturally, to the right of .tree-folder-name.
   The default btn-light is nearly white on a near-white row, so we give
   each button a visible border + slightly tinted bg. */
#manageOrgUnits .tree .actions {
    display: inline-flex !important; flex-shrink: 0; gap: 6px;
    position: static !important; right: auto !important; top: auto !important;
    margin-left: 8px;
    /* Reposo: invisibles + sin interaccion (no roban clicks). Reservamos
       el espacio con visibility para que la fila no salte de ancho al
       aparecer/desaparecer. Hover y focus-within los muestran (foco
       cubre la accesibilidad por teclado). */
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .12s ease-in-out, visibility 0s linear .12s;
    z-index: 2;
}
#manageOrgUnits .tree .tree-folder-header:hover .actions,
#manageOrgUnits .tree .tree-folder-header:focus-within .actions {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .12s ease-in-out, visibility 0s;
}
#manageOrgUnits .tree .actions .btn {
    padding: 6px 10px; font-size: 0.9rem; line-height: 1;
    border: 1px solid var(--dkf-slate-200); border-radius: 6px;
}
#manageOrgUnits .tree .actions .btn-light {
    background: var(--dkf-white); color: var(--dkf-slate-600);
}
#manageOrgUnits .tree .actions .btn-light:hover {
    background: var(--dkf-bg-hover); color: var(--dkf-slate-900); border-color: var(--dkf-border-tab);
}
#manageOrgUnits .tree .actions .btn-danger {
    background: #fef2f2; color: var(--dkf-modern-danger-text); border-color: #fecaca;
}
#manageOrgUnits .tree .actions .btn-danger:hover {
    background: var(--dkf-alert-danger-bg); color: #991b1b; border-color: var(--dkf-danger-hover);
}

/* Children — indented + connector line on the left */
#manageOrgUnits .tree .tree-folder-content {
    margin-left: 24px;
    border-left: 1px solid var(--dkf-slate-200);
    padding-left: 8px;
}
/* Single connector technique: keep ONLY the solid grey border-left above
   and suppress the legacy blue dotted pseudo-lines drawn with
   var(--dkf-tree-line). They sat at a different x (left:-21/-27px) than the
   grey line, so the two systems never aligned and read as stray asymmetric
   blue strokes (audit P1-4). The `#id` selector outranks the legacy
   `.tree .tree-folder:before` rules, so no importance override is needed.
   Scoped to #manageOrgUnits only — the other two consumers (layouts, stock
   categories) keep their original dotted connectors untouched. */
#manageOrgUnits .tree .tree-folder:before,
#manageOrgUnits .tree .tree-folder .tree-folder-content:before,
#manageOrgUnits .tree .tree-folder:last-child:after {
    display: none;
}
/* End of OU admin block */
.list-group-item .fa-heart.fas, .red { color:var(--dkf-red-bright); }
.list-group-item a, .list-group-item { text-decoration:none!important }
.list-group-item.active a { color:var(--dkf-white)!important; }
#comunity-name > div:hover #comunity-menu { display:block; }
#comunity-name > div:hover [aria-expanded="false"] #comunity-menu { display:none; }
#listFavCommunities a { margin-bottom:5px; }
.communityPortletList { position:relative; }
.communityPortletList .name { font-size:13px; color:var(--dkf-gray-900); }
.community-text { width:calc(100% - 195px); height:60px; }
.community-clickable { cursor:pointer; }
.communityPortletList:hover .community_box_top_left, .communityPortletList:hover .community_box_bottom_right, .hoverBorderEffect:hover .community_box_top_left, .hoverBorderEffect:hover .community_box_bottom_right { width:40%; height:30px; border-color:var(--dkf-link); }
.community_box_top_left, .community_box_bottom_right { width:0; height:0; position:absolute; transition: width 0.2s ease; }
.community_box_top_left { border-top:1px solid transparent; border-left:1px solid transparent; top:0; left:0; border-top-left-radius: 30px; }
.community_box_bottom_right { border-bottom:1px solid transparent; border-right:1px solid transparent; bottom:0; right:0; border-bottom-right-radius: 30px; }
#sortLayouts li { float:left; width:100%; padding:10px; border:1px solid; margin:5px; cursor:move; }

/* Menú invitaciones */
.menu-invitations { min-width:300px; }
.menu-invitations .user-avatar { width:100%; margin:0 5px; }
.menu-invitations .row > div:last-child { padding-left:0; padding-right:0; }
.menu-invitations a { color:var(--dkf-gray-900); }

/* ************************** */
/* ****** Menú lateral ****** */
/* ************************** */
#comunity-icons a { margin:0 2px; padding:5px 10px; }
#wrapper { padding-left: 0; transition: all 0.5s ease; }
#wrapper.toggled { padding-left: 250px; }
#sidebar-wrapper { border-right:1px solid var(--dkf-border); z-index: 1000; position: absolute; left: 250px; width:36px; height: calc(100%); margin-left: -250px; background: var(--dkf-white); transition: all 0.2s ease; }
#sidebar-wrapper.menuFixed { position:fixed!important; }
#affectedWfSidebar { padding:10px; z-index: 1001; background: var(--dkf-white); position:fixed; height: 100%; top: 0; left: 0; }
#affectedWfSidebar h3 { font-size:17px; margin:0; font-weight:bold; }
#main-menu {  height: calc(100% - 175px); overflow-y: auto; overflow-x: hidden; }
#wrapper.toggled #sidebar-wrapper, .menu-collapsed-hover { width: 250px!important; }
#page-content-wrapper { position: absolute; transition: all 0.5s ease; width: calc(100% - 40px); margin-left: 40px; }
#page-content-wrapper.toggled { margin-left:215px; width:calc(100% - 215px); }
#page-content-wrapper.movil { margin-left:0; width:100%; }
.sidebar-nav { width: 250px; margin: 0; padding: 0; list-style: none; }
.sidebar-nav li a, .menu-collapsed-hover a { font-size:14px; display: block; text-decoration: none; color: var(--dkf-gray-700); padding:0 10px 0 0; }
.sidebar-nav li:not(.sidebar-brand) a > span:first-child, .menu-collapsed-hover a > span:first-child { position:relative; min-width:13px; font-size:15px; margin: 0 5px 0 4px; }
.sidebar-nav li:not(.sidebar-brand) .item-caret:hover a, .sidebar-nav li:not(.sidebar-brand).active .item-caret a { text-decoration: none; }
.sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; }
.sidebar-nav > .sidebar-brand { padding: 10px 0 15px; }
.sidebar-nav > .sidebar-brand > a { font-size:25px; }
.sidebar-nav > .sidebar-brand a { color: var(--dkf-white); }
.sidebar-nav > .sidebar-brand a:hover { color: var(--dkf-white); background: none; }
.item-caret > a { white-space: nowrap; }
.item-caret > a:first-child { width:calc(100% - 35px); float:left; }
.menu-caret { width:35px; float:right; }
.submenu { display:none; padding-left:20px; }
.submenu a { font-size:13px!important; }
.submenu span { font-size: 18px!important; }
.submenu-horizontal { display: block; padding:0; margin-left:0!important; }
.submenu-horizontal li a > span { font-size: 12px!important; margin-right:3px; }
.menu-caret span { top:0!important; font-size:10px!important; }
.sidebar-nav li:not(.sidebar-brand) .item-caret:hover a, .sidebar-nav li:not(.sidebar-brand).active .item-caret a,
.sidebar-nav li.active > a, .sidebar-nav li.active > .item-caret > a, .sidebar-nav > li:not(:first-child):hover > a, .sidebar-nav > li:not(:first-child):hover > .item-caret > a { font-weight:bold; }
.sidebar-nav li.active > .submenu { display:block; }
.no-transition { transition: all 0s ease!important; }
.bootstrap-switch { margin-top:-3px; height:24px; }
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label { padding: 2px 7px; }
#main-menu li.hovered { opacity:0; }
#wrapper:not(.toggled) #main-menu li:not(:first-child):hover { position:relative; }
#wrapper:not(.toggled) #user-shortcuts { display:none; }
.menu-collapsed-hover { position:absolute; z-index:1001; }
.menu-collapsed-hover > a > span:last-child, .menu-collapsed-hover .item-caret > a > span:last-child { /*border:1px solid var(--dkf-border); border-left:none; */padding:11px 11px 11px 2px; margin-top:-1px; margin-left:-4px; margin-right:-10px; }
.menu-collapsed-hover .menu-caret { display:none; }
.menu-collapsed-hover .submenu { display:block!important; /*border:1px solid var(--dkf-border); border-top:none;*/ }
.menu-collapsed-hover .item-caret > a > span:last-child { border-left:none; border-bottom:none; }
.sidebar-nav .nav-header { text-transform:uppercase; padding: 10px; font-weight:bold; background-color:var(--dkf-gray-50); margin:5px 0; }
#user-shortcuts { padding: 0 13px 6px!important; }
#user-shortcuts-profile li { margin:0 3px; float:left; }
#user-shortcuts-profile li:first-child { margin-left:0; }
#affectedWfSidebar p { line-height: 17px; }
#affectedWfSidebarClose { position:absolute; top: 12px; right: 10px; font-size: 17px; color:inherit; }
#affectedWfList { overflow:auto; }
#affectedWfList li { border-bottom:1px solid; }
#affectedWfList li:not(.highlight):nth-child(even) { background-color:var(--dkf-bg-section); }
#affectedWfList li:last-child { border-bottom:none; }
#affectedWfList li, #affectedWfList li a { float:left; width:100%; }
#affectedWfList li a { padding:10px; color:inherit; }
#affectedWfList li a span { float:left; }
#affectedWfList li a span.fal { width:20px; }
#affectedWfList li a span:not(.fal) { width:calc(100% - 20px); line-height:16px; }
#affectedWfButton { position:absolute; bottom:15px; left:50%; transform:translateX(-50%); max-width:90%; }
#contextSidebar { overflow:hidden; }
.contextTitle { font-weight:bold; padding: 6px 10px 4px; margin-top: -8px; margin-bottom:5px; color:var(--dkf-white); }
.contextTitle > span { overflow:hidden; max-width: 250px; text-overflow: ellipsis; display:inline-block; white-space: nowrap; }
.page-role { position:absolute; right: 5px; top: 18px; }
#menu-horizontal-dom .page-role { right: 0px; top: 0px; }
#menu-horizontal-dom .mb-1 { margin-bottom:0!important; }
#menu-horizontal .menu-after-element { padding: 0 3px; }
.page-alert { float: right; }
.page-alert > span { line-height:normal; box-shadow: 0px 0px 5px -3px rgba(139,0,0,1); padding: 1px 3px; border-radius:5px; background-color: var(--dkf-white)!important; color:darkred; position:absolute; top:50%; transform: translateY(-50%) translateX(-100%); float:right; font-size: 10px!important; }
.page-alert > span:after { font-family: Font Awesome\ 5 Pro; font-weight: 700; content: "\f0f3"; color: darkred; position:relative; font-size: 10px!important; margin-left:2px; }
#main-menu li[data-is-group="1"] > a > span:first-child { display:none !important; }
#main-menu li[data-is-group="1"] > a > span:not(:first-child) { width: 100%!important; padding-left:15px; margin-top:5px; color: var(--dkf-gray-300); }
#main-menu span[data-bs-target][aria-expanded="true"].fa-angle-left::before { content: '\f107' !important; }
#main-menu { overflow-y: auto; }
#main-menu li ul li { margin-left: 10px; clear:both; }
#main-menu .btn-toggle { display: inline-flex !important; align-items: center; padding: .35rem .35rem .40rem 0; color: rgba(0, 0, 0, .65); background-color: transparent; border: 0; width:100%; }
#main-menu li ul .btn-toggle { padding-left: .35rem; }
#main-menu .btn-toggle span:not(.fa-fw) { text-align: left; }
#main-menu .btn-toggle span[id*="nav_id_"] { font-family: 'Roboto', sans-serif !important; font-size:14px; font-weight: normal; }
#main-menu li.menuGroup > .btn-toggle { padding-left: 0; margin-left: -10px; }
#main-menu li.menuGroup > .btn-toggle a { color: var(--dkf-gray-300) !important; font-size:12px; }
#main-menu .btn-toggle a { width:100%; text-align: left; margin-left:5px; overflow: hidden; text-overflow: ellipsis; }
#main-menu li.active > a,
#main-menu li.active > .btn-toggle,
#main-menu li:not(.menuGroup) .btn-toggle:hover,
#main-menu li:not(.menuGroup) .btn-toggle:focus,
.well.card-highlight, .card-highlight { background-color: rgba(30,55,153,0.1)!important; transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.maybe-toggled:not(.toggled) li.menuGroup a { max-width:46px; }
.admin-menu li a { padding:5px 0; }
.admin-menu li a > span:first-child { top: -1px; }
.admin-menu li a > span:last-child { margin-left:10px; }
.admin-menu li.active > a { border-radius: 8px; font-weight: 600; }
/* Tiles de icono del menu de administracion (manageSystem/view.jsp).
   Contrato: docs/ux/sidebar-admin-menu-bestpractices.md. El icono se pinta en
   peso LIGHT (font-weight:300 sobre 'Font Awesome 6 Pro') para igualar el
   contrato fal+fa-fw del tema sin tocar el markup que construye el JS del
   portlet. Selector por span.fa-fw (lo llevan todos los iconos del menu). */
.admin-menu li a > span.fa-fw {
	width: 34px;
	height: 34px;
	min-width: 34px;
	border-radius: var(--dkf-radius);
	background: var(--dkf-bg-hover);
	color: var(--dkf-slate-500);
	font-weight: 300;
	font-size: 15px;
	transition: var(--dkf-transition-fast);
	position: relative;
}
.admin-menu li a > span.fa-fw:before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.admin-menu li a:hover > span.fa-fw,
.admin-menu li.active > a > span.fa-fw {
	background: var(--dkf-primary);
	color: var(--dkf-white);
}
#main-menu .haveRoles { margin: 0 0 0 8px; }
#main-menu .haveRoles img { position:relative; top:-1px; }

/* Menú horizontal */
#sidebar-wrapper.menu-top { display:none; }
.menu-top > .row { margin-top:20px; }
#page-content-wrapper.menu-top { margin-left:0!important; width: 100%!important; }
#cuerpo_principal.menu-top { margin-top: 0; }
#header #main-menu { float:left; width: 100%; overflow:visible; white-space: nowrap; font-size: 0; }
#header #main-menu > li { line-height:normal; border-left: 1px solid; font-size: initial; display: inline-block; padding: 10px 10px; }
#header #main-menu #menu-edit button span:not(:first-child) { display: none; }
#header #main-menu li > a > span:first-child { margin-top:4px; }
#header .sidebar-nav li a, #header .menu-collapsed-hover a { display: inline-block; }
#header .sidebar-nav li a:not(.menu-caret), #header .menu-collapsed-hover a:not(.menu-caret) { padding:0 5px 0 5px!important; }
#header .item-caret { margin-top:2px; }
#header .item-caret a:first-child > span:first-child { float:left; margin:0 5px 5px 0; }
#header #main-menu li > a > span:not(:first-child) { margin-top:3px; }
#header #menu-edit { display: none!important; }
#header .menu-element { max-height:44px; }
#header .sidebar-nav li:not(.sidebar-brand) .item-caret:hover a, #header .sidebar-nav li:not(.sidebar-brand).active .item-caret a { background-color:transparent; }
#header .haveSubMenu { position: relative; }
#header .haveSubMenu .submenu { position: absolute; width:calc(100% + 2px); border-left:1px solid; border-right:1px solid; border-bottom:1px solid; background-color:var(--dkf-white); left:-1px; top:calc(100% - 2px); padding-left: 0; }
#header .haveSubMenu .submenu > li { padding-left: 10px!important; }
#header .haveSubMenu .submenu li > a > span:first-child { margin-right: 7px!important; }
#header .menu-caret { width:auto!important; margin:0!important; position:absolute; right: 14px; top:10px; padding:0!important; background-color:transparent!important; }
#header .menu-caret > span { margin: 8px 0 5px 10px!important; }
#header .item-caret > a:first-child { float:none; }
#header .item-caret > a:first-child span[id*="nav_id_"] { padding-right:15px; }
#header #main-menu > li a:first-child > span:first-child { margin-left: 7px!important; }
#header #menu-brand { display:none; }
#menu-horizontal { float:left; width:100%; position:relative; top: -15px; }
#main-menu-arrow-left, #main-menu-arrow-right { cursor:pointer; position:absolute; top:25px; transform: translateY(-50%); padding:17px 10px 13px; background-color:var(--dkf-white); z-index:1; }
#main-menu-arrow-left { left:-1px; }
#main-menu-arrow-right { right:-1px; }
#menu-horizontal-dom { overflow-x: auto; width:calc(100% - 40px); background-color:var(--dkf-white); }
#menu-horizontal-dom > div > ul { float:left; }
#menu-horizontal-dom li { float:left; padding-left:5px; padding-right:5px; }

#menu-horizontal-dom [id*="nav_roles_id"] { margin-left: 5px; }
#menu-horizontal-dom li.menuGroup { display:none; }
#menu-horizontal-dom::-webkit-scrollbar { display: none; }
#menu-horizontal-dom.sliderIcons { float: left; position: relative; left: 25px; }
#menu-horizontal.onlyIcons #main-menu > ul > li:not(.menuGroup) > span > a .menu-title { display:inline-block; opacity: 0; width:0; }
#menu-horizontal.onlyIcons div .haveRoles { display:none; }
.popover-content .submenu { display:block; width:calc(100% + 20px); float:left; padding: 0; margin:-9px -12px 0; }
.popover-content .submenu li { float: left; width:100%; padding: 10px; margin:0; border-bottom:1px solid; }
.popover-content .submenu li:last-child { border-bottom:0; }
.popover-content .submenu span { font-size: 14px!important; margin-right: 5px!important; }
.popover-content .submenu a { width: 100%; }
.no-margin { margin:0!important; }

/* ******************** */
/* ****** Cuerpo ****** */
/* ******************** */
#body_principal, #cuerpo_principal { background-color:var(--dkf-white); }
#cuerpo_principal { background-color:transparent; width:100%; position:static; top:0; padding:10px; margin:0 0 40px 0; }
#cuerpo_principal > .layout > .panel { border:none; box-shadow: 0 0 0 0 rgba(0,0,0,0); }
.container-fluid > .row > .col-lg-12 { padding:0; width:calc(100% - 50px); margin-left:50px; }
.container-fluid > .row > .col-lg-12.movil { width:100%; margin-left:0; }
.portlet:not(.lightProcessIcon) { width:100%; }
.layout > .panel { margin:0; background:none; }
.portlet-empty { border:2px dashed!important; padding:20px!important; }
.ui-sortable .portlet:not(.lightProcessIcon) { cursor:move; }
.layout > .panel > .columna { max-width:100%; padding-left:0!important; padding-right:0!important; }
.checkbox-mleft { margin-left:20px; }
.panel-icon-collapse { cursor:pointer; }
.move-handler { cursor:move; }
.fa-trash-can { color:red; }
.btn-danger > .fa-trash-can, .btn-danger.fa-trash-can { color:var(--dkf-white); }


/* Disable arrows on type numbers */
input[type='number'] { -moz-appearance:textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { appearance: none; }

/* Input XS */
.input-xs { height: 22px!important; padding: 2px 5px!important; font-size: 12px; line-height: 2; border-radius: 3px; }

/* Spinner */
.fa-spinner.fa-spin { color:var(--dkf-link); font-size:100px; margin:0 auto; }
.table-spinner .fa-spin, .fa-spin-small { font-size:13px; color:var(--dkf-gray-900); }

/* TaskList Proceso */
.taskList .progress { margin: 0 0 10px 0; width:100%; }
.taskList .done .text { text-decoration:line-through; }

/* Datepicker */
.ui-datepicker { width:22em!important; z-index:var(--dkf-z-popover)!important; }
.ui-widget-header { font-size:16px; color:var(--dkf-gray-700)!important; background:var(--dkf-white)!important; border:none!important; }

.ui-datepicker table td a { text-align:center!important; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-hover, html .ui-button.ui-state-disabled:active { border:1px solid transparent; background:none!important; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { color:var(--dkf-white)!important; }
.ui-state-active:not(.ui-state-highlight), .ui-widget-content .ui-state-active:not(.ui-state-highlight) { color:inherit!important; }
.datepicker-hide { display:none!important; }
.date-picker-wrapper { z-index:var(--dkf-z-popover)!important; }
.month-wrapper .gap { top:-4px!important; }
.month1 *, .month2 * { color:var(--dkf-black); }
.time1 > div , .time2 > div { margin-top:10px; font-weight:bold; float:right; color:var(--dkf-black); }
.time1 *, .time2 * { color:var(--dkf-black)!important; }
.time1 .fa, .time2 .fa { float:left; margin:1px 1px; font-size:16px; }
.time1 label, .time2 label { margin-right:5px; }
.datepickertime .datepicker_date { float:left; width:calc(100% - 140px); }
.datepickertime .datepicker_date input { border-bottom-right-radius: 0; border-top-right-radius: 0; }
.datepickertime .datepicker_select { float:left; width:70px; }
.datepickertime .datepicker_select select { margin-bottom:0!important; border-radius: 0; }
.input-group.datepickertime .datepicker_date { width:calc(100% - 177px); }
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { font-size:13px; font-weight:normal; padding:5px; }
.ui-datepicker-calendar th { text-transform: uppercase; }
.ui-datepicker-calendar a { line-height:12px!important; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { border:none; background-color:transparent; }
.ui-widget-header .ui-icon { background:none!important; }
.ui-datepicker-prev, .ui-datepicker-next { top:12px!important; border:none!important; }
.ui-datepicker-prev { left:12px!important; }
.ui-datepicker-next { right:-9px!important; }
.ui-datepicker-prev::before { font-family: Font Awesome\ 5 Pro; font-weight: 400; content: "\f104"; }
.ui-datepicker-next::before { font-family: Font Awesome\ 5 Pro; font-weight: 400; content: "\f105"; }
.ui-datepicker-title select { border:none!important; }
.ui-widget.ui-widget-content { border:none!important; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4); }
.ui-widget-content { background-color: var(--dkf-white); }
.ui-state-default { font-size:12px!important; border-radius:50%; width:25px; height:25px; padding:6px 0 0 0!important; margin:0 auto; }
.ui-datepicker-today .ui-state-default { background-color:var(--dkf-primary)!important; }
.ui-datepicker-calendar .ui-state-hover, .ui-state-active { border:1px solid var(--dkf-primary)!important; }
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { padding: 10px; font-size:13px!important; }
.flatpickr-months .flatpickr-month { height: 40px; }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .numInputWrapper:hover { background:none; }
.numInputWrapper .arrowUp, .numInputWrapper .arrowDown { display:none; }

/* Encabezados */
.portlet:not(.lightProcessIcon) .title { background:none; border:none; border-bottom:1px solid; }
.portlet:not(.lightProcessIcon) .title h3 { margin-top:0; /*letter-spacing:1px;*/ }
.big-panel { margin-bottom:0; border:none; box-shadow: none; color:var(--dkf-gray-700); }
.big-panel .panel-heading { background-color:var(--dkf-white)!important; }
.big-panel .panel-heading h2, .portlet:not(.lightProcessIcon) .panel-heading h1 { margin:0; padding:0; }
.big-panel .panel-heading h1, .portlet:not(.lightProcessIcon) .title h3 { font-size:18px; line-height:18px; font-weight:bold; }
.big-panel .panel-heading h2 { font-size:15px; line-height:15px; }
.big-panel .panel-heading .toolbar { z-index:1; }
.big-panel .panel-heading .toolbar a { margin:0 3px 0 0; font-size:13px; }
.big-panel .panel-heading .toolbar a:last-child { margin:0; }
.panel-with-buttons { padding-bottom:4px!important; }
.panel-with-buttons > .row { margin-right:0!important; margin-top:3px; margin-bottom:3px; }
.panel-with-buttons.panel-heading { padding:5px 15px; }
.panel-with-buttons .panel-title { padding-top:4px; float:left; }
.panel-title [data-toggle="popover"], .panel-title [data-bs-toggle="popover"], .panel-title [data-toggle="tooltip"], .panel-title [data-bs-toggle="tooltip"] { margin-top:2px; margin-left:6px; }
.panel .table { margin-bottom:0; }

/* Acciones de portlet */
.portlet-actions { width:50%; float:left; position:fixed; bottom:50px; right:5px; }
.portlet-actions .btn-group { float:right; }
.portlet-actions .btn-group button { padding:10px 16px; }

/* Botones */
.btn { border-radius: 8px; }
.btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; }
.btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 25px; }
.btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; }
.btn-circle.btn-xs { cursor:move; margin: 4px 1px; float:left; width: 16px; height: 16px; padding: 3px 0; font-size: 11px; border-radius: 10px; }

.btn-warning { background-color:var(--dkf-warning); border-color:var(--dkf-warning); }
.btn-warning:not(.btn-nobutton):hover { background-color:var(--dkf-warning-hover)!important; border-color:var(--dkf-warning-hover)!important; }
.btn-success, .badge-success { background-color:var(--dkf-success); border-color:var(--dkf-success); }
.btn-success:not(.btn-nobutton):hover { background-color:var(--dkf-success-hover)!important; border-color:var(--dkf-success-hover)!important; }
.btn-primary { background-color:var(--dkf-primary-light); border-color:var(--dkf-primary-light); }
.btn-primary:not(.btn-nobutton):hover, .btn-primary:not(.btn-nobutton).active { background-color:var(--dkf-primary-hover)!important; border-color:var(--dkf-primary-hover)!important; }
.btn-info { background-color:var(--dkf-info); border-color:var(--dkf-info); }
.btn-info:not(.btn-nobutton):hover { background-color:var(--dkf-info-hover)!important; border-color:var(--dkf-info-hover)!important; }
.btn-danger { background-color:var(--dkf-danger); border-color:var(--dkf-danger); }
.btn-danger:not(.btn-nobutton):hover { background-color:var(--dkf-danger-hover)!important; border-color:var(--dkf-danger-hover)!important; }

.btn-nobutton { cursor:auto!important; }
.btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) {  }
.btn-gray { border:1px solid var(--dkf-gray-300); background-color:var(--dkf-gray-150); color:var(--dkf-gray-800)!important; }

.input-group-danger { background-color:#ac2925!important; border-color:#761c19!important; color:var(--dkf-white)!important; }
.input-group-danger * { color:var(--dkf-white)!important; }

/* Summary */

#processSummary .card-number p { font-size:60%; margin-right:2px!important; }
#processSummary > div[data-categoryid] { margin-bottom: 20px; }
#processSummary > div[data-categoryid]:last-child { margin-bottom: 0; }

/* Gráficos */
.graph_layer { margin: 10px 0; position:relative; }
.graph_layer > a, .graph_layer > a.closeGraph { position:absolute; top:8px; right:12px; }
.graph_layer > a.editGraph { position:absolute; top:8px; right:35px; }
.graph_layer label { width:100%; text-align:center!important; }
.graphTdColor { width:1%; }
.graphTdColor > div { float:left; width:50px; height:20px; border:1px solid; }

/* Vacaciones */
#myHolidayCalendar .pts-corner-mask, #myHolidayCalendar #pts-toolbox-container { display:none; }
#myHolidayCalendar #addDropdown { background-color:var(--dkf-bs-success)!important; color:var(--dkf-white)!important; }
.uls li { float:left; margin: 2px 5px 2px 0; }
.uls li:last-child { margin-right:0; }
#myHolidayGraphic h3 { margin:0; }
#list-coming-holidays { padding-left:20px; }
#list-coming-holidays h3 { margin:0; }
#resumenButton { margin:5px; }
#holidaysSummary ul { margin-left:20px; }
#holidaysSummary ul li { font-size:15px; margin:5px 0; }
.holidaysLegend { float:left; width:100%; border-bottom:1px solid; padding:5px; }
.holidaysLegend b { float:left; margin:2px 0 0 5px; }
.holidaysDot { width:15px; height:15px; border-radius:50%; float:left; }
.calendar .month-container { height:auto !important; }
.calendar .months-container { display: flex; flex-wrap: wrap; margin-top:0; margin-right: -0.75rem; margin-left: -0.75rem; }
.requestDocument a > span { word-break: break-word; }
.calendar .calendar-header table th { padding: 10px!important; }
.calendar .calendar-header table th:hover { background: transparent!important; }
#infoRequest h1 { margin-top: 22px; margin-bottom:13px; }

/* Vacaciones — leyenda unificada del calendario (sustituye los badges inline
   con colores hardcoded que se partian izquierda/derecha sobre la cabecera). */
.holidays-legend { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 10px; padding:8px 10px; background:var(--dkf-gray-25); border:1px solid var(--dkf-border-light); border-radius:var(--dkf-radius-sm); }
.holidays-legend__item { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--dkf-gray-700); white-space:nowrap; }
.holidays-legend__swatch { width:12px; height:12px; border-radius:var(--dkf-radius-sm); border:2px solid var(--dkf-gray-300); background:transparent; flex:none; }
.holidays-legend__swatch--contract { border-color:var(--dkf-holiday-contract); }
.holidays-legend__swatch--today { border-color:var(--dkf-holiday-today); }
.holidays-legend__swatch--limit { border-color:var(--dkf-holiday-limit); }
.holidays-legend__types { display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:auto; }
.holidays-legend__types .badge { margin:0; border-radius:var(--dkf-radius-sm); }

/* Tablas */
table { margin-top:10px; }
th { white-space:nowrap; }
thead tr:first-child .glyphicon { margin-right:5px; color:var(--dkf-gray-400); }
.glyphicon-sort-by-attributes, .portlet:not(.lightProcessIcon) .glyphicon-sort-by-attributes-alt { color:var(--dkf-gray-700)!important; }
.filter-heading .form-control, .table .form-control { min-width:100%; height:25px!important; padding:4px 8px!important; border-radius:4px; }
.table select.form-control { padding:2px 4px!important; }
.filter-heading .input-group { margin-bottom:0!important; width:100%; }

.filter-heading .input-group .form-control:last-child { border-top-left-radius: 0!important; border-bottom-left-radius: 0!important; }
.filter-heading .input-group-text { padding:5px 8px 4px; }
.filter-heading .alert-info { padding:2px 5px 4px; margin-bottom:0!important; }
.filter-heading .alert-info a { top:3px; }
.selected-item { background-color:var(--dkf-white); }
table tbody td.actions:last-child { white-space:nowrap; }
.btn-group:not(.btn-noflex):not(.note-btn-group) { display: flex; }
.btn-group > .btn:not(.note-btn) { /*float:none;*/ position:relative; padding:4px 8px; }
.btn-group > .btn:not(.note-btn):not(.btn-secondary):not(.btn-default):not(.btn-light) { color:var(--dkf-white)!important; }
.btn-group > .btn-xs:not(.note-btn) { padding:1px 5px; }
thead th > a { color:var(--dkf-gray-900)!important; }
#gridFiltersHeader th { vertical-align:middle; border-top:none; }
thead tr:first-child th { border-bottom:none!important; }
.well {background-color:var(--dkf-white)!important; margin-bottom:10px;min-height: 20px; padding: 19px; border: 1px solid var(--dkf-border-light); border-radius: 4px;
}
thead, thead.well, .like-table-header { background-color:var(--dkf-bg-header); }
.filter-date-range input { width:50%!important; max-width:136px; min-width:0!important; }
.filter-date-range input:last-child { margin-left:-1px; }
thead th .glyphicon-info-sign { color:var(--dkf-gray-900)!important; margin: 0 0 0 2px; top:2px; }
table:not([data-fixheaders]) thead th[data-refresh="1"] { width:53px!important; }
table .text-center { text-align:center!important; }
table thead input[type=checkbox] { margin:0; }
.btn:not(.btn-with-label-normal) .badge { position:absolute; bottom:-15px; right:3px; top:auto; }
.btn .badge-info { background-color:#3A87AD ; }
.panel>.table-bordered, .panel>.table-responsive>.table-bordered { border:1px solid var(--dkf-gray-200); }
.alert-summary { margin-bottom:0!important; }
.like-table-header { float:left; width:100%; padding: 7px 5px; }
thead th:last-child .btn-group { min-width:60px; }
.table-responsive { margin-bottom:10px; padding:0 1px; }
.table-responsive table { border-radius:4px; }
.dropdown-select { margin-top:-6px; }
.tablesorter-header { background-image:none!important; }
.alert-success td { color:var(--dkf-alert-success-text)!important; background-color:var(--dkf-alert-success-bg)!important; border-color:var(--dkf-alert-success-border)!important; }
tr.active > td { background-color:var(--dkf-bg-highlight)!important; }
tr.alarm_yellow:not(.flag_only) > td, .label-1 { background-color:var(--dkf-bg-highlight)!important; }
tr.alarm_yellow > td .flag-list, tr.alarm_yellow > td .flag-list *, li.alarm_yellow .fa, li.alarm_yellow .far, li.alarm_yellow .fas { color:#edde3d!important; }
tr.alarm_red:not(.flag_only) > td, .label-2 { background-color:var(--dkf-red-soft)!important; }
tr.alarm_red > td .flag-list, tr.alarm_red > td .flag-list *, li.alarm_red .fa, li.alarm_red .far, li.alarm_red .fas { color:#ff4949!important; }
tr.alarm_3:not(.flag_only) > td, .label-3 { background-color:var(--dkf-alert-info-bg)!important; }
tr.alarm_3 > td .flag-list, tr.alarm_3 > td .flag-list *, li.alarm_3 .fa, li.alarm_3 .far, li.alarm_3 .fas { color:#b1c3d2!important; }
tr.alarm_4:not(.flag_only) > td, .label-4 { background-color:#ccffc2!important; }
tr.alarm_4 > td .flag-list, tr.alarm_4 > td .flag-list *, li.alarm_4 .fa, li.alarm_4 .far, li.alarm_4 .fas { color:#6dd25a!important; }
tr.alarm_5:not(.flag_only) > td, .label-5 { background-color:#ffd9f7!important; }
tr.alarm_5 > td .flag-list, tr.alarm_5 > td .flag-list *, li.alarm_5 .fa, li.alarm_5 .far, li.alarm_5 .fas { color:#ff7ae3!important; }
.flag-list:hover { background-color:var(--dkf-white)!important; border-color:var(--dkf-gray-300)!important; }
.highlight, #userCommentPredict label:hover, #newLayoutWrapper ul li:hover, #newLayoutWrapper ul li.active, .showHistoryLayoutAdvice, .wizardSteps li.active, .wizardSteps li.active::after, .summernoteManualMentions .active, .summernoteManualMentions a:hover, #weekAssignShiftMassive .shiftOnShiftPerDay li:has(input:checked) { background-color:var(--dkf-bg-highlight)!important; }
.viewerPDF .highlight { background-color:#fff400!important; }
.table .label { margin:0!important; display: inline-block; }
.table td hr { margin:0!important; }
.table td input[type="checkbox"] { width:auto; }
.aggregationsFoot td:not(.agg) { border:none!important; }
.aggregationsFoot td { text-align:right!important; }
tfoot>tr>td.agg { background-color:var(--dkf-gray-50); }
tfoot>tr>td.agg, tfoot>tr>td.agg * { color:#f69100; }
.table-bordered { border:none; }
tr[data-groupId] { display:none; }
.table-filters-user * { font-size:12px; }
.table-filters-user .checkbox { margin-left: 17px!important; }
.table-filters-user .move { cursor:move; display:none; }
.table-filters-user li:hover .move { display:block; }
.table-filters-user > ul { margin: 5px 0 10px 0!important; }
.popover-content .table-filters-user .checkbox input[type="checkbox"] { margin-top:1px!important; }
table[data-fixheaders].fix thead[data-cloned] { opacity:0; }
table[data-fixheaders].fix thead { padding-top:9px!important; }
table[data-fixheaders].fix { position:relative; }
table[data-fixheaders].fix thead:not([data-cloned]) { /*position:fixed;*/ position:absolute; z-index:1; top:0; border:none; box-shadow: 0 0 5px 0 rgba(0,0,0,0.5); }
#modalRelationTable[data-fixheaders].fix thead:not([data-cloned]) { top:11px; }
#modalRelationTable tbody td { cursor:pointer; }
table[data-gridgroup] th { text-align:center; }
[data-level="1"] td:first-child{ padding-left: 20px; }
[data-level="2"] td:first-child{ padding-left: 40px; }
[data-level="3"] td:first-child{ padding-left: 60px; }
[data-level="4"] td:first-child{ padding-left: 80px; }
[data-level="5"] td:first-child{ padding-left: 100px; }
.tdEditableField { min-width:150px!important; }
.tdEditableFieldSave .fa-spin { font-size:13px; color:var(--dkf-gray-900); }
.tdEditableFieldLink { color:inherit!important; }
.tdEditableFieldSave span { color:var(--dkf-bs-success); }
.tdEditableFieldCancel span { color:var(--dkf-danger-dark); }
.popover-content { min-width:276px; }
.table-bordered thead, .table-bordered tbody { border-color:transparent }
.filter-heading.focused .select2 { z-index:2!important; }
.filter-heading .select2, .filter-heading .select2-container--default .select2-selection--single { height:30px!important; }
.filter-heading .select2-container--default .select2-selection--single { border-right:none!important; background-color:transparent; }
.filter-heading:not(.focused) .select2-selection { border:none!important; }
.filter-heading .select2-container--default .select2-selection--single .select2-selection__arrow { display:none; }
.filter-heading .select2-container--focus * { outline:none!important; }
.fixedColumnLeft { position:relative!important; left:0; z-index:5!important; }
.fixedColumnRight { position:relative!important; right:0; z-index:0!important; }
table.fixedTable { position:absolute; left:16px; }
.tableChecksWrapper { position:relative; }
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { line-height: 1.42857143; vertical-align: top; }

/* Paginación */
.pagination { margin-top:0; }
.pagination li.active a { color:var(--dkf-white)!important; }
.pagination li a.arrow, .pagination li:first-child a, .pagination li:last-child a { padding-top: 5px; padding-bottom: 7px; }

/* Estadísticas de tickets */
.input-group-double input { width:50%!important; }

/* Estadísticas de portlet */
.step_numbers { font-size: 20px; font-weight: bolder; line-height: 21px; margin-right: 5px; }
.step_numbers_alert { margin: 4px; font-size: 12px; background: lightcoral; color: white; border-radius: 3px; padding: 2px 4px !important; }
.step_numbers_small { margin: 4px; margin-top: 2px !important; font-size: 14px; color: darkgray; }
.step_flex { padding: 1px; display: flex; }
.text_graphic { position: relative; font-weight: lighter; font-size: 50px; }
#approvalChart, #approvalChart2 { max-height: 130px; }
#approvalChart3 { max-height: 300px; }
.card_users { margin: 5px; padding:6px; border: 1px solid lightgrey; border-radius: 5px; }
.title_card_step { width: 100%; clear:both; font-weight: lighter; text-align:right; }
.number_card_step { margin-top: 20px; font-weight: bolder; float: right; }
.text_light { font-weight: lighter; color:darkgrey; }
.user_name_avatar { display: flex; padding:1px; }
.user_name_avatar img { display: flex; }
.user_name_avatar div { overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; margin-left: 5px; padding-top: 6px; }

.timings_list_steps { border-top: 1px solid lightgray; padding:10px; }
.timings_list_steps div { padding:5px; }
.timings_list_steps_title { font-size: 12px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase ; }
.timings_list { border-radius: 5px; margin: 5px; padding: 5px 15px; min-height: 300px; color:var(--dkf-gray-900); }
.user-avatar-title_name { cursor:pointer; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; margin-left: 5px; }
.timingStep_box { padding: 3px 8px; width: 75%; text-align: center; margin: 3px; color: white; border-radius: 3px; font-size: 13px; }
.workflowStepsTable { width: 100%; }
.workflowStepsTable .tablesorter-header-inner {padding: 5px!important;}
.workflowStepsTable .tablesorter-icon { margin-top:3px!important; }

/* Tour — editor point-and-click */
#selector-create-tour-top, #selector-create-tour-bottom, #selector-create-tour-left, #selector-create-tour-right { z-index:1062; position: fixed; transition:all .1s ease; background-color:var(--dkf-blue-pale)!important; }
#selector-create-tour-top, #selector-create-tour-bottom { height:2px; }
#selector-create-tour-left, #selector-create-tour-right { width:2px; }
.tour-elements .highlight { background-color:transparent!important; border:2px solid var(--dkf-blue-pale)!important; padding:10px 0; }
.tour-element { margin-bottom:10px; }
.tour-element .btn-move { cursor:move; }
.tour-element i { word-break: break-word; }

/* Tour — skin dkfTour para intro.js 8.5 (runtime dokuflex.tour.js pone
   tooltipClass:'dkfTour'). introjs.min.css se inyecta en runtime DESPUÉS
   de este fichero, por lo que estas reglas ganan por especificidad
   (.dkfTour). Los !important de este bloque anulan estilos INLINE que
   escribe el propio intro.js (box-shadow/background del helperLayer). */
.introjs-helperLayer { background-color:transparent!important; box-shadow:0 0 0 3px var(--dkf-primary), 0 0 0 6px rgba(30,55,153,.28), rgba(15,23,42,.62) 0 0 0 5000px!important; border-radius:var(--dkf-radius)!important; } /* !important: anula el box-shadow/background INLINE que escribe introjs.min.js en cada paso */
.introjs-tooltip.dkfTour { font-family:var(--dkf-font-family); min-width:320px; max-width:min(400px, calc(100vw - 24px)); border-radius:var(--dkf-radius-lg); box-shadow:0 12px 40px rgba(15,23,42,.22), 0 2px 8px rgba(15,23,42,.12); color:var(--dkf-slate-700); }
.dkfTour .introjs-tooltip-header { padding:14px 48px 0 20px; min-height:0; }
.dkfTour .introjs-tooltip-title { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--dkf-primary); line-height:1.5; width:auto; min-height:0; }
.dkfTour .introjs-skipbutton { width:32px; height:32px; line-height:32px; top:8px; right:8px; font-size:20px; font-weight:400; color:var(--dkf-slate-400); border-radius:var(--dkf-radius-sm); transition:color var(--dkf-transition-fast), background-color var(--dkf-transition-fast); }
.dkfTour .introjs-skipbutton:hover, .dkfTour .introjs-skipbutton:focus { color:var(--dkf-slate-700); background-color:var(--dkf-gray-50); }
.dkfTour .introjs-tooltiptext { padding:10px 20px 6px; font-size:14px; line-height:1.6; }
.dkfTour .introjs-tooltiptext p { margin:0 0 8px; }
.dkfTour .introjs-tooltiptext p:last-child { margin-bottom:0; }
.dkfTour .introjs-tooltiptext strong { color:var(--dkf-slate-900); }
.dkfTour .introjs-tooltiptext ul { margin:4px 0 8px; padding-left:18px; }
.dkfTour .introjs-progress { height:4px; margin:8px 20px 0; border-radius:2px; background-color:var(--dkf-slate-200); }
.dkfTour .introjs-progressbar { background:linear-gradient(90deg, var(--dkf-primary-light), var(--dkf-primary)); }
.dkfTour .introjs-tooltipbuttons { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 16px 14px; border-top:1px solid var(--dkf-gray-100); margin-top:10px; }
.dkfTour .introjs-button { padding:7px 14px; border:1px solid var(--dkf-slate-200); border-radius:var(--dkf-radius-sm); font-size:13px; font-weight:500; text-shadow:none; background-color:var(--dkf-white); color:var(--dkf-slate-600); transition:all var(--dkf-transition-fast); }
.dkfTour .introjs-button:hover { background-color:var(--dkf-gray-50); border-color:var(--dkf-slate-400); color:var(--dkf-slate-700); }
.dkfTour .introjs-button:focus { background-color:var(--dkf-white); border-color:var(--dkf-primary-light); box-shadow:0 0 0 3px var(--dkf-primary-tint); color:var(--dkf-slate-700); }
.dkfTour .introjs-nextbutton, .dkfTour .introjs-donebutton { background-color:var(--dkf-primary); border-color:var(--dkf-primary); color:var(--dkf-white); }
.dkfTour .introjs-nextbutton:hover, .dkfTour .introjs-nextbutton:focus, .dkfTour .introjs-donebutton:hover, .dkfTour .introjs-donebutton:focus { background-color:var(--dkf-primary-hover); border-color:var(--dkf-primary-hover); color:var(--dkf-white); }
.dkfTour .introjs-button.introjs-disabled { cursor:not-allowed; opacity:.45; background-color:var(--dkf-white); border-color:var(--dkf-slate-200); color:var(--dkf-slate-400); box-shadow:none; }
.introjs-helperNumberLayer { display:none; }

/* Public inbox */
.inboxUser > div { border:1px solid var(--dkf-gray-400); padding:5px; border-radius:5px; }
.publicInboxProcess { width:100%; }
.publicInboxProcess .percentage { font-size:11px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); }
.publicInboxProcess .file_upload { border:none!important; box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.2); }
.publicInboxProcess .progressbar-value { clear:both; float:left; background-color: #52d752; height:15px; }
.publicInboxIcon, .publicInboxText, .publicInboxUpload { float:left; }
.publicInboxIcon, .publicInboxUpload { position:relative; height:32px;  }
.publicInboxUpload { float:right; text-align:right; }
.publicInboxIcon i { font-size:30px; }
.publicInboxUpload i { font-size:40px; }
.publicInboxIcon i, .publicInboxUpload i { position:absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }
.publicInboxIcon { width:70px; }
.publicInboxText { text-align:left; width:calc(100% - 140px); overflow:hidden; text-overflow: ellipsis; white-space: nowrap; line-height:16px; }
.publicInboxText strong { color:var(--dkf-gray-900); }
.publicInboxText span { font-size:12px; }
.publicInboxUpload { width:70px; }
.is-uploading .publicInboxUpload i { animation: dokuSpin 0.5s infinite linear; }
.form-group .publicInbox { margin-top:0!important; margin-bottom:0!important; }

/* Public links */
.publicLinkPasswordWrapper { float:none; margin:0 auto; }

/* Doku Loader */
.dokuLoader, .dokuLoader:after, .dokuLoader:before { border-radius: 50%; border: 1px solid transparent; }
.dokuLoader { float:left; margin: 0 4px 0 0; display: block; position: relative; width: 15px; height: 15px; border-top-color: #fa3044; animation: spin 2s linear infinite; }
.table-no-result .dokuLoader { margin-top: 2px; }
.dokuLoader:after, .dokuLoader:before { content: ""; position:absolute; }
.dokuLoader:before { top: 1px; left: 1px; right: 1px; bottom: 1px; border-top-color: #00aaff; animation: spin 2.5s linear infinite; }
.dokuLoader:after { top: 3px; left: 3px; right: 3px; bottom: 3px; border-top-color: #ffc300; animation: spin 1.5s linear infinite; }
.card-number .dokuLoader { float:left; width:28px; height:28px; margin-top:1px; }
.dokuLoaderLetter { font-family: Arial, serif; color:var(--dkf-primary-dark); font-size:28px; line-height:30px; position:absolute; top:50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

.dots {
	margin-top: 18px;
}

.dots span {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 4px;
	border-radius: 50%;
	background: #2196f3;
	opacity: 0.5;
	animation: dots-bounce 1.2s infinite ease-in-out;
}

.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dots-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
	40% { transform: translateY(-6px); opacity: 1; }
}

@keyframes fadeIn {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes spin {
	0%   { transform: rotate(0deg);
	}
	100% { transform: rotate(360deg);
	}
}

/* Pestañas verticales */
.tab-content { border:1px solid var(--dkf-border-tab); padding:16px 15px; position:relative; z-index:11; clear: both; overflow:auto; }
.tabs-left .tab-content { clear: none !important; padding-top:0!important; flex-grow: 1; }
.tab-content.no-padding{padding:0}
.tab-content.padding-32{padding:32px 24px}
.tab-content.padding-28{padding:28px 21px}
.tab-content.padding-24{padding:24px 18px}
.tab-content.padding-20{padding:20px 15px}
.tab-content.padding-16{padding:16px 12px}
.tab-content.padding-12{padding:12px 9px}
.tab-content.padding-8{padding:8px 6px}
.tab-content.padding-4{padding:4px 3px}
.tab-content.padding-0{padding:0}
.tab-content.padding-10{padding:10px 8px}
.tab-content.padding-6{padding:6px 5px}
.tab-content.padding-2{padding:2px 2px}
.nav-tabs { border-color:var(--dkf-border);margin-bottom:-1px !important}
.nav-tabs > li { cursor:pointer; }
.nav-tabs > li > a,.nav-tabs > li > a:focus{border-radius:var(--dkf-tab-radius, 0)!important;background-color:var(--dkf-bg-section);color:var(--dkf-gray-500);margin-right:-1px;line-height:16px;position:relative;z-index:11;border-color:var(--dkf-border-tab)}
.nav-tabs > li > a:hover{background-color:var(--dkf-white);color:var(--dkf-tab-active);border-color:var(--dkf-border-tab)}
.nav-tabs > li > a:active,.nav-tabs > li > a:focus:not(:focus-visible){outline:none!important}
.nav-tabs > li:first-child > a{margin-left:0}
.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus{color:var(--dkf-slate-550);border-color:var(--dkf-border-tab);border-top:2px solid var(--dkf-tab-active);border-bottom-color:transparent;background-color:var(--dkf-white);z-index:11;line-height:16px;margin-top:-1px;box-shadow:0 -2px 3px 0 rgba(0,0,0,0.15)}
.tabs-below > .nav-tabs{margin-bottom:0;margin-top:-1px !important;border-color:var(--dkf-border-tab) !important;}
.tabs-below > .nav-tabs > li > a,.tabs-below > .nav-tabs > li > a:hover,.tabs-below > .nav-tabs > li > a:focus{border-color:var(--dkf-border-tab)}
.tabs-below > .nav-tabs > li.active > a,.tabs-below > .nav-tabs > li.active > a:hover,.tabs-below > .nav-tabs > li.active > a:focus{border-color:var(--dkf-border-tab);border-top-width:1px;border-bottom:2px solid var(--dkf-tab-active);border-top-color:transparent;margin-top:0;box-shadow:0 2px 3px 0 rgba(0,0,0,0.15)}
.tabs-left > .nav-tabs > li { float:none; }
.tabs-left > .nav-tabs > li > a,.tabs-right > .nav-tabs > li > a{ min-width: 74px; margin-right: 0; margin-bottom: 3px; }
.tabs-left > .nav-tabs { border-bottom:0; margin-bottom:0; border-color:var(--dkf-border-tab); float: left; margin-right: -1px; border-right: 1px solid var(--dkf-gray-200); }
.tabs-left > .nav-tabs > li > a,.tabs-left > .nav-tabs > li > a:focus,.tabs-left > .nav-tabs > li > a:hover{border-color:var(--dkf-border-tab);margin:0 -1px 0 0}
.tabs-left > .nav-tabs > li.active > a,.tabs-left > .nav-tabs > li.active > a:focus,.tabs-left > .nav-tabs > li.active > a:hover{border-color:var(--dkf-border-tab);border-top-width:1px;border-left:2px solid var(--dkf-tab-active);border-right-color:transparent;margin:0 -1px 0 -1px;box-shadow:-2px 0 3px 0 rgba(0,0,0,0.15)}
.tabs-right > .nav-tabs{margin-bottom:0;margin-left:-1px;border-color:var(--dkf-border-tab)}
.tabs-right > .nav-tabs > li > a,.tabs-right > .nav-tabs > li > a:focus,.tabs-right > .nav-tabs > li > a:hover{border-color:var(--dkf-border-tab);margin:0 0 0 -1px}
.tabs-right > .nav-tabs > li.active > a,.tabs-right > .nav-tabs > li.active > a:focus,.tabs-right > .nav-tabs > li.active > a:hover{border-color:var(--dkf-border-tab);border-top-width:1px;border-right:2px solid var(--dkf-tab-active);border-left-color:transparent;margin:0 -1px 0 -1px;box-shadow:2px 0 3px 0 rgba(0,0,0,0.15)}
.nav-tabs > li > a > .badge{padding:0 4px;line-height:15px;opacity:.75}
.nav-tabs > li > a > [class*="icon-"]{opacity:.75}
.nav-tabs > li.active > a > .badge,.nav-tabs > li.active > a > [class*="icon-"]{opacity:1}
.nav-tabs li [class*=" icon-"],.nav-tabs li [class^="icon-"]{width:1.25em;display:inline-block;text-align:center}
.nav-tabs > li.open .dropdown-toggle{background-color:var(--dkf-tab-active);border-color:var(--dkf-tab-active);color:var(--dkf-white)}
.nav-tabs > li.open .dropdown-toggle .caret{margin-top:7px}
.nav-tabs .dropdown-toggle .caret{margin-top:7px}
.tab-content { overflow:auto; }
.modal .tab-content { overflow:visible!important; }
.tabbable{*zoom:1}
.tabbable:before,.tabbable:after{display:table;line-height:0;content:""}
.tabbable:after{clear:both}
.tabbable .tab-with-data > a { background-color:lightyellow; }

/* Pestañas activas */
.nav-tabs>li.active{ font-size: var(--dkf-tab-font-size, 15px)!important; font-weight:bold!important; }
.nav-tabs>li.active >a{ font-size: var(--dkf-tab-font-size, 15px)!important; color:var(--dkf-white)!important; font-weight:bold!important; border-bottom: 1px solid var(--dkf-border-tab)!important; background-color: #428bca!important; }

/* Tooltips */
.ui-tooltip { opacity: 1; filter: alpha(opacity=100); }
.popover-content > div[data-tooltip-scroll] { padding:5px; max-height:100px; overflow:auto; }
.popover-close { position:absolute; top: 3px; right: 3px; }
.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .bs-popover-bottom .popover-header::before { border-bottom:none; }

/* Predictivos */
.textSuggestions { line-height:12px; position:absolute; z-index:1065; /*margin-top:-2px; min-width:100%;*/ }
.suggestionsResult { background-color:var(--dkf-bg-section); min-width:300px; width:100%; overflow:hidden; border-color:var(--dkf-gray-200); outline:0; box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);	border-radius:4px; }

.suggestionsResult img, .nophoto, #listComments .user img, .listComments .user img { padding:0!important; margin:5px; border-radius:50%; border:1px solid; width:40px; height:40px; }
.nophoto { float:left; border:none; font-size:21px; text-align: center; color:var(--dkf-white); font-weight:normal; padding-top:14px!important; text-transform: uppercase; }
.suggestionsResult a { height:auto; }
.suggestionsResult > a { height:auto; background-color:var(--dkf-white); padding:0 0 6px!important; width:100%; float:left; }
.suggestionsResult > a:hover span, .suggestionsResult > a:first-child span { color:var(--dkf-black)!important; }
.suggestionsResult > a:hover, .suggestionsResult > a:first-child { background-color: var(--dkf-gray-50); }
.suggestionsResult > span > a { background-color:transparent!important; color:var(--dkf-white)!important; font-size:11px; margin:5px; }
.suggestionsResult .user-avatar { float:left; }
.suggestionsResult span.category { margin:1px; }
.suggestionsResult span.category.first { margin:5px; }
.selected-item { margin:0; border:1px solid var(--dkf-gray-300); padding:3px 5px; border-radius: 4px; }
.selected-item .glyphicon { top:2px; }
.predicted { margin:0; border:1px solid; border-color:var(--dkf-gray-300)!important; width:100%; padding:9px; }
.approverData .predicted { width:auto; }
.searchbig { font-size:15px; }
.searchbig, .searchlittle { font-weight:normal; }
.searchheading { color:var(--dkf-black); }
.searchheading strong { float:none!important; }
.searchlittle { font-size:12px; }
.suggestionsResult a span.searchheading { float:left; padding-top:13px!important; }
.input-group .form-control.cmmsearchtext, .input-group .form-control.usersearchtext { border-top-left-radius: 8px!important; border-bottom-left-radius: 8px!important; }

/* Portlet control Gastos */
.widget-box, .widget-box-2 { overflow:hidden; border:1px solid transparent!important; border-radius:6px; }
.widget-box a, .widget-box-2 a { font-size:18px; line-height:20px; }
.widget-box span, .widget-box-2 span { font-size:50px; }
.widget-box p, .widget-box-2 p { font-size:12px; }
.widget-box .row > div, .widget-box-2 .row > div { padding:15px 0; }
.widget-box .row > div:last-child { padding-left:15px; }
.widget-box .row > div .clearfix, .widget-box-2 .row > div .clearfix { margin-top:5px; }

.widget-box.widget-color-1 { background-color:var(--dkf-info-alt); }
.widget-box.widget-color-1 *, .widget-box-2.widget-color-1 .glyphicon { color:var(--dkf-white)!important; }
.widget-box.widget-color-1 .row > div:first-child, .widget-box-2.widget-color-1 .glyphicon { background-color:var(--dkf-link); }
.widget-box.widget-color-1:hover, .widget-box.widget-color-1:hover .row > div:last-child { background-color:#42c6ef; }

.widget-box.widget-color-2 { background-color:transparent; border:1px solid var(--dkf-gray-400)!important; }
.widget-box.widget-color-2 *, .widget-box.widget-color-3:hover .row > div:last-child * { color:var(--dkf-black)!important; }
.widget-box.widget-color-2 .row > div:first-child, .widget-box-2.widget-color-2 .glyphicon { background-color:var(--dkf-gray-500); }
.widget-box.widget-color-2 .row > div:first-child *, .widget-box-2.widget-color-2 .glyphicon { color:var(--dkf-black)!important; }
.widget-box.widget-color-2:hover, .widget-box.widget-color-2:hover .row > div:last-child { background-color:var(--dkf-gray-400); }

.widget-box.widget-color-3 { background-color:transparent; border:1px solid var(--dkf-info-alt)!important; }
.widget-box.widget-color-3 * { color:var(--dkf-white)!important; }
.widget-box.widget-color-3:hover .row > div:last-child * { color:var(--dkf-black)!important; }
.widget-box.widget-color-3 .row > div:first-child, .widget-box-2.widget-color-3 .glyphicon { background-color:var(--dkf-info-alt); }
.widget-box.widget-color-3 .row > div:last-child *, .widget-box-2.widget-color-3 .glyphicon { color:var(--dkf-black)!important; }
.widget-box.widget-color-3:hover, .widget-box.widget-color-3:hover .row > div:last-child { background-color:var(--dkf-info-alt); }

.widget-box.widget-color-4 { background-color:transparent; border:1px solid #fc4b6c!important; }
.widget-box.widget-color-4 *, .widget-box-2.widget-color-4 .glyphicon { color:var(--dkf-white)!important; }
.widget-box.widget-color-4:hover .row > div:last-child * { color:var(--dkf-black)!important; }
.widget-box.widget-color-4 .row > div:first-child, .widget-box-2.widget-color-4 .glyphicon, .widget-box.widget-color-4:hover, .widget-box.widget-color-4:hover .row > div:last-child { background-color:#fc4b6c; }
.widget-box.widget-color-4 .row > div:last-child * { color:var(--dkf-black)!important; }

.widget-box.widget-color-5 { background-color:transparent; border:1px solid var(--dkf-accent)!important; }
.widget-box.widget-color-5 *, .widget-box-2.widget-color-5 .glyphicon { color:var(--dkf-white)!important; }
.widget-box.widget-color-5:hover .row > div:last-child * { color:var(--dkf-black)!important; }
.widget-box.widget-color-5 .row > div:first-child, .widget-box-2.widget-color-5 .glyphicon, .widget-box.widget-color-5:hover, .widget-box.widget-color-5:hover .row > div:last-child { background-color:var(--dkf-accent); }
.widget-box.widget-color-5 .row > div:last-child * { color:var(--dkf-black)!important; }

.widget-box ul, .widget-box-2 ul { margin: 10px 0 0 10px; }
.widget-box ul li a, .widget-box-2 ul li a { font-size:13px!important; }
.widget-labels { margin-top: 5px!important; }
.widget-labels p:first-child { margin-left: 0!important; }
.widget-box .label, .widget-box-2 .label { color:var(--dkf-black)!important; }
.widget-box .label-info, .widget-box-2 .label-info { border:1px solid #31829a; }
.widget-box .label-1, .widget-box-2 .label-1 { border:1px solid #ccd18b; }
.widget-box .label-2, .widget-box-2 .label-2 { border:1px solid #ff4949!important; }
.widget-box .label-3, .widget-box-2 .label-3 { border:1px solid #b1c3d2!important; }
.widget-box .label-4, .widget-box-2 .label-4 { border:1px solid #6dd25a!important; }
.widget-box .label-5, .widget-box-2 .label-5 { border:1px solid #ff7ae3!important; }

.widget-box-2 { border:1px solid var(--dkf-gray-200)!important; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.widget-box-2 .row > div:first-child { background-color:transparent!important; }
.widget-box-2 .glyphicon { border-radius:100%; padding:15px; font-size:30px; }
.widget-box-2 a { color:var(--dkf-black)!important; }
.widget-box-2 label { color:var(--dkf-gray-600)!important; font-weight:normal; }
.widget-box-2 > div > div:first-child:not('.widget-labels') { padding:15px!important; }

.sheetsPending > a { float:left; margin-bottom:3px; }

/* Usuarios */
#profileUserPhoto { border-radius:50%; margin:10px auto; }

/* Tickets */
.fa.red { color:red; }
.fa.green, .green { color:green; }
.fa.blue { color:blue; }
.fa.yellow, .fas.yellow { color:#ffd200; }
#tabsTickets .tab-content {	flex: 1; padding-left: 1rem; }

/* Calendario */

.divCalendar:not([class*="col-md"]) { position: relative; display: inline-block; width: 100%; margin-bottom: 15px; }
.divCalendar .showCalendarButtons { margin-top: 13px; }
.divCalendar .btn-group > .btn { font-size: 10px; border: var(--dkf-white) 1px solid; padding: 8px 12px; background-color: var(--dkf-gray-150); }
.divCalendar .btn-group > .btn.active { background-color: var(--dkf-primary); }
.divCalendar .btn-group > .btn:hover { z-index: 1; }
.divCalendar .pts-header-date-display { width: 90px; margin-right: 10px; font-weight: bold; }
.divCalendar .pts-nav-buttons { margin-right: 25px; }
.divCalendar .calendarTopRow { float: left; width: 100%; padding: 10px; }
.divCalendar .calendarTopRow .monthDisplay { float: left; width: 140px; line-height: 30px; font-size: 26px; font-weight: bold; }
.divCalendar .calendarTopRow .navButtons { float: left; margin-right: 25px; }
.divCalendar .calendarTopRow .navButtons .btn { background-color: transparent; border: none; padding: 0; }
.divCalendar .calendarTopRow .navButtons i { position: relative; color: var(--dkf-primary); }
.divCalendar .calendarTopRow .navButtons .btn:focus, .divCalendar .calendarTopRow .navButtons .btn:focus:active { outline: inherit; outline-offset: inherit; }
.divCalendar .calendarTopRow .navButtons .btn > i { position: relative; font-size: 24px; margin: 4px 0; }
.divCalendar .calendarTopRow .navButtons .btn > i > i { position: absolute; top: calc(50% - 5px); left: calc(50% - 4px); font-size: 11px; }
.divCalendar .calendarTopRow .navButtons .btnNextMonth > i > i { left: calc(50% - 2px); }
.divCalendar .calendarTopRow .calendarFilters { float: left; margin-right:10px; }
.form-group .filterItem { position: relative; float: left; display: inline-block; margin-right: 5px; }
.form-group .filterItem:last-of-type { margin-right: 0; }
.form-group .filterItem input { padding: 8px 26px 8px 12px !important; border-radius: 10px; border-color: var(--dkf-gray-150); color: var(--dkf-gray-700); }
.form-group .filterItem .fa-icon { position: absolute; top: 7px; right: 8px; cursor: pointer; color: var(--dkf-gray-700); font-size: 20px; z-index: 3; }
.form-group .filterItem .input-group-text { position: absolute; right: 22px; top: 10px; padding: 0; background-color: transparent; border: none; z-index: 3; }
.form-group .filterItem .chosen-container { min-width: 130px; max-width: 200px; }
.form-group .filterItem .chosen-container > a { border-radius: 10px; border-color: var(--dkf-gray-150) !important; color: var(--dkf-gray-700); }
.form-group .filterItem .chosen-container.chosen-with-drop > a { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.form-group .filterItem .chosen-container-single .chosen-single div { display: none; }
.form-group .filterItem > i { position: absolute; right: 8px; margin: 5px 0; font-size: 24px; color: var(--dkf-gray-700); pointer-events: none; }
.form-group .filterItem > i > i { position: absolute; top: calc(50% - 5px); left: calc(50% - 4px); font-size: 11px; }
.divCalendar .calendarTopRow .dateFilter { position: relative; width: 100px; }
.divCalendar .calendarTopRow .dateFilter > span { position: absolute; right: 10px; top: 6px; font-size: 20px; color: var(--dkf-gray-650); pointer-events: none; }
.divCalendar .calendarTopRow .dateFilter > input[type="text"] { margin-bottom: 0 !important; }
.divCalendar .calendarTopRow .dateFilter .fieldDatePicker.onlyMonth .ui-datepicker-calendar { display: none; }
.contentCalendar { display: inline-block; width: 100%; border: var(--dkf-gray-150) 1px solid; border-radius: 4px; padding: 12px 12px 8px 12px; }
.component .contentCalendar { background-color:var(--dkf-white); margin-bottom: 25px; }
.contentCalendar .highlighted, div[data-group] .rowCalendar > div.highlighted, .headerElement[data-today="1"].highlighted, div[data-group] .rowCalendar > div[data-today="1"].highlighted { background-color: #5fff5f; }
.scrollCalendar { display: inline-block; width: 100%; overflow: auto; max-height: 400px; }
.headerCalendar { float:left; width: 100%; position: sticky; top: 0; z-index: 15; background-color:var(--dkf-white); }
.headerElement { float:left; width: 60px; padding: 10px 0; text-align: center; font-weight: 600; border-right: var(--dkf-gray-150) 1px solid; }
.headerCalendar .headerElement { cursor:pointer; }
.headerUser .headerElement.empty { padding:0; }
.headerElement.empty, #timeSheetInfo header > div:first-of-type { width: 150px; }
#timmingsInfo div[data-group] header .headerText { width: 149px; }
#timmingsInfo div[data-group] header .headerText .label { position:absolute; right: 13px; display: none; }
#timmingsInfo div[data-group] header .headerText:hover .label { display: inline; }
.headerElement.empty { position: sticky; top: 0; left: 0; z-index:1; }
.headerElement.aggregateField { position: sticky; z-index: 10; top: 0; right: 0; width: 120px; padding: 8px 0; }
.headerElement[data-today="1"], .contentCalendar [data-today="1"], .calendarWrapper [data-today="1"], [data-row][data-today="1"] > div:first-child, div[data-group] .rowCalendar > div:not(.tooltip)[data-today="1"] { background: rgba(252, 248, 227, 0.5)!important; }
.headerElement > div { float: left; width: 100%; text-align: center; font-size: 20px; }
[data-caltype="hours"] .headerElement > div { font-size: 13px; }
.headerElement > span { float: left; width: 100%; margin-top: 12px; text-align: center; font-size: 16px; font-weight: 500; }
[data-caltype="hours"] .headerElement > span { display: none; }
div[data-group] { position: relative; float:left; width: 100%; background-color: #d7d7ff; }
div[data-group][data-subgroup], #timmingsInfo div[data-group][data-subgroup] header .headerText { background-color: var(--dkf-gray-50); }
div[data-group] header { position: sticky; top: 0; left: 0; display: inline-block; height: 22px; }
div[data-group] header > span { display: inline-block; margin: 6px 0 0 4px; font-weight: 600; }
div[data-group] > div { float:left; width: 100%; }
div[data-group] .rowCalendar { position: relative; display: flex; width: 100%; background-color: var(--dkf-white); }
div[data-group] .rowCalendar > div:not(.tooltip) { float:left; width: 60px; min-width:60px; border-right: var(--dkf-gray-150) 1px solid; }
div[data-group] .rowCalendar > div:not(.tooltip):first-of-type { position: sticky; z-index: 10; top: 0; left: 0; width: 150px; padding: 10px 5px; background-color: var(--dkf-white); font-size: 12px; line-height: 16px; }
div[data-group] .rowCalendar > div:not(.tooltip):first-of-type > span { float:left; width:205px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
div[data-caltype="hours"] div[data-group] .rowCalendar > div:not(.tooltip):first-of-type { width: 150px; padding: 20px 5px 0 5px; z-index:11; }
div[data-group] .rowCalendar > div:not(.tooltip).aggregateField { position: sticky; z-index: 10; top: 0; right: 0; width: 120px; padding: 5px 0; font-weight: 500; }
div[data-group] .rowCalendar > div:not(.tooltip).aggregateField > div > span { font-weight: 600; }
div[data-group] .rowCalendar > div:not(.tooltip).aggregateField > .hoursPending > span { color: #ff0000; }
div[data-group] .rowCalendar > div:not(.tooltip).aggregateField > .hoursPending > span.positive { color: var(--dkf-green-strong); }
div[data-group] .rowCalendar .taskElement { position: absolute; height: 30px; padding: 10px 8px 0 8px; margin-top: 5px; background-color: #40e0d0; color: var(--dkf-white); border-radius: 13px; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; }
div[data-caltype="hours"] div[data-group] .rowCalendar .taskElement { height: 40px; padding: 15px 8px 0 8px; margin-top: 9px; }
div[data-caltype="hours"] div[data-group] .rowCalendar .taskShiftSigning { padding-top: 2px!important; }
div[data-caltype="hours"] div[data-group] .rowCalendar .taskShiftSigning .small { font-size: 70%; width: 100%; float:left; margin-bottom:-1px; }
div[data-group] .rowCalendar .taskElement:hover { z-index: 3; }
div[data-group] .rowCalendar .taskElement .taskTag { position: absolute; top: 3px; right: 4px; padding: 4px 8px; font-size: 10px; border-radius: 20px; }
div[data-group] .rowCalendar > .colorLayer { position: absolute; width: 100%; height: 100%; left: 0; z-index: 10; opacity: 0.5; pointer-events: none; }
.aggregateField { background-color: var(--dkf-gray-50); font-size: 12px; line-height: 16px; border-left: var(--dkf-gray-150) 1px solid; font-weight: 600; }
.btnAdd { position: absolute; left: 0; top: 0; font-size: 24px; cursor: pointer; }
.contentCalendar ::-webkit-scrollbar { width: 6px; height: 6px; }
.contentCalendar ::-webkit-scrollbar-button { width: 0; height: 0; }
.contentCalendar ::-webkit-scrollbar-thumb { background: var(--dkf-gray-150); border: 0 none var(--dkf-white); border-radius: 50px; }
.contentCalendar ::-webkit-scrollbar-thumb:hover { background: var(--dkf-border-input); }
.contentCalendar ::-webkit-scrollbar-thumb:active { background: var(--dkf-gray-150); }
.contentCalendar ::-webkit-scrollbar-track { background: transparent; border: 0 none var(--dkf-white); border-radius: 50px; }
.contentCalendar ::-webkit-scrollbar-track:hover { background: transparent; }
.contentCalendar ::-webkit-scrollbar-track:active { background: transparent; }
.contentCalendar ::-webkit-scrollbar-corner { background: transparent; }
.withoutEnd { border-top-right-radius: unset !important; border-bottom-right-radius: unset !important; }
.withoutEnd:not(.taskShiftSigning) { width: 85px !important; }
div[data-caltype="weeks"] .scrollCalendar { max-height:none; }
div[data-caltype="weeks"] table { float:left; width: 100%; }
div[data-caltype="weeks"] table tr:nth-child(2) td { padding-top: 10px!important; }
div[data-caltype="weeks"] td { vertical-align: top; }
div[data-caltype="weeks"] td > div { float:left; width: 100%; border:1px solid; border-radius: 5px; padding: 10px; position:relative; min-height: 37px; }
div[data-caltype="weeks"] td .dayOfMonth { position:absolute; top: 10px; right: 10px; font-size: 12px; }
div[data-caltype="weeks"] td .contentOfDay { margin-top: 20px; }
div[data-caltype="weeks"] td .contentOfDay .btn { visibility:hidden; margin: 2px; }
div[data-caltype="weeks"] td:hover .contentOfDay .btn { visibility:visible; }
div[data-caltype="weeks"] td.dayNotInMonth div { border:none; }
div[data-caltype="weeks"] th { width: 14.2%; font-size:20px; font-weight: 100; border-bottom: 1px solid; padding-bottom:10px !important; }
div[data-caltype="weeks"] th, div[data-caltype="weeks"] td { padding: 5px; }

/* TimeSheet */
#cardsInfoSheets .card{ max-width:300px; padding:10px; border: 1px solid lightgray; height: 150px; margin:3px; }
#cardsInfoSheets .card .card-body{ padding-top: 0; margin-top: -10px; }
#cardsInfoSheets .card .card-body .btn-add { margin-top:25px; font-size:16px; }
#cardsInfoSheets .card .card-title { margin: 8px 0 0; font-size:20px; }
#cardsInfoSheets .threadUsers{ margin-top:10px; max-height:100px; overflow:auto; }
#cardsInfoSheets .threadUsers > strong { float:left; margin-bottom:15px; }
#cardsInfoSheets .threadUsers .list { text-align:center; }
#cardsInfoSheets .card .card-text{ font-size: 13px; }
#cardsInfoSheets .card .avatar-letter{width: 40px;height: 40px;padding-top: 14px;border-radius: 50%;display: inline-block;	margin:2px;}
#cardsInfoSheets .card .avatar-letter a{color: white;font-family: 'PT Sans', Verdana, sans-serif;font-size: 18px;font-weight: 600; line-height:14px;}
#monthlySummary .card-number { color:var(--dkf-gray-600); font-size:30px!important; right:10px; }
#monthlySummary .card > .row > div { min-height:100px!important; }
#timmingsInfo td { vertical-align: middle!important; }
#timmingsInfo .nameCellTable span { float:left; margin-top:10px; }
#timmingsInfo tr.active > td { background-color: whitesmoke !important; }
#timmingsInfo td[data-buttonPlus] { text-align:center!important; }
#timmingsInfo [data-buttonPlus] a { opacity:0; }
#timmingsInfo [data-buttonPlus]:hover a { opacity:1 }
#timmingsInfo td:not(:first-child) { text-align: right; }
#timmingsInfo .nophoto { padding-top:7px!important; font-size:14px; width:30px; height:30px; }
.btnUsersMissing { position:absolute; right:5px; top:5px; }
.hover { color:white; }
.table-scroll { position:relative; margin:auto; overflow:hidden; }
.table-wrap { width:100%; overflow:auto; }
.table-scroll table { width:100%; margin:auto; border-collapse:separate; border-spacing:0; }
.table-scroll th, .table-scroll td { padding:5px 10px; background:var(--dkf-white); white-space:nowrap; vertical-align:top; max-width:300px; text-overflow:ellipsis; overflow: hidden; }
.table-scroll tr:nth-of-type(odd) td, .table-scroll tr:nth-of-type(odd) th { background:var(--dkf-bg-section); }
.clone { position:absolute; top:0; left:0; pointer-events:none; z-index:1061; }
.clone th, .clone td { visibility:hidden }
.clone tbody th { visibility:visible; color:red; }
.clone .fixed-side { visibility:visible; }
.clone thead, .clone tfoot{background:transparent;}
#timmingsInfo [data-group] .close-group-panel { margin:9px 0 5px 5px; cursor:pointer; }
#timmingsInfo [data-date] { position:relative; }
#timmingsInfo div[data-group] .rowCalendar .taskElement { font-size:12px; position:absolute; top:calc(50% - 17px); left:calc(50% - 22px); border-radius:4px; background-color:var(--dkf-white); border:1px solid var(--dkf-gray-150); text-align:center; color:var(--dkf-black); height:23px; padding:3px 0 0; }
.newDayReport { height:100%; position:relative; cursor:pointer; }
.totalCounts > div { position:relative; }
.totalCounts > div > div { font-size:12px; top:calc(50% - 6px); left:calc(50% - 14px); position:absolute; }
.totalCounts, .totalCounts > div:first-of-type { background-color:transparent!important; }
.totalCounts { position:absolute!important; top: 0; }
.newReport { display:none; cursor:pointer; position:absolute; top:calc(50% - 10px); left: calc(50% - 10px); }
.newReport i { font-size:14px; border:1px solid var(--dkf-gray-150); padding: 2px 4px; border-radius:4px; }
.newDayReport:hover .newReport { display:inline; }
.newReport i, .rowCalendar:not(.totalCounts) [data-date] > div:not(.newDayReport):not(.tooltip) { background-color:var(--dkf-white); }
#timmingsInfo .headerUser .headerElement:not(.empty) { padding:19px 0!important; }
#timmingsInfo .headerUser .user { white-space: nowrap; }
#timmingsInfo .headerUser .user > span { padding:17px 0; overflow:hidden; text-overflow:ellipsis; float:left; text-align:left; font-size:14px; line-height:15px; width:calc(100% - 45px)!important; }
#timmingsInfo .headerUser .user .nophoto { margin-top:9px; }
#timmingsInfo div[data-group] header { height:30px; cursor:pointer; }
#timmingsInfo div[data-group] header .headerText { position: sticky; top: 0; left: 0; display: inline-block; height: 30px; z-index:11; background-color:#d7d7ff; white-space: nowrap; width: 218px; }
#timmingsInfo div[data-group] header .headerText:after { font-family:Font Awesome\ 5 Pro, Font Awesome\ 5 Brands, Font Awesome\ 5 Free, Font Awesome\ 5 Solids, Helvetica; content:'\f077'; position:absolute; top:1px; right:2px; font-size:10px; }
#timmingsInfo div[data-group] header .headerText.colapsed:after { content:'\f078'; }
#timmingsInfo div[data-group] header .headerText > span { display: inline-block; margin: 9px 0 0 4px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width:calc(100% - 25px) }
#timmingsInfo .totalCounts > div { min-height:30px; }
#timmingsInfo .headerUser > div { float:left; }
#timmingsInfo .headerAgreement > div { float:left; }
#timmingsInfo .headerUser > div > div { min-height:50px; }
#timmingsInfo .headerAgreement > div > div { min-height:35px; }
#timmingsInfo .headerAgreement .headerElement { padding:12px 0 0; }
#timmingsInfo .headerAgreement .headerElement.empty { text-align:left; padding-left:10px; }
#timmingsInfo .headerCalendar .headerElement.empty { background-color:var(--dkf-white); }
#timmingsInfo .headerUser .headerElement.empty, #timmingsInfo .headerUser > div { background-color:var(--dkf-alert-info-bg); }
#timmingsInfo .headerAgreement .headerElement.empty, #timmingsInfo .headerAgreement > div { background-color:var(--dkf-alert-warning-bg); }
#timmingsInfo div[data-group] { min-height:22px; }
#timmingsInfo div[data-type] [data-date] { cursor:pointer; }
#timmingsInfo .headerAgreement .headerElement > div, #timmingsInfo .headerUser .headerElement > div { font-size:12px; font-weight: normal; }
#timmingsInfo .headerUser .headerElement > div { font-weight:bold; }
#timmingsInfo .scrollCalendar { display: inline-block; width: 100%; overflow:visible; overflow-x:auto; min-height:500px; }
#timmingsInfo .extraHours { padding: 5px 0; background-color:var(--dkf-bs-success); width:85%; margin: -5px auto 0; float:none; border-radius:4px; }
#timmingsInfo .multipleSelect { background-color:var(--dkf-bg-highlight)!important; }
#multiDaysDesc .alert, #mandatoryTimmingsMessage .alert { padding:10px!important; }
#modalListTimings .btn-danger { color:var(--dkf-white)!important; }
#timmingsInfo div[data-group] .rowCalendar > div:not(.tooltip):first-of-type,
#timmingsInfo div[data-caltype="hours"] div[data-group] .rowCalendar > div:not(.tooltip):first-of-type,
#timmingsInfo .headerElement.empty, #timeSheetInfo header > div:first-of-type { width: 220px; min-width:220px; }
#timmingsInfo .headerTotal > div { font-size:16px; }
#timmingsInfo .headerElement.columnTotal, #timmingsInfo div[data-total-td] { position: relative; }
#timmingsInfo [data-total-td] label { position: absolute; top:50%; left:50%; transform: translateY(-50%) translateX(-50%); }
#timmingsInfo .btnCollapse { border:2px solid; border-radius: 50%; width:24px; height:24px; position: absolute; top:0; left: 30px; }
#timmingsInfo .btnCollapse::before { top:3px; left:4px; position: absolute; }
#addTimesheetSheet { margin-top:19px; }
.button-signing-time:not(.button-signing-time-in-table) { font-size: 12px!important; border:1px solid; padding: 10px; border-radius: 5px; margin: 0 0 10px 0; background-color:var(--dkf-white); }

/* Control time Shifting */
.employeesList ul li  { float:left; width: 100%; margin: 4px 0; border-bottom:1px solid; padding-bottom:7px; }
.employeesList ul li:last-child { padding-bottom:0; border-bottom:none; }
.employeesList ul li > div { width: calc(50% - 2px); }
.employeesList ul li > div:first-child { float:left; margin-right: 2px; position:relative; }
.employeesList ul li > div:last-child { float:right; margin-left: 2px; }
.employeesList ul li > div:last-child > div { clear:both; float:left; margin:2px 0; padding-bottom: 5px; border-bottom: 1px dashed; }
.employeesList ul li > div:last-child > div:first-child { margin-top: 0; }
.employeesList ul li > div:last-child > div:last-child { border-bottom:0; margin-bottom: 0; padding-bottom:0; }
.shiftOnDaysWrapper h3 { margin-top:0; }
.shiftOnDaysWrapper .listShiftOnDays > ul > li, .shiftsLegend > ul > li { position: relative; cursor: pointer; border: 1px solid; border-radius: 5px; padding: 5px; margin-bottom:5px; }
.shiftsLegend > ul > li { cursor: auto; }
.shiftsLegend p { margin-bottom: 0!important; }
.shiftOnShiftPerDay > li { border: 1px solid; border-radius: 5px; padding: 5px; margin-bottom:5px; float:left; width: 100%; }
.workersNumberForShift { float:right; max-width: 105px; }
.workersNumberForShift input { text-align: center; }
.workersNumberForShift .input-group-text { cursor:pointer; }
.shiftOnDaysWrapper .listShiftOnDays > ul > li:last-child, .shiftsLegend > ul > li:last-child { margin-bottom:0; }
.shiftOnDaysWrapper .listShiftOnDays .fa, .shiftsLegend .fa { position:absolute; top: 50%; right: 10px; transform: translateY(-50%); }
#massiveShiftOnDayWorker .well, .well-small { padding: 10px; }
#massiveShiftOnDayWorker [data-shiftId] > div:first-child,
#formShiftOnDay [data-shiftId] > div:first-child { float:left; width: calc(100% - 110px); }
.tableWeekQuadrant { width: 100%; float:left; }
.tableWeekQuadrant th, .tableWeekQuadrant .day-cell > strong, .tableWeekQuadrant .day-header { font-size: 13px; font-weight: 400; color: var(--dkf-slate-500); width: 12.5%; text-align:center; line-height:20px!important; }
.tableWeekQuadrant .day-header, .tableWeekQuadrant .day-cell { margin:5px; width:calc((100% - 70px) / 7); float:left; padding: 15px; }
.tableWeekQuadrant .day-header { margin-bottom: 0; margin-top:8px; padding-top: 10px; padding-bottom: 6px; }
.tableWeekQuadrant .day-cell { padding-top:25px; border:1px solid; height:110px; position:relative; border-radius:8px; }
.tableWeekQuadrant .day-cell > div:not(.tooltip) { position:relative; float:left; margin: 2px; }
.tableWeekQuadrant .day-cell > div > span { width: 12px; height:12px; position:absolute; bottom:-2px; right:-2px; border-radius:3px; border: 1px solid var(--dkf-white); }
.tableWeekQuadrant th strong, .tableWeekQuadrant .day-cell > strong { font-weight: 600!important; font-size: 16px; color: var(--dkf-slate-900); }
.tableWeekQuadrant .day-cell > strong { position:absolute; top: 5px; right: 5px; }

.tableWeekQuadrant th > div .checkbox { margin-top: 8px!important; }
.tableWeekQuadrant thead > tr:first-child th { padding: 10px !important; }
.tableWeekQuadrant thead > tr:first-child th > div.input-group { margin-top:10px; }
.tableWeekQuadrant tr td:last-child { position:relative; }
.tableWeekQuadrant tr td:last-child .checkbox { display:inline; }
.tableWeekQuadrant tr td:last-child .owncheckbox { top: 50%; transform: translateY(-50%); }
.tableWeekQuadrant tbody td > div { float:left; }
.tableWeekQuadrant tbody td:not(.table-no-result):first-child > div:first-child { max-width: 25px; }

.tableWeekQuadrant tbody td:not(.table-no-result):first-child > div:last-of-type { width: calc(100% - 30px); margin-left: 5px; }
.tableWeekQuadrant tbody td:not(.table-no-result):not(:first-child) > div { cursor:pointer; position:absolute; left:calc(50% - 24px); padding: 2px 8px; border-radius:5px; }
.tableWeekQuadrant tbody td:not(.table-no-result):not(:first-child) > div > span { font-size: 12px; }
.tableWeekQuadrant tbody td:not(.table-no-result):last-child span { float:right; margin-right: 15px; margin-top: 2px; }
.tableWeekQuadrant tr[data-assignedid] > td { position:relative; }
.tableWeekQuadrant tr[data-assignedid] > td .btn { display:none; position:absolute; right: 0; }
.tableWeekQuadrant tr[data-assignedid] > td:hover .btn { display:block; }
.navButtonsWeek { font-size: 16px; font-weight: 400; margin-left: 0; color: var(--dkf-slate-600); }
.navButtonsWeek .btnToday { margin-left: 20px; }
#weekAssignShiftMassive .shiftOnShiftPerDay li { cursor:pointer; }
.shiftsLegendWeekQuadrant { margin-top: 10px; }
.boxShiftPerDay { overflow:hidden; font-size:12px; border:1px solid; padding: 5px; border-radius:5px; cursor:pointer; float:left; margin:2px; max-width: calc(50% - 4px); }
.boxShiftPerDay span { white-space: nowrap; text-overflow: ellipsis; max-width: 100%; float:left; overflow:hidden; }
th .boxShiftPerDay { font-size:11px; padding: 2px 4px; }
.allDayRow { display:none!important; opacity:0.5; cursor:pointer; }
.allDayColumn { display:none!important; opacity:0.5; cursor:pointer; font-size: 17px; }
th:hover .allDayColumn { opacity:1; }
tr:hover .allDayRow { opacity:1; }
.shiftsInDay th { padding: 3px 5px 5px 7px!important; }
.shiftsInDay th:first-child { padding-top: 6px!important; }
.shiftsInDay .input-group { width: 100%; float:left; }
.shiftsInDay .predicted > span { float:left; max-width: calc(100% - 30px); overflow:hidden; text-overflow:ellipsis; }
.shiftsInDay .predicted img { float:left; }
.shiftsInDay .predicted a { float: right; }
.shiftsInDay .predicted { padding: 2px 5px!important;}
.controlTime { float:left; width: 100%; padding-top: 20px !important; }
.controlTimeFromProcess { padding-top: 0 !important; }
.controlTimeFromProcess .panel-body { padding:0 !important; }
.controlTime h4 { font-weight: 100 !important; }
.controlTime .panel-heading:not(.note-toolbar), .verifactuAdmin .panel-heading:not(.note-toolbar) { border: none !important; padding: 20px 20px 10px !important; }
.controlTime .grid .separador { height: auto; padding: 10px 15px; }
.controlTime .grid .separadorPag { margin: 12px 13px 8px 0; }
#signingReportDetail .commentsList .smallScroll { float:left; width: 100%; max-height:200px; overflow:auto; }
#signingReportDetail .commentsList ul { float:left; width: 100%; }
#signingReportDetail .commentsList li { float:left; width: 100%; border-bottom: 1px solid; margin-bottom: 10px; }
#signingReportDetail .commentsList li:last-child { border:none; margin-bottom:0; }
#signingReportDetail .commentsList li p { margin-top:5px; margin-bottom:0; }
#signingReportDetail .commentsList li p:last-child { margin-bottom:10px; }
#signingReportDetail .commentsList li:last-child p:last-child { margin-bottom:0; }
.panel.panelControlTime { border-radius: 10px; border:none; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); }
.panel.panelControlTime .panel-icon { top: -1px; }
.panel.panelControlTime .divCalendar { float: right; }
.panel.panelControlTime .divCalendar .calendarTopRow { width:auto; padding-top:0; padding-right: 0; }
.controlTime:not(.controlTimeUser) .divCalendar .calendarTopRow { display:flex; align-items:center; flex-wrap:wrap; gap: 0 14px; }
.controlTime:not(.controlTimeUser) .divCalendar .calendarTopRow .monthDisplay { float:none; width:auto; font-size:20px; font-weight:600; line-height:30px; }
.controlTime:not(.controlTimeUser) .divCalendar .calendarTopRow .navButtons { float:none; margin-right:0; }
.controlTime:not(.controlTimeUser) .calendarTopRow .navButtonsWeek br, .controlTime:not(.controlTimeUser) .calendarTopRow .navButtonsWeek > .clearfix { display:none; }
.panel.panelControlTime .divCalendar .btnNextDay, .panel.panelControlTime .divCalendar .btnNextYear { width:auto; padding-right: 0; }
.panel.panelControlTime .divCalendar .btn { padding-top:0; padding-bottom:0; }
.signingsPerDayHeader, .signingsPerDayBody { float:left; width:100%; display: block; }
.signingsPerDayHeader { display:flex; }
.signingsPerDayHeader > div, .signingsPerDayBody > div:not(.signingsActualTime) { display: flex; flex-direction: row; padding: 10px; justify-content: space-between; align-items: center; }
.signingsPerDayHeader > div:last-child { width: 100%; flex-wrap: nowrap; justify-content: space-between; }
.signingsPerDayHeader > div:last-child > div { flex: 1; text-align: center; box-sizing: border-box; padding: 5px; border-left: 1px solid var(--dkf-border-light); color: var(--dkf-slate-400); font-size: 11px; }
.signingsPerDayHeader > div:last-child > div:last-child { border-right: 1px solid var(--dkf-border-light); }
.signingsPerDayHeader > div:not(:last-child) span { font-weight: bold; }
.signingsPerDayHeader > div:nth-child(2) { justify-content:center; }
.signingsPerDayBody { position:relative; }
.signingsActualTime { position:absolute; border-left:2px solid var(--dkf-primary); opacity:.55; height: 100%; z-index:2; width: 1px!important; }
.signingsEmpty { position:relative; width: 100%; min-height: 150px; }
.signingsEmpty > div { position:absolute !important; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; }
.signingsPerDayBody > div:not(.signingsActualTime) { float:left; display: block; width: 100%; }
.signingsPerDayBody > div:not(.signingsActualTime) > div { float:left; }
.signingsPerDayBody > div:nth-of-type(odd), .tableWeekQuadrantBody > div:nth-of-type(odd) { background-color:var(--dkf-bg-section); }
.signingsPerDayHeader { border-bottom: 1px solid; }
.signingsPerDayHeader > div:first-child { position:relative; }
.signingsPerDayHeader > div:first-child > span { position:absolute; cursor:pointer; margin: 2px 5px; padding: 0 3px; background-color:var(--dkf-white); z-index:4; }
.signingsPerDayHeader > div:first-child > span.filterHover { transform: translateY(-100%); }
.signingsPerDayHeader > div:first-child .predicted { padding: 5px 5px 2px !important; }
.signingsPerDayHeader > div:first-child .predicted > * { float:left; }
.signingsPerDayHeader > div:first-child .predicted > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; max-width: calc(100% - 40px); }
.signingsPerDayHeader > div:first-child .predicted > a { float:right; }
.signingsPerDayHeader > div:first-child .input-group { float:left; width: 100%; display:none; }
.signingsPerDayHeader > div:first-child .input-group:has(.userSelected) { display:block !important; }
.signingsPerDayHeader > div:first-child .input-group:has(.userSelected) input { display:none!important; }
.signingsPerDayHeader > div:first-child input { float:left; width: 100%; padding: 4px 8px!important; }
.signingsPerDayHeader > div:first-child, .signingsPerDayBody > div > div:first-child { min-width: 200px; width: 200px; }
.signingsPerDayHeader > div:nth-child(2) { min-width: 120px; width: 120px; }
.tableWeekQuadrantBody div[data-date] > div:first-child { position:relative; }
.signingsPerDayBody > div > div:first-child { display: flex; position:relative; flex-direction: column; }
.signingsPerDayBody > div > div:first-child .btn-user-add-signing, .signingsPerDayBody > div > div:first-child .btn-user-add-comment, .tableWeekQuadrantBody div[data-date] > div:first-child .btn { position:absolute; right:0; display:none; }
.signingsPerDayBody > div > div:first-child .btn-user-add-comment { right:27px; }
.tableWeekQuadrantBody div[data-date]:hover > div:first-child .btn { display:block; right: 5px; }
.signingsPerDayBody > div:hover > div:first-child .btn { display:block; }
.signingsPerDayBody > div:not(.signingsActualTime) > div:nth-child(2) { min-width: 100px; width: 100px; text-align: center }
.signingsPerDayBody > div > div:first-child > div:first-child > span:not(.fa-user-online):not(.fa-user-resting) { max-width: calc(100% - 29px); display: inline-block; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.signingsPerDayBody .user-avatar { margin:-1px 5px 0 0; }
.signingBox { height:34px; position:absolute; border-radius:10px!important; cursor: pointer; line-height:17px; text-align:left; overflow:visible !important; }
.signingIncident { border-radius:0!important; height:7px; position:absolute; background-color:inherit; filter: brightness(2.5); bottom:0; cursor: pointer; line-height:17px; text-align:left; }
.signingBoxIncident { height:9px; z-index:1; top: calc(100% - 14px)!important; }
.signingBoxIncident .signingIncident { filter:none; background-color: var(--dkf-warning); width: 100%; }
.signingIncidentDeleting { background-color:#ee1e2d; }
.signingBox .tooltip-inner { white-space:nowrap; }
.signingBox.signingNotClosed, .signingBox.signingMergedEnd { border-top-right-radius: 0!important; border-bottom-right-radius: 0!important; }
.signingBox.signingNotStarted, .signingBox.signingMergedStart { border-top-left-radius: 0!important; border-bottom-left-radius: 0!important; }
.signingBox.progress-bar-striped { background-image: linear-gradient(45deg,rgba(255,255,255,.30) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.30) 75%,transparent 75%,transparent); }
.shiftPerDayHours { position:relative; width: calc(100% - 320px); margin-left: 20px; height: 36px; }
.signingConflicts .alert { float:left; width: 100%; }
.signingConflicts ul { margin-left: 20px; float:left; width: 100%; margin-top: 10px; }
.signingConflicts ul li { float:left; width: 100%; list-style-type: disc; }
.signingConflicts ul li .hour-to { font-size:10px; position:relative; top:-1px; }
#shiftModalForm .btn-group { width: 100%; }
#shiftModalForm .btn-group > button { width: calc(100% / 7); min-height:40px; }
#removeSigningPerDay { margin-left: -5px; }
.qrSigningWrapper .fal:not(.panel-icon).header-info-icon { font-size: 14px!important; cursor:pointer; }
.qrSigningWrapper .generatedQr { display:flex; align-items:center; flex-wrap:wrap; gap: 10px 30px; }
.qrSigningWrapper .generatedQrCode[title] { border-radius: var(--dkf-radius); border:1px solid; padding: 12px; }
.qrSigningWrapper .generatedQrCode img { width: 190px; height: 190px; }
.qrSigningWrapper .generatedQr > div { float:none; }
.qrSigningWrapper .generatedQr .generatedQrButtons { display:flex; flex-direction:column; align-items:stretch; gap: 8px; min-width: 200px; }
.qrSigningWrapper .generatedQr .generatedQrButtons > button { margin-bottom:0; text-align:left; }
.qrSigningWrapper .generatedQr .generatedQrButtons br { display:none; }
.my-signing-shift { margin-bottom:10px; }
.tableSigningsPerDay { width: 100%; float:left; overflow-y: auto; }
.controlTimeUser .tableWeekQuadrant { overflow-y: auto; width: 100%; }
.controlTimeUser .tableWeekQuadrantScroll { min-width: 900px; }
.controlTimeUser .tableWeekQuadrant, .controlTimeUser .tableWeekQuadrantHeader, .controlTimeUser .tableWeekQuadrantBody { width: 100%; float:left; }
.controlTimeUser .tableWeekQuadrantHeader { width: calc(100% - 100px); display: flex; flex-direction: row; justify-content: space-around; }
.controlTimeUser .tableWeekQuadrantBody { margin-top: 10px; position: relative; }
.controlTimeUser .tableWeekQuadrantHeader, .controlTimeUser .tableWeekQuadrantBody > div:not(.signingsActualTime) { padding: 5px 5px 5px 10px; }
.controlTimeUser .tableWeekQuadrantHeader > div { min-height: 37px; float:left; border-right:1px solid; text-align: center; padding: 10px; position: relative; height: 100%; }
.controlTimeUser .tableWeekQuadrantHeader > div.disabled { display:none; }
.controlTimeUser .tableWeekQuadrantHeader > div > span { position:absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
.controlTimeUser .tableWeekQuadrantHeader > div:first-child { width:10%; }
.controlTimeUser .tableWeekQuadrantBody [data-totals], .controlTimeUser .tableWeekQuadrantHeader [data-totals-week] { border:none; }
.controlTimeUser .tableWeekQuadrantBody > div, .controlTimeUser .tableWeekQuadrantBody > div > div { float:left; width: 100%; }
.controlTimeUser .tableWeekQuadrantBody div[data-date]:not([data-totals]) { width:calc(100% - 100px); display:flex; /*overflow: hidden;*/ }
.controlTimeUser .tableWeekQuadrantBody div[data-date]:not([data-totals]) > div:first-child { float:left; display:flex; }
.controlTimeUser .tableWeekQuadrantBody div[data-date]:not([data-totals]) > div:first-child > div:first-child { display:flex; align-items: center; float:left; font-size:2vw; width: auto!important; max-width: none; position:relative; }
.controlTimeUser .tableWeekQuadrantBody div[data-date]:not([data-totals]) > div:first-child > div:first-child > span { font-size:14px; position:absolute; bottom:0; right:0; transform: translateY(-100%); padding:5px; border-radius:4px; background-color:var(--dkf-white); }
.controlTimeUser .tableWeekQuadrantBody div[data-date]:not([data-totals]) > div:first-child > div:last-child { display: flex; flex-direction: column; justify-content: center; float:left; width:calc(100% - 50px); margin: 0 0 0 10px; padding-right: 8px; }
.controlTimeUser .tableWeekQuadrantBody div[data-date]:not([data-totals]) > div:first-child > div:last-child > *:not(.btn):not(.tooltip) { display: flex; flex-direction: column; float:left; width: 100%; line-height: 18px; }
.controlTimeUser .tableWeekQuadrantBody div[data-date][data-totals] { width: 100px; }
.controlTimeUser .tableWeekQuadrantBody div[data-hours] { position:relative; float:left; width:90%; }
.controlTimeUser .signingBox { /*overflow: hidden;*/ top: 50%; transform: translateY(-50%); }
.controlTimeUser .signingBox > span { white-space: nowrap; text-overflow:ellipsis; margin:9px; display:block; overflow: hidden; font-size: 12px; }
.controlTime:not(.controlTimeUser) .shiftDayList { margin-left: 28px; margin-top: -3px; }
.controlTime .shiftDayList > span { white-space:nowrap; float: left; width: 100%; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.controlTime .shiftDayList .tooltip { left: 20px!important; }
.controlTimeUser .process_text_white { color:var(--dkf-white)!important; }
.controlTimeUser .process_text_black { color:var(--dkf-black)!important; }
.controlTimeUser .tableWeekQuadrantBody [data-totals], .controlTimeUser .tableWeekQuadrantHeader [data-totals-week] { overflow:hidden; white-space:nowrap; font-size: 12px; padding: 5px; line-height: 15px; background-color: var(--dkf-gray-100); border-radius: 5px; }
.controlTimeUser .tableWeekQuadrantHeader [data-totals-week] > div { position:absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
.controlTimeUser .tableWeekQuadrantBody [data-totals] > div { text-overflow: ellipsis; overflow: hidden }
.controlTimeUser .tableWeekQuadrantBody [data-totals] > div:last-child { color: red; }
.controlTimeUser .tableWeekQuadrantBody [data-totals] > div.extraHours { color: #00dc00; }
.controlTimeUser .tableWeekQuadrantBody [data-totals] > div:nth-child(2) { color: #ff6f00; }
.controlTime .quadrantWeek .fa-user-online, .controlTime .quadrantWeek .fa-user-resting { display:none; }
.controlTime .fa-user-online, .controlTime .fa-user-resting { border:1px solid var(--dkf-gray-900); border-radius:50%; color: #00ff00; font-size:9px; position:absolute; top: 14px; left: 11px; }
.controlTime .fa-user-resting { border:1px solid var(--dkf-warning-strong); border-radius:50%; color: var(--dkf-warning); font-size:9px; position:absolute; top: 14px; left: 11px; }
.controlTime .configRow { display:flex; justify-content:flex-end; margin-bottom: 12px; }
.controlTimeReportTable thead th { font-size:13px; font-weight: 400!important; color: var(--dkf-slate-500); text-align: center; width: 100px; padding-bottom: 10px!important;padding-top: 10px!important; }
.controlTimeReportTable tbody tr td[data-month]:not([data-reportid]) span { color: var(--dkf-slate-400); }
.controlTimeReportTable:not(.controlTimeReportTablePublic) thead th:first-child { width: 180px; }
.controlTimeReportTable tbody tr td:not(:first-child), .controlTimeReportTablePublic tbody tr td { text-align: center; }
.controlTimeReportTable tbody tr td:first-child > div { float:left; }
.controlTimeReportTable tbody tr td:first-child > div:first-child { margin-right: 5px; width: 20px; }
.controlTimeReportTable tbody tr td:first-child > div:last-child { width:calc(100% - 25px); }
.controlTimeReportTable tbody tr td span:not(.btn-success):not(.btn-warning):not(.btn-danger) { background-color:var(--dkf-white); }
.controlTimeReportTable tbody tr td span { border-radius:5px; padding: 2px 5px; border:1px solid; font-size:12px; }
.controlTimeReportTable tbody tr td span.worked { font-weight:600; cursor:pointer; }
.controlTimeReportTable .input-group:has(.userSelected) { width: 100%; text-align:left; }
.controlTimeReportTable .userSelected { float:left; padding: 0 5px!important; width:100%; }
.employeesListWrapper div[data-userId] { cursor:pointer; }
.employeesList div[data-type]:first-child { margin-top: 10px; }
.employeesList div[data-type] { float:left; clear:both; width: 100%; margin-top: 15px; }
.employeesList h4, .shiftsLegendWeekQuadrant h4 { margin: 5px 0 8px; font-size: 12px; font-weight: 600 !important; /* !important: anula el h4 fino global de .controlTime declarado mas arriba en este fichero */ text-transform: uppercase; letter-spacing: .6px; color: var(--dkf-slate-500); }
.employeesList ul { float:left; width: 100%; }
.employeesList ul:not(:last-child) { margin-bottom: 10px; }
.employeesList .label-summary { margin-bottom: 5px; }
.employeesList .label-summary label { margin-right: 5px; }
.employeesList .label-summary label:last-child { margin-right: 0; }
.employeesList .fa-triangle-exclamation { color: #ff0000; }
.calendarReport .yearDisplay { font-size:20px; padding: 0 10px; display:inline-block; }
#signingReportDetail .well img { margin: 0 5px 0 0; }
*[data-showedToGetSizes]  { display:block!important; }
.reportSigningsIncidentsWrapper > .portlet, #menuInvoices > .portlet { margin:0!important; width: 100%!important; }
[data-dashboard-tab="5"], [data-dashboard-tab="4"] { padding-bottom:5px!important; }
.employeesTodayInfo { float: left; width: 100%; max-height: 239px; overflow:auto; padding-bottom:7px; }
.shiftScheduleCopyDay { background-color: var(--dkf-white); }
.shiftScheduleCopyDay > span:last-child { margin-left: -5px; }
.shiftScheduleCopyDay > span:last-child:before { position:relative; top: 3px; }
[data-week-day-schedule]:not(.hide):last-of-type .shiftScheduleCopyDay { color:var(--dkf-white); cursor: auto; }
[data-week-day-schedule]:not(.hide):last-of-type .shiftScheduleCopyDay:hover { background-color: inherit!important; }
[data-name="shift-rest-list"] ul, [data-name="shift-rest-list"] ul li { float:left; width: 100%; }
[data-name="shift-rest-list"] ul li { margin: 5px 0; }
[data-name="shift-rest-list"] ul li:first-child { margin-top:0; }
[data-name="shift-rest-list"] ul li span { margin-right:5px; }
.controlTime [data-totals-break][title] { cursor:pointer }
.controlTime [data-totals] .tooltip .tooltip-inner { text-align:left; }
.controlTime .quadrantWeek [data-week-day] { padding: 6px 8px; }
.controlTime .quadrantWeek [data-week-day] > div > div { border-radius: 5px; float:left; padding: 2px 8px; }
.tableWeekQuadrant tbody td:not(.table-no-result):not(:first-child) > div.dayEmpty { left: calc(50% - 7px); }
.controlTime .quadrantWeek [data-week-day] .dayEmpty { padding: 7px; margin-top: 4px; border-radius: 3px; }
.controlTime .quadrantWeek [data-week-day] .dayWithPending { position: relative; }
.controlTime .quadrantWeek [data-week-day] .dayWithPending > i, .quadrantWeek .day-cell .dayWithPending > i { border-radius: 50%; width: 10px; height: 10px; position:absolute; top: 70%; right: -5px; background-color:darkred; border:1px solid var(--dkf-white); }
.quadrantWeek .day-cell .dayWithPending > i { top:1px; right:-2px; }
.tableWeekQuadrant > div > div { float:left; width: 100%; clear:both; }
#cantAcceptBecauseIncidents { font-size: 15px; }
.noEmployeesTodayFilter { margin-top: 20px; }
.controlTime .quadrantWeek .moreEmployees { cursor:pointer; min-width: 30px; height:30px; border-radius: 15px; border:1px solid; font-size:12px; }
.controlTime .quadrantWeek .moreEmployees span { border:none; padding:0 4px; float:left; position:relative; width: auto; height:auto; top:50%; left:50%; transform: translateY(-50%) translateX(-50%); }
.controlTime .quadrantMonthlyFilter { float:left; max-width: 200px; margin-left:7px; }
.controlTime .quadrantMonthlyFilter .form-control { height: 25px !important; padding: 4px 8px !important; }
.controlTime .quadrantMonthlyFilter .input-group-text:not(.round) { padding:4px 7px!important }
.controlTime .btn-edit-user-quadrant { cursor:pointer; }
.controlTime .tableSigningsPerDay [data-date] { cursor:pointer; }
.btn-delete-shift-location { float:right; margin-bottom:10px; }
.totalsReport > div { display: inline-block; margin-right: 5px; }
.reportMessages { float:left; }
.reportMessages > div:not(.clearfix) { float:left; margin-bottom:9px; }

/* Verifactu */
#menuDashboard h2 { margin-top:0; }
.verifactuCertForm, .verifactuCertExists, .nav>li.verifactuIfHasProcess { display:none; }
button.verifactuCertExists { margin-right:5px; }
.verifactuInvoiceCorrect span.fas { color:#b6d7a8; }
.verifactuInvoiceDraft span.fas { color:var(--dkf-alert-warning-border); }
.verifactuInvoiceCanceled span.fas { color:var(--dkf-alert-danger-border); }
.verifactuInvoiceRectified span.fas { color:var(--dkf-blue-pale); }
.verifactuInvoiceCorrectWithErrors span.fas { color:#f1c232; }
.verifactuGraphSummary { margin:0 auto; }
.verifactuGraphSummary canvas { max-width: 200px; max-height:200px; display:inline-block!important; }
.verifactuGraphLegend > .row > div > div { text-align: center; margin-bottom:15px; }
.verifactuGraphLegend > .row > div > div span:not(.fas) { font-size:15px; }
.verifactuGraphLegend > .row strong { display:flex; justify-content: center; margin-top:8px; clear:both; font-size:25px; }
.dashboardYear { width: 100%; margin-bottom:10px; float:right; }
.dashboardYear > div { float:right; }
.dashboardYear > div:last-child { margin:4px 10px 0 0; }
.dashboardYear span, .dashboardYear input { float:right; }
.dashboardYear span { cursor:pointer; font-size:30px; margin:4px 5px; }
.dashboardYear span:first-child { margin-right:0; }
.dashboardYear input { max-width:100px; text-align: center; font-size:15px; }
.verifactuAdmin .panel-title > .panel-icon, .verifactuAdmin .panel-heading > .panel-icon { font-size: 21px!important; margin-right: 2px; }
.verifactuAdmin .panel-heading:not(.note-toolbar) { padding: 15px!important; }
.verifactuAdmin .button-on-heading { margin-top: 0; }
.verifactuAdmin [data-filter-card] { cursor:pointer; }
/* Entorno AEAT (pre/pro): barra sobre las pestanas, badge en cabeceras de panel e interruptor de la pestana Facturas */
.verifactuEnvBar { display:flex; justify-content:flex-end; margin-bottom:6px; }
.verifactuEnvBar .verifactuEnvBadge { font-size:12px; padding:6px 10px; }
.verifactuEnvBadge .fal { margin-right:4px; }
.verifactuAdmin .panel-title .verifactuEnvBadge { margin-left:8px; vertical-align:middle; font-weight:normal; }
.verifactuTestRecordsToggle { margin:10px 0 4px; }
.verifactuTestRecordsToggle .form-check-label { cursor:pointer; }
.verifactuTestRecordsToggle .form-check-input { margin-right:4px; }

/* Cargando */
.doku-loading-small { width:20px; height:20px; }

/* Widgets de procesos */
.process_box { position:relative; /*transition: transform 0.2s ease;*/ }
.process_text_white *, .process_text_white a { color:var(--dkf-white)!important; }
.procc-info { position:absolute; bottom:3px; right:5px; }
.procc-info span { font-size:15px!important; }
.flip-container { perspective: 1000px; }
.flip-container.hover .flipper { transform: rotateY(180deg); }
.flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; }
.process_box .back { transform: rotateY(180deg); display:none; /*visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear;*/ }
.flip-container.hover .flipper .front { display:none; }
.process_box .iconImage { width:100%; }
.checkbox.checkboxPopover { margin: 10px 0 0 15px!important; }
.checkboxPopover .owncheckbox { margin-top:4px; }

/* Modal "Modulos disponibles" (listPortlets.jsp) — instalacion de modulos en el layout */
#listPortletsBody { position: relative; padding-top: 0; }
#listPortletsBody #buscador { position: sticky; top: 0; background-color: var(--dkf-white); width: 100%; z-index: 99; padding: 14px 2px 12px; }
#listPortletsBody #buscador .searchbox { position: relative; }
#listPortletsBody #buscador .searchbox > span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--dkf-gray-500); font-size: .95rem; pointer-events: none; }
#listPortletsBody #buscador input { height: 42px; padding-left: 38px !important; border-radius: var(--dkf-radius); border: 1px solid var(--dkf-border-input); }
#listPortletsBody #buscador input:focus { border-color: var(--dkf-primary-light); box-shadow: 0 0 0 3px var(--dkf-primary-tint); }
#listPortletsBody .row { row-gap: 14px; }
.portlet-install-card { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--dkf-white); border: 1px solid var(--dkf-border-light); border-radius: var(--dkf-radius-lg); box-shadow: 0 1px 2px rgba(0,0,0,.04); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.portlet-install-card:hover, .portlet-install-card:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(17,28,70,.12); border-color: var(--dkf-primary-light); outline: none; }
.portlet-install-card:hover .portlet-install-header strong { color: var(--dkf-primary); }
.portlet-install-header { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.portlet-install-header .portlet-icon { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--dkf-radius); background: linear-gradient(135deg, var(--dkf-primary), var(--dkf-primary-light)); color: var(--dkf-white); font-size: 20px; }
.portlet-install-header strong { font-size: 1rem; font-weight: 700; color: var(--dkf-primary-dark); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.portlet-install-desc { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--dkf-gray-700); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#portletInstallEmpty { text-align: center; padding: 40px 0 30px; color: var(--dkf-gray-500); }
#portletInstallEmpty > span { font-size: 42px; display: block; margin-bottom: 10px; opacity: .5; }
#portletInstallEmpty p { margin: 0; font-size: .95rem; }

/* Foro */
#forumList .panel { position:relative; margin-bottom:10px; }
#forumList .panel label { margin:0!important; }
#forumList .threadInfo { margin-top:15px; }
#forumList .threadInfo label { margin-top:2px !important; }
#forumList .threadEdit a { padding:2px!important; } /* color y font-size los fija la seccion "UX refresh Foros" */
#forumList .threadEdit a:last-child { margin-right:7px!important; }
.forum_last_thread { line-height:12px!important; margin-top:0!important; font-size:12px!important; color:var(--dkf-gray-600)!important; }
.table-forum .forum-tag { margin:0 3px 0 0!important; }
.thread-title { color:var(--dkf-gray-600)!important; font-size:13px; }
.threadTags { margin-bottom:10px; }
.threadTags span:first-child { margin-left:0; }
.threadUser { width:100%; }
.threadUser .avatar { float:left; width:40px; height:40px; }
.threadUser .nophoto, #user-menu-desplegable .nophoto { margin:0; }
.threadDetailInfo { position:relative; float:left; width:calc(100% - 50px); margin-left:10px; }
.threadDetailInfo button { position:absolute; top:5px; right:5px; }
.threadDetailInfo > span, .threadDetailInfo > strong { float:left; margin-bottom:2px; }
.threadDetailInfo > .stars { float:left; }
.threadDetailInfo > .stars.effect { cursor:pointer; }
.threadMessage { margin:20px 0 20px; }
.threadBlock { border-bottom:1px solid var(--dkf-gray-300); margin-bottom:10px; }
.threadBlock:last-child { border-bottom:none!important; margin-bottom:0!important; }
#threadImagesList img, #uploadedImagesList img, #requestImagesList img { width:100%; }
.forumDocument > div, .uploadedDocument > div, .requestDocument > div { position:relative; }
.forumDocument > div > a.btn, .uploadedDocument > div > a.btn, .requestDocument > div > a.btn { position:absolute; top:5px; right:5px; }
.forumDocument > div > span { float:left; margin: 5px 0 0 13px; }
.threadDocuments { margin-bottom:10px; }
.threadDocuments img { width:100%; }
.threadMessage, .threadMessage * { font-size:13px; }
.threadMessage blockquote { white-space:pre }
.threadMessage ul { margin: 10px 0 10px 25px!important; }
.threadMessage ol { margin: 10px 0 10px 20px!important; padding-left:0!important; }
.threadMessage ul li { padding-left:0!important; margin-left:0!important; list-style-type:disc!important; margin-top:5px; margin-bottom:5px; }
.threadMessage ol li { padding-left:0!important; margin-left:0!important; list-style-type:decimal!important; margin-top:5px; margin-bottom:5px; }
#myProgress { width: calc(100% - 38px); background-color: transparent; position:absolute; bottom:0; z-index:3; left:0; }
#myBar { width: 0; height: 2px; background-color: var(--dkf-alert-success-text); }
.forum-searcher-input { position:relative; width:100%; float:left; }
#forum-searcher h4 { font-size:15px; margin:5px 10px 0 0; }
.forum-searcher-input .input-group-text { border-radius: 4px!important; border-bottom-left-radius: 0!important; border-top-left-radius: 0!important; }
#buscaforo { border-right:none!important; }
#forum-searcher .panel-title { float:right; margin:8px 0 0 0; }
.forum-searcher-input .form-control { height:28px!important; }
#forumBox .following { background-color:var(--dkf-alert-success-bg)!important; }
/* Forum big letter */
#forumList .panel label, #forumList .panel label a { font-size:13px!important; }
.table-forum .thread-title a { font-size:15px!important; }
.table-forum .forum-tag, .forum-tag { font-size:12px!important; padding:2px!important; }

/* Foro Público */
.public_list #forumHomeTree a { text-decoration: none; color: inherit; cursor: pointer; }
.public_list #forumHomeTree ul { list-style: none; padding: 0; }
.public_list #forumHomeTree ul .inner { padding-left: 1em; overflow: hidden; display: none; }
.public_list #forumHomeTree ul .inner.show { display: block; }
.public_list #forumHomeTree ul li { margin: 0.7em 0; }
.public_list #forumHomeTree ul li a.toggle { width: 100%; display: block; padding: 0.45em; border-radius: 0.15em; transition: background 0.3s ease; }
.public_list #forumHomeTree ul li a.toggle:hover { color: royalblue !important; }
.public_list #forumHomeTree .forumLink { font-weight:500; font-size: 1.1em; text-transform: uppercase; }
.public_list #forumHomeTree .threadLink { font-weight:500; font-size: 1em; text-transform: capitalize; }
.public_list #forumHomeTree .threadLink:hover{ color:royalblue !important; }
.public_list #forumHomeTree .activeLink{ color:royalblue !important; border-left: 3px solid royalblue; }
.public_list #forumHomeTree .accordion i { float:right; }
.public_list #forumBreadcrumbs li { border:none; }
.public_list h2 { font-size:24px; line-height:30px; font-weight:100; float:left; margin-bottom:20px; width:100%; }
.public_list .breadcrumbs ul { box-shadow:none; }
.public_list .breadcrumbs li { background-color:transparent!important; }
.public_list .breadcrumbs li:not(:last-child):before { content:none; }
.public_list .breadcrumbs li:not(:last-child):after { content: '\f324'; font-family: "Font Awesome 5 Pro"; border:none; transform: none; margin:10px 0 0; position:static; float:right; width:20px; font-size:12px; height:auto; }
.public_list #forumList .content { box-shadow:none; padding:0!important; }
.public_list #forumList .content > .panel .panel-heading { display:none; }
.public_list .threadInfo { width:100%; margin:0!important; }
.public_list #forumBox .publicThreadList { margin: 0 10px; }
.public_list #forumBox .forumIcon, .public_list #forumBox .panel:nth-child(odd) .forumIcon { background-color:transparent!important; }
.public_list #forumBox .forumIcon { margin:0 auto!important; float:none!important; }
.public_list #forumBox > div:not(.publicThreadList) { text-align:center; width:calc(25% - 20px); float:left; margin: 0 10px; }
.public_list #forumBox > div:not(.publicThreadList) > div { width:100%; display:inline-block; padding:30px 30px 40px 30px; }
.public_list .threadUsers, .public_list .paginacionSelect { display:none; }
.public_list .forumIcon > span { color:var(--dkf-gray-900); }
.public_list .threadInfo > a { font-size:22px; }
.public_list #forumList .widget-color-3, .public_list .folders { background-color:transparent!important; }
.public_list #forumList .widget-box-2 { box-shadow: none; }
.public_list .threadMessage, .public_list .threadMessage *, .public_list #forumBox .publicThreadList li * { font-size:17px; line-height:25px; font-weight:100; }
.public_list #forumBox .publicThreadList li i { margin-right:5px; }
.public_list .threadMessage strong { font-weight:400; }
.public_list .table-forum .forum-tag, .public_list .forum-tag { padding:5px 8px!important; }
.public_list #forumThreadContainer .panel-heading { border:none; }
.public_list #forumThreadTitle { font-size: 24px!important; line-height: 30px; font-weight: 100; }
.public_list .threadMessage { margin-top:0; }
.public_list #forum-searcher, .public_list #forum-searcher .panel-heading { border:none; }
.public_list #forum-searcher .panel-title { display:none; }
.public_list .forum-searcher-input { max-width:100%; }
.public_list #buscaforo { padding:20px!important; }

/* Breadcrumbs */
.breadcrumbs { width:100%; float:left; margin:0 0 10px 0; }
.breadcrumbs ul  { float:left; box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2); }
.breadcrumbs li { border-radius:4px; position:relative; background-color:var(--dkf-bg-hover)!important; overflow:hidden; float:left; font-size:17px!important; color:var(--dkf-gray-600)!important; }
.breadcrumbs li a { padding:10px 12px 10px 5px; float:left; font-size:13px; color:var(--dkf-gray-900); }
.breadcrumbs li:first-child a { padding:10px 12px 10px 10px; }
.breadcrumbs li:last-child a { padding-right:10px; }
.breadcrumbs li:not(:last-child):before, .breadcrumbs li:not(:last-child):after { border-right: 2px solid var(--dkf-primary-tint); content: ''; display: block; height: 32px; margin-top: -27px; position: absolute; transform: rotate(145deg); right: 6px; top: 50%; width:0; }
.breadcrumbs li:not(:last-child):after { content:''; margin-top: -4px; transform: rotate(30deg); }
/* Portlet content */
.portlet:not(.lightProcessIcon) { padding:0; border:0; }
.portlet:not(.lightProcessIcon) > .row { margin-left:0; margin-right:0; }
.portlet:not(.lightProcessIcon) .content, .openProcessSidebar { border:none; padding:0!important; }
.onadmin .portlet:not(.lightProcessIcon) .content { padding:0 15px!important; }

/* Menú de administrador */
.admin-menu-lateral { float:left; }
.admin-menu-content { float: left; margin-left: 16px; width: calc(100% - 32px); }
.admin-menu-lateral .sidebar-nav { position:relative; width:100%; }
.admin-menu-content > .title { display:none; }
.adminMenuOrg { margin-bottom: 1px!important; margin-top: 1px!important; }

/* Artículos */
.contentArticle { padding:0 20px; }
.col-md-12 .portlet:not(.lightProcessIcon) .contentArticle { padding-left:0!important; padding-right:0!important; }
.contentArticle * { font-size:14px; color:var(--dkf-black)!important; }
.contentArticle ul li { list-style-type: circle; margin:5px 0; }
.contentArticle ol li { list-style-type: decimal; margin:5px 0; }
.contentArticle ul, .contentArticle ol { display:inline-block; margin:5px 0 10px 30px !important; }

/* Formularios */
.mandatory-style { border-color: var(--dkf-focus); outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); }
form label, label.control-label, strong.control-label, .form label { font-size:15px; font-weight:normal; color:var(--dkf-black); }
form label, label.control-label, strong.control-label, .form label, .form-group > label { padding-bottom:5px; }
strong.control-label { font-weight: bold; max-width: 100%; display: inline-block; }
.form-control, .input-group-text { border-radius: 8px; }
/* OJO: a la primera linea le falta la llave, asi que las dos lineas son UN solo selector: lo que aplica
   de verdad es "form input[type=text|number|password], form textarea, form select, ..." (15px en cualquier
   formulario) y la lista ".form-group > ..." solo vive como descendiente de "form .select2" (muerta).
   No se arregla la llave: separarlas daria 15px a todo .form-group > input fuera de un form.
   Especificidad (0,1,1) A PROPOSITO: los resets "form .input-group input" (0,1,2), ".rowAligned input",
   ".filter-heading input", ".input-group-hour select"... solo ganan si esta regla no sube. Anadirle una
   pseudoclase de exclusion la subio a (0,2,1) y los addons de todo .input-group bajaron 15px (2026-10-07/08).
   El opt-out .dkf-tight va en la regla aparte de abajo, que gana por especificidad (0,1,2). */
form input[type="text"], form input[type="number"], form input[type="password"], form textarea, form select, .filters-popup .form-control, #formDesignerConditionsList .form-control, form .chosen-container, form .select2
.form-group > input[type="text"], .form-group > input[type="number"], .form-group > input[type="password"], .form-group > textarea, .form-group > select, .form-group > .chosen-container, .form-group > .select2:not(:last-child) { margin-bottom:15px!important; }
/* .dkf-tight en el INPUT: opt-out para campos en rejilla/flex con gap, donde el margen descuadra la fila
   (type=email/tel no llevan los 15px): agenda de destinatarios (dokuflex.recipients.js) */
form input.dkf-tight, form textarea.dkf-tight, form select.dkf-tight { margin-bottom:0!important; }
.filters-popup .input-group .form-control { margin-bottom:0!important; }
.filters-popup .rowSavedSearchs > div { margin-top: -15px; margin-bottom: 20px; }
.filters-popup .rowFilters [class*="col-"] { position:relative; }
.select2-selection { border-top-left-radius: 4px!important; border-bottom-left-radius: 4px!important; }
form .input-group { margin-bottom:15px!important; }
form .input-group input, form .input-group select { margin-bottom:0!important; }
form textarea:not([type="search"]) { min-height:70px; }
form input[type="radio"], form input[type="checkbox"] { margin-left:0!important; position:static!important; }
form fieldset { width:100%; }
.selectWithIcons, .select2 { width:100%!important; }
.select2 .selection .label, .select2-results li .label, .autocomplete_fieldsname .label { margin-left: 5px; /*color:var(--dkf-white);*/ font-size:11px!important; vertical-align:middle; font-weight:normal!important; }
.select2 .selection .label { padding-bottom: .2em; }
.autocomplete_fieldsname a { float:left; margin-bottom:1px; }
.autocomplete_fieldsname a label { cursor: pointer; }
.autocomplete_fieldsname a:hover label { background-color: var(--dkf-blue-pale); color:var(--dkf-link); }
.autocomplete_fieldsname a:not(:hover) { color:var(--dkf-gray-900); }
.autocomplete_fieldsname .label { margin-left: 2px; line-height: 20px; }
.select2-container .select2-selection--single .select2-selection__rendered { padding-right: 0!important; margin-right: 20px; }
#fa-icons-selects, .fa-icons-layer .chosen-container, .selectWithIcons:not(select), .fontAwesome { font-family: Font Awesome\ 5 Pro, Font Awesome\ 5 Brands, Font Awesome\ 5 Free, Font Awesome\ 5 Solids, Helvetica!important; }
.fa-icons-layer .chosen-container-single .chosen-single { padding-top:4px; }
.chosen-container-active.chosen-with-drop .chosen-single div b { background-position:0 5px; }
.chosen-container-single .chosen-single div b { background-position:-18px 8px; }
.chosen-container-single .chosen-single, .chosen-container .chosen-drop { border-radius:4px!important; z-index:1063!important; }
.chosen-container-active .chosen-choices { box-shadow: none !important; }
.checkbox:not([class*="sn-checkbox"]) input[type=checkbox], .checkbox input[type=radio], .checkbox-inline input[type=checkbox], .checkbox-inline input[type=radio], .radio input[type=checkbox], .radio input[type=radio], .radio-inline input[type=checkbox], .radio-inline input[type=radio] { margin-top:0; }
.popover-content .checkbox input[type=checkbox], .popover-content .checkbox input[type=radio], .popover-content .checkbox-inline input[type=checkbox], .popover-content .checkbox-inline input[type=radio] { margin-top:4px!important; }
.controlIcons a { font-size:21px; margin:3px 1px; }
.controlIcons .copy-button, .controlIcons .color-button, .controlIcons .move-button, .fa-layer .copy-button, .fa-layer .color-button, .fa-layer .move-button { margin:-2px 1px!important; color:var(--dkf-gray-700)!important; position:relative; display:inline-block; border:1px solid; border-radius:50%; font-size:12px!important; height:20px; width:20px; text-align:center; box-shadow: 0 0 1px 1px rgba(0,0,0,0.2); }
.fa-layer .copy-button, .fa-layer .color-button, .fa-layer .move-button { height:18px; width:18px; display:block;}
.fa-layer .copy-button, .fa-layer .move-button { margin:31px 0 0!important; }
.fa-layer .copy-button span, .fa-layer .color-button span { top:2px; left:3px; font-size:11px!important; }
.fa-layer .color-button { margin:2px 0 1px !important; }
.controlIcons a:first-child { color:#449d44; }
.controlIcons a:last-child { color:var(--dkf-danger-dark); margin-right:3px!important; }
.popover-content label { padding-top:0!important; }
.filter-heading input[type="text"], .filter-heading input[type="password"], .filter-heading textarea, .filter-heading select { margin-bottom:0!important; }
.popover { z-index:1062; }
.popover ul { margin: 5px 0 5px 10px; }
.popover > ul > li { margin:10px 0; }
.popover .input-group-text { width:auto; }
.equalPixels * { font-size:14px; }
.field_to_show { font-size:14px; }
.shortcut_builder { position:absolute; top:5px; right:5px; z-index:1; }

.panel-icon-collapse.panel-icon-collapse-within-icon { position:absolute; top:100%; right: 0; font-size:12px!important; transform: translateX(50%) translateY(-60%); }
.panel-with-icon { margin-right: 5px; position:relative; }
.panel-title .label { font-size: 11px; color:var(--dkf-white); padding:4px 7px!important; font-weight:normal; border-radius:50%; position:relative; top:-3px; margin-left: 8px; }
.alert-disabled { background-color:var(--dkf-gray-100)!important; cursor:not-allowed; }
.form-buttons .btn-light > span { color:red; }
#build .popover { max-width:none!important; }
.checkboxConSelectLeft { margin-top: 30px; }
.noPaddingL { padding-left: 0; }
.noPaddingR { padding-right: 0; }
.noPaddingLR { padding-left: 0; padding-right: 0; }
.masterisk { color:red; }
.filter-heading .chosen-container-multi .chosen-choices { padding:0!important; }
.filter-heading .search-choice { margin:1px!important; padding:1px 17px 3px 4px!important; }
.filter-heading .search-choice span { font-size:10px!important; }
.filter-heading .chosen-container-multi .chosen-choices li.search-field input[type=text] { height:23px!important; }
#profile_user_roles { line-height:20px; overflow:auto; max-height: 250px; }
.hide-while-loading { display:none; }
.btn-group-alone { border-radius:4px !important; }

/* Buzones públicos */
.inbox_layer .fa { font-size:30px!important; }

/* Calendario dateRange */
.daterangepicker_input { display:none; }
.daterangepicker_input input { padding-left:25px!important; }
.daterangepicker .daterangepicker_input i { top:10px; }

/* Calendario pitscheduler */
.pts-group-header span { line-height:17px; }
.pts-show-user { cursor:auto!important; }

.pts-column-element[data-date]:hover { background-color:var(--dkf-border-tab)!important; }
#settingsDropdown, .pts-open-filters-menu { display:none; }
.pts-corner-mask .dropdown-menu { display:none; }
.pts-assign-task-btn, .pts-task-assign-delete-user, .pts-user-edit-task, .pts-button-see-all, .pts-task-resizer { display:none; }
#pts-toolbox-container .panel-body .label { margin: -4px 1px 5px 0!important; }
.pts-main-container.row, .pts-header.row { margin-left:0!important; margin-right:0!important; }
.pts-small-view .pts-column-element { width:37px; min-width:37px; }
.pts-small-view .pts-main-group-column { width:37px; min-width:37px; }
.pts-small-view .pts-main-group-column>div { margin-left:0; }
.pts-small-view .pts-column-element p { padding-left:10px; padding-right:10px; }

/* Modals */
.modal-header { display:flex; align-items: center; }
.modal-header button { position:absolute; top: 15px; right: 27px; border:none; }
.modal-header h3 { margin-top:0; margin-bottom:0; float:left; }
.modal-title-wrapper { flex-grow: 1; }
.modal-title-wrapper h4, .modal-title-wrapper p { margin:0; }
#modalAddRelation .tab-content { border:none; padding:0; }
#infoModal h3 { margin-top:0!important; }
.close, .close:hover, .close:focus { opacity: 1!important; }
.modal-bottom-left { width:0; height:0; margin:0; padding:0; }
.modal-bottom-left .modal-content { width:500px; position:fixed; top:auto; right:auto; left:8px; bottom:8px; }
.modal-bottom-left .modal-body { max-height:300px!important; }
.modal-header [data-bs-dismiss="modal"] { color:transparent!important; }
.modal-header [data-bs-dismiss="modal"] span { display:none; }
.modal-header [data-bs-dismiss="modal"]::before, #block_close_button::before { content:'\f057'; color:darkred; text-shadow: none; font-weight:300; font-size:25px; font-family:Font Awesome\ 5 Pro, Font Awesome\ 5 Brands, Font Awesome\ 5 Free, Font Awesome\ 5 Solids, Helvetica; display:inline-block; transition: color .15s ease, transform .15s ease; }
.modal-header [data-bs-dismiss="modal"]:hover::before, #block_close_button:hover::before { color:red; transform:scale(1.12); }
.modal-header [data-bs-dismiss="modal"]:focus-visible::before, #block_close_button:focus-visible::before { color:red; }
.modal-header [data-bs-dismiss="modal"]:focus-visible { outline:2px solid var(--dkf-danger-dark); outline-offset:2px; border-radius:50%; }
.modal-header .close { background-color:transparent; color:transparent!important; margin-top: 0; margin-right: -20px; }
.modal { overflow: visible!important; }
.modal-header { border:none; padding-top:0; }
.modal-content { border:none; border-radius: 16px!important; box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.3); padding: 20px; }
.modal-backdrop.in { opacity: .1; }
.modal-icon { float:left; margin: 10px 15px 10px 0; border-radius:10px; background-color:var(--dkf-white); padding: 20px; font-size:25px; box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.3); }
.modal-with-icon .modal-title { margin-top: 3px; }
.modal-header p { font-size: 16px; line-height:23px; font-weight: 300; width: calc(100% - 87px); float:left; }
.modal-super { width: auto !important; }

/* Bloquear pagina */
.ui-widget-overlay { background-color:var(--dkf-black)!important; opacity: 0.50!important; filter: alpha(opacity =50)!important; }
.ui-dialog .ui-dialog-titlebar { padding:6px 6px 14px; text-align:center; }
.ui-dialog .ui-dialog-content { padding:10px 6px; }

/* Listados */
.itemSep { display:none; }
.panel-white .panel-heading { background-color:var(--dkf-white)!important; }
.panel-heading .fa { font-size:12px; }
.nav-tabs > li > a .label {/*color:var(--dkf-white)!important;*/margin-left:7px!important;}
.table thead tr:not(:first-child) th { vertical-align: top!important; }
.table thead tr:not(:first-child) th:not(.filter-heading) .btn-group { margin-top:1px; }
.filter-heading .alert { font-size:12px!important; }
.filter-heading .alert .fa { margin: 2px 5px 0 5px; }
.paginacionSelect label { font-weight:normal; }
.header-filter { float:right; color:var(--dkf-gray-400)!important; }
.header-filter:hover { color:var(--dkf-gray-700); }
.filter-heading .select2 { width: calc(100% - 17px)!important; }
.filter-heading .input-group { flex-wrap: nowrap; }
.filter-heading .input-group .filter-multiple-add { display:none; }
.filter-heading .input-group:last-child .filter-multiple-add { display:table-cell; }
.filter-heading .input-group-text { border-left:none;  border-radius:0; }
.filter-heading .input-group .input-group { width:100%; }
.filter-heading .input-group .alert { border-radius:0; }
.filter-heading .userSelected, .filter-heading .cmmSelected { display:flex; flex-wrap: nowrap; border-radius: 0!important; }
.grid-main-filters, .grid-bottom-filters { margin-bottom:5px; }
.grid-main-filters .form-control, .grid-bottom-filters .form-control { margin-bottom:0!important; }
.grid-main-filters select, .grid-bottom-filters select, .iconRefresh select { float:left; padding:2px 2px!important; height:auto!important; font-size:13px; border-radius:4px!important; }
.grid-main-filters .switch-with-text, .grid-bottom-filters .switch-with-text { width:60px; float:left; border:none; padding:0; margin:3px 0 0 10px; }
.switch-no-margin { margin:0!important; }
.btn-clear, .btn-eye { margin-top:0!important; }
.fullTextSearch input[type="text"] { height:auto!important; padding: 2px 6px !important; font-size:13px!important; border-radius: 4px 0 0 4px!important; }
.fullTextSearch .input-group-text { padding:4px 8px!important; font-size:13px!important; }
.fullTextSearch .predicted { padding: 3px!important; height:23px; }
form .fullTextSearch { margin-bottom:0!important; }
.overflowMaxHeight100 { max-height:100px; overflow-y:auto; }
tr[data-level] td:not(:first-child), table[data-gridgroup] tfoot tr td:not(:first-child) { text-align: right; }
table[data-gridgroup] tfoot { background-color:var(--dkf-gray-100); }
[data-gridgroup] tbody tr { cursor:pointer; }
/* Ultimo registro abierto (grid.js markAsOpen/goToOpenedData pone la clase en cada td sin color inline; appForm.jsp la pone en el tr):
   tinte primario + barra de acento a la izquierda, que sobrevive al hover. El !important gana a las franjas de .table-striped (bloque moderno) */
body:not(.ownTheme) tr.previously-opened > td, body:not(.ownTheme) td.previously-opened { background-color:var(--dkf-primary-tint)!important; color:var(--dkf-slate-800); transition:background-color .15s ease; }
body:not(.ownTheme) tr.previously-opened > td:first-child, body:not(.ownTheme) td.previously-opened:first-child { box-shadow:inset 3px 0 0 var(--dkf-primary); }
/* Con la pestana de checks (.tableChecks) visible -hover (clase .checks-hover, la pone hoverListChecks) o seleccion activa (.open)- la linea sobra: quedaban dos barras paralelas separadas por el borde de la tabla */
body:not(.ownTheme) tr.previously-opened.checks-hover > td:first-child, body:not(.ownTheme) .tableChecksWrapper:has(> .tableChecks.open) tr.previously-opened > td:first-child { box-shadow:none; }
body:not(.ownTheme) tr:hover > td.previously-opened, body:not(.ownTheme) tr.previously-opened:hover > td, body:not(.ownTheme) .grid table.table-hover:not(.nobt) > tbody > tr:hover > td.previously-opened { background-color:var(--dkf-primary-tint)!important; background-color:color-mix(in srgb, var(--dkf-primary-tint) 88%, var(--dkf-primary))!important; } /* el 3er selector supera en especificidad al :hover !important del grid moderno (linea ~8264); sin color-mix queda el tinte base */
.remove-app-data { color: #ff6060 !important; }
.checkboxBar { position:fixed; bottom:20px; max-width:92%; z-index:1062; display:flex; align-items:stretch; border-radius:14px; overflow:hidden; background-color:var(--dkf-white); box-shadow:0 8px 28px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.1); animation:checkboxBarIn 0.28s cubic-bezier(0.16,0.84,0.44,1) both; }
@keyframes checkboxBarIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.checkboxBar[data-do-not-remove] { display:none; }
.checkboxBar .clearfix { display:none; }
.checkboxBar > div { padding:0; }
.checkboxNumberWrapper { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:76px; padding:10px 16px; background:linear-gradient(135deg, var(--dkf-primary-light), var(--dkf-primary)); color:var(--dkf-white); text-align:center; }
.checkboxNumberWrapper > span:not(.checkboxNumber) { font-size:10px; letter-spacing:0.04em; text-transform:uppercase; opacity:0.85; line-height:1.1; }
.checkboxNumber { font-size:28px; line-height:1; font-weight:700; }
.checkboxOptions { display:flex; align-items:center; gap:4px; padding:8px 10px; white-space:nowrap; }
.checkboxOptions > div { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:64px; max-width:96px; padding:8px 10px; border-radius:10px; color:var(--dkf-gray-800); cursor:pointer; transition:background-color var(--dkf-transition-fast), color var(--dkf-transition-fast), transform var(--dkf-transition-fast); }
.checkboxOptions > div:hover { background-color:var(--dkf-bg-hover); transform:translateY(-2px); }
.checkboxOptions > div:hover * { color:var(--dkf-primary)!important; }
.checkboxOptions > div > span:first-child { font-size:24px; line-height:1; }
.checkboxOptions > div > span:last-child { font-size:11px; line-height:1.15; text-align:center; white-space:normal; }
.checkboxOptions .checkboxCloseIcon { min-width:auto; margin-left:6px; padding:10px 14px; border-left:1px solid var(--dkf-gray-200); border-radius:0; color:var(--dkf-gray-500); }
.checkboxOptions .checkboxCloseIcon:hover { background-color:var(--dkf-danger); transform:none; }
.checkboxOptions .checkboxCloseIcon:hover * { color:var(--dkf-white)!important; }
.table-dropdown-open { overflow:visible!important; }
.grid .graphByUser { margin-top:10px; }
[data-message-filter-by-external] { margin-top:15px; margin-bottom:0; float:left; width: 100%; }
td .fieldActionsMiddleTable { position:absolute; right:0; top:52px; z-index:2; transition:top var(--dkf-transition-fast); }
td .fieldActionsMiddleTable:has(.fieldActionsWrapper[style*="display: block"]) { top: 2px!important; }
.gridMoreMenu {	display: initial; position: relative; float: right; width: 25px; height: 25px; }
.gridMoreMenu  ul { position:relative; top: -20px; left: -10px; }
.gridMoreMenu .menu-toggler { position: relative!important; display: block; top:-4px; bottom:0; right:0; left:-4px; margin:auto; width:30px; height:30px; z-index:1063; opacity:0; cursor:pointer; }
.gridMoreMenu .menu-toggler:checked + label { background: transparent; }
.gridMoreMenu .menu-toggler:checked + label:before, .menu-toggler:checked + label:after { top:0; width:40px; transform-origin: 100% 100%; }
.gridMoreMenu .menu-toggler:checked + label:before { transform: rotate(45deg) translateY(-15px) translateX(-15px); }
.gridMoreMenu .menu-toggler:checked + label:after { transform: rotate(-45deg); }
.gridMoreMenu .menu-toggler:checked ~ ul .menu-item { opacity: 1; top: 0; left: 0; z-index: 1062; }
.gridMoreMenu :checked ~ ul .menu-item:nth-child(1) { z-index: 1061; }
.gridMoreMenu :checked ~ label span { font-weight: 900; }
.gridMoreMenu .menu-toggler:checked ~ ul .menu-item:nth-child(1) { transform: rotate(0deg) translate(-44px); }
.gridMoreMenu .menu-toggler:checked ~ ul .menu-item:nth-child(2) { transform: rotate(300deg) translateX(-44px); }
.gridMoreMenu .menu-toggler:checked ~ ul .menu-item:nth-child(3) { transform: rotate(240deg) translateX(-44px); }
.gridMoreMenu .menu-toggler:checked ~ ul .menu-item:nth-child(4) { transform: rotate(180deg) translateX(-44px); }
.gridMoreMenu .menu-toggler:checked ~ ul .menu-item:nth-child(5) { transform: rotate(120deg) translateX(-44px); }
.gridMoreMenu .menu-toggler:checked ~ ul .menu-item:nth-child(6) { transform: rotate(60deg) translateX(-44px); }
.gridMoreMenu .menu-toggler:checked ~ ul .menu-item a { pointer-events:auto; }
.gridMoreMenu .menu-toggler + label { display: block; cursor:pointer; z-index: 1061; font-size: 20px !important; transition: transform 0.5s top 0.5s; position: absolute; top: 0; bottom: 0; left: 10px; right: 0; margin: auto; }
.gridMoreMenu .menu-toggler + label:before, .menu-toggler + label:after { width: 40px; height: 5px; display: block; z-index: 1062; border-radius: 2.5px; /*background: rgba(255, 255, 255, 0.7);*/ transition: transform 0.5s top 0.5s; /*content: "";*/ position: absolute; left: 0; }
.gridMoreMenu .menu-toggler + label:before { top: 10px; }
.gridMoreMenu .menu-toggler + label:after { top: -10px; }
.gridMoreMenu .menu-item:nth-child(1) a { transform: rotate(0deg); }
.gridMoreMenu .menu-item:nth-child(2) a { transform: rotate(-300deg); }
.gridMoreMenu .menu-item:nth-child(3) a { transform: rotate(-240deg); }
.gridMoreMenu .menu-item:nth-child(4) a { transform: rotate(-180deg); }
.gridMoreMenu .menu-item:nth-child(5) a { transform: rotate(-120deg); }
.gridMoreMenu .menu-item:nth-child(6) a { transform: rotate(-60deg); }
.gridMoreMenu .menu-item { position: absolute; display: block; top: -40px; bottom: 0; left: -40px; right: 0; margin: auto; width: 40px; height: 40px; opacity: 0; transition: 0.5s; z-index: 1062; }
.gridMoreMenu .menu-item a { display: block; width: inherit; height: inherit; line-height: 42px; border-radius: 50%; text-align: center; text-decoration: none; font-size: 20px; pointer-events: none; transition: 0.2s; }
.gridMoreMenu .menu-item a:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); color: white; background: rgba(255, 255, 255, 0.3); /*font-size: 25px;*/ }
.tableChecks tr { opacity:0; }
.tdWithIcon span { font-size: 18px; }
#contextGridValue { opacity: 0; height: 0; position:absolute; }
.popoverFiltersAbove { max-width: none !important; z-index:1062; }
.popoverFiltersAbove .popover-content { min-width: 0; float:left; }
.popoverFiltersAbove .filterPopover { float:left; white-space: nowrap; display: flex; }
.popoverFiltersAbove .filterPopover > select { margin: 0 5px 0 0!important; margin-bottom:0 !important; border: none; }
.grid .filters { float:left; width: 100%; margin: 10px 0; clear: both; }
.grid .filters .label { cursor:pointer; float:left; padding: .6em .8em .6em; font-size: 82%; font-weight:normal; background-color:var(--dkf-white); color: var(--dkf-primary); border-radius:10px; margin: 2px 4px 2px; box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15); }
.grid .filters .label a { opacity: 0; }
.grid .filters .label:hover a { opacity: 1; }
.grid .filters .label span, .grid .filters .label strong { display: inline-block; overflow: hidden; text-overflow: ellipsis; margin-bottom: -2px; white-space:nowrap; }
.grid .filters .label strong { max-width: 100px; }
.grid .filters .label span { max-width: 60px; }
.grid .filters .label a { font-size: 13px; padding: 5px 7px; margin-right: -7px; }
.grid .filters .label a span::before { margin-bottom:-1px; float: right; }
th [data-sort-handler] { cursor:pointer; }
.not-found-icon { margin:0 auto 10px; border:1px solid; border-radius: 50%; width: 50px; height: 50px; position:relative; }
.not-found-icon i { position:absolute; top:50%; left: 50%; transform: translateY(-50%) translateX(-50%); }

/* Comparador de archivos */
.compareLine { background-color:var(--dkf-bg-highlight); margin: 2px 0; padding:5px; }
.compareLine.compareEquals { background-color:var(--dkf-primary-tint); }
.compareLine hr { margin: 5px 0; }
.compareNewLine { float:left; margin-bottom:4px; }
.compareLineNumber, .compareLineInfo { float:left; }
.compareLineNumber { font-style: italic; margin-right:5px; }

/* Buscador global */
#docType .list-images .image { background-position:center; background-repeat:no-repeat; background-size:contain; }
.searchPortletPredict .dropdown-menu { top: calc(100% - 15px); left:14px; }

/* Kanban — alineado con el lenguaje del planner (calendario): tokens, radios
   var(--dkf-radius-lg), texto slate, bordes suaves y sombras discretas. Los
   colores de columna/etiqueta que el JS pinta inline son data-driven y no se
   tocan aqui. */
.kanbanLoading, .kanbanLoading .fa-spinner.fa-spin { font-size:12px!important; }
.grid-kanban .kanban-body .panel {
	cursor:pointer; margin-bottom:10px;
	border:1px solid var(--dkf-border-light); border-radius:var(--dkf-radius-lg);
	background-color:var(--dkf-white);
	transition:box-shadow var(--dkf-transition-fast), transform var(--dkf-transition-fast), border-color var(--dkf-transition-fast);
}
.grid-kanban .kanban-body .panel:hover { border-color:var(--dkf-border); box-shadow:0 6px 18px rgba(0,0,0,.12); transform:translateY(-1px); }
.kanban-scroll > .panel { border-bottom:none; }
.kanban-placeholder { border:2px dashed var(--dkfpl-today-accent); background:var(--dkfpl-today-bg); border-radius:var(--dkf-radius-lg); margin-bottom:10px; }
.kanban-floating { transform:rotate(1.5deg); box-shadow:0 6px 18px rgba(0,0,0,.2); opacity:.95; }
.kanban-group { float:left; margin-left:14px; width:340px; }
.kanban-group > div { border-radius:var(--dkf-radius-lg); border:1px solid var(--dkf-border-light); }
.kanban-group:first-child { margin-left:0; }
/* El overflow-y no servia de nada sin altura: con un proceso de ~100 registros
   el tablero crecia a 7.400px, la pagina entera se convertia en un muro de
   tarjetas y las cabeceras de columna quedaban fuera de pantalla (caso real:
   proceso Roadmap con 99 fichas). Acotado a la ventana, cada columna scrollea
   dentro y la cabecera se queda pegada arriba. */
.kanban-scroll-parent { overflow-y:auto; max-height:calc(100vh - 250px); min-height:320px; max-width:100%; padding-bottom:6px; }
.kanban-scroll { float:left; min-width:100%; }
.kanban-group .panel-heading { border-bottom:none!important; border-radius:var(--dkf-radius-lg) var(--dkf-radius-lg) 0 0; padding:12px 16px 10px; position:sticky; top:0; z-index:2; }
/* !important: anula el 18px!important del .panel-title global (linea "panel-title font-size 18") */
.kanban-group .panel-title { font-size:14px!important; font-weight:600; line-height:1.3; }
.kanban-element .panel-body * { line-height:18px; }
.kanban-element .panel-body strong { font-size:13px; }
/* slate (escala fria del planner) en vez de gray-400: contraste legible sobre blanco */
.kanban-element .panel-body p { color:var(--dkf-slate-500); font-size:12px; margin:5px 0 0; }
/* sin float: en BS5 no hay clearfix de .panel-body y la fila flotada se salia
   de la tarjeta; flex + full-bleed con margenes negativos basta */
.kanban-element .panel-body > div {
	display:flex; align-items:center; gap:8px; clear:both;
	width:calc(100% + 30px); border-top:1px solid var(--dkf-border-light);
	margin:14px -15px -15px; padding:9px 12px 10px; font-size:12px; color:var(--dkf-slate-550);
	background:var(--dkf-gray-25); border-radius:0 0 var(--dkf-radius-lg) var(--dkf-radius-lg);
}
.kanban-element .panel-body p:empty { display:none; }
.kanban-element .panel-body > div span { float:none; margin-top:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* pill como las etiquetas del planner; el background inline (stringToColor) es data-driven */
.kanban-element .panel-body > div label { float:none; margin:0 0 0 auto; font-size:11px!important; padding:3px 9px; border-radius:999px; }
.kanban-element .panel-body > div img { float:none; flex-shrink:0; margin-left:auto; border-radius:var(--dkf-radius-round); }
.kanban-element .panel-body > div label + img, .kanban-element .panel-body > div span + img { margin-left:0; }
/* contador de columna: pill neutra estilo planner. Misma especificidad que el
   .panel-title .label global pero posterior en el fichero -> gana por orden;
   solo el padding necesita !important (el global lo lleva). */
.kanban-group .kanban-group-count {
	float:right; margin-top:0; padding:3px 9px!important;
	border-radius:999px; border:1px solid var(--dkf-border-light);
	font-size:11px; font-weight:600; line-height:1.2; top:0;
}
.grid-kanban .grid-main-filters { border:none!important; margin-bottom:10px; float:left; }
.grid-kanban .grid-main-filters .separador { margin:0 10px; }
.grid-kanban .grid-main-filters .separador:first-child { margin-left:0; }
.sortable-placeholder { border:1px dashed; border-radius: 5px; padding:10px; float:left; }

/* Listados de imagen */
.list-images { position:relative; }
.list-images .image { height:200px; width:100%; border:1px solid; background-size: cover; }
.list-images .image-name { text-align:center; margin:8px 0 0; }
.list-images .floating { position:absolute; bottom:53px; right:10px; }

.list-images-details { margin: 10px 0; }
.list-images-details .image { float:left; width:122px; height:90px; background-size: cover; background-repeat:no-repeat; background-position: center;}
.list-images-details .details li { word-break: break-all; }
.list-images-details .process { text-align:center; float:left; width:122px; height:90px; border:1px solid; }
.list-images-details .process span { margin:19px 0; font-size:50px; }
.list-images-details .details { float:left; width:calc(100% - 132px); margin-left:10px; }
.list-images-details .details li { margin:5px 0 0; }
.list-images-details .details li:first-child { margin-top:0; }
.viewModeBig { border:1px solid; text-align: center; }
.viewModeBig span { margin:19px 0; font-size:160px; }

.process_box_lucene{border:1px solid gainsboro;border-radius:5px;background-color: var(--dkf-bg-section);padding: 10px; line-height: normal;cursor: pointer;margin-bottom: 10px}
.process_box_lucene_expired{background-color:var(--dkf-alert-danger-bg)!important; padding:5px;}
.process_box_lucene_viewMode2 .image-name{color:red!important;font-weight:bold;}
.process_box_lucene:hover{border:1px solid gray}

/* Componente Gmap */
.gmap-map { width:100%; height:300px; }
.gmap-nomap { display:none!important; }
.gmap-directions ul { margin: 0 0 20px 20px; }
.gmap-directions * { font-size:14px; }
.gmap-directions li { margin-bottom:5px; list-style-type: none; }

/* Componente Hora y minuto */
.input-group-hour select { width:50%!important; margin-bottom:0!important; }

/* Chosen */
.chosen-container { width:100%!important; }
.chosen-choices { padding:2px 12px!important; }
.chosen-container-multi .chosen-choices { background-image:none!important; padding:6px 12px!important; border-radius:4px; border-color:var(--dkf-gray-300)!important; }
.chosen-container-multi .chosen-choices li.search-field input[type=text] { padding: 11px 0; margin:0!important; height:auto; }
.chosen-container-multi .chosen-choices li.search-choice { margin:5px 5px 3px 0; }
.modal-body .chosen-with-drop .chosen-drop, .popover .chosen-with-drop .chosen-drop { position:relative!important; }
.chosen-container-single .chosen-single { background:none!important; box-shadow:none!important; padding:7px 12px; height:auto!important; border-radius:0; }
.input-group .chosen-container { width: calc(100% - 40px)!important; margin-bottom:0!important; }

/* Number format */
.numberFormat { position:absolute!important; z-index:2; }
.input-group .numberFormat input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.flexgrid .numberFormat { top:0; }
.numberFormatLayer { position:relative; }

/* Select2 */
.select2, .input-group-tags, .chosen-container { max-width:100%; }
.select2-container { z-index:1062!important; margin-bottom: 15px; }
.select2-dropdown { transform:translateY(-5px); }
.select2-container--open, .select2-dropdown { z-index:1065!important; }
.select2-dropdown { z-index:1065!important; min-width:120px; }
.select2-container--default .select2-selection--single { border-color:var(--dkf-gray-300)!important; height:39px!important; border-radius: 8px !important; }
.input-group .select2-container--default:not(:first-child):not(:last-child) .select2-selection--single { border-radius:0; }
.input-group .select2-container--default:last-child .select2-selection--single { border-top-left-radius:0!important; border-bottom-left-radius:0!important; }
.has-error .select2-container--default .select2-selection--single { border-color:var(--dkf-danger-text)!important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:36px!important; color:var(--dkf-gray-800)!important; font-size:14px; }
.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple { border-color:var(--dkf-gray-300)!important; padding-bottom:0!important; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered li { padding:3px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background-color:var(--dkf-white)!important; margin-top:2px; margin-left:0; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { float:right; margin-left:1px; height:23px; font-size:20px!important; font-weight:normal!important; }
.filter-heading .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:29px!important; font-size:11px; font-weight:bold; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { margin-top:3px!important; }
.input-group .select2-container--default .select2-selection--single { border-bottom-right-radius: 0; border-top-right-radius: 0; }
.component-column .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding:0!important; }
.component-column .select2-container--default .select2-selection--multiple .select2-selection__rendered li { padding: 3px 14px 3px 3px; }
.component-column .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { left:auto!important; right: -1px!important; top: 3px!important; }
.component-column .select2-container--default .select2-selection--multiple { min-height: 40px; }
.component-column .selection textarea { margin-bottom:0!important; height:0!important; }
.actionData .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { margin-left:1px!important; top:3px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__display { padding-left: 25px!important; }
.actionData .select2-container--default .select2-selection--multiple .select2-selection__choice__display .selectWithIcons { display:none; }
.actionData .select2-container--default .select2-selection--multiple .select2-selection__choice__display label { position:relative; top: -1px; padding: 3px 8px!important; }
.input-group .select2-container--default .select2-selection--single { border-top-right-radius: 0!important; border-bottom-right-radius: 0!important; }

.myTableOptions .select2-container--default.select2-container--focus .select2-selection--multiple,
.myTableOptions .select2-container--default .select2-selection--multiple { border:none; background: transparent; padding:0; }
.myTableOptions .select2-container .select2-selection--multiple .select2-selection__rendered { padding:0!important; }
.select2-container .select2-selection--multiple .select2-selection__rendered { display:block!important; float:left; }
.myTableOptions .select2-container--default .select2-selection--multiple .select2-selection__rendered li,
.select2optionsWrapper .select2-container--default .select2-selection--multiple .select2-selection__rendered li
	{ padding: 1px 3px; padding-right:12px; margin:2px; }
.myTableOptions .select2-container--default .select2-selection--multiple .select2-selection__rendered li:first-child,
.select2optionsWrapper .select2-container--default .select2-selection--multiple .select2-selection__rendered li:first-child
	{ margin-left:0; }
.myTableOptions .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2optionsWrapper .select2-container--default .select2-selection--multiple .select2-selection__choice__remove
	{ left: calc(100% - 17px); width: 14px; height: 24px; padding-left: 2px; }
.select2optionsWrapper .select2-container--default .select2-selection--multiple .select2-selection__choice__remove
	{ height: 19px; }

/* Repositorio */
.file_upload, .fileUploadPaste { width:100%!important; padding: 20px 10px; height:auto!important; margin:0 0 10px; }
form.file_upload > div { text-align: center }
.modal .file_upload, .modal .fileUploadPaste { border-radius:10px; }
#repoFolderModesButtons { margin-bottom:10px; white-space: nowrap; }
.fileManager { padding-top:5px!important; }
#browser-files table { margin-top:0!important; }
#browser-files-header.filesAll { width:100%; }
#browser-files-header .iconRefresh { margin:5px 0 0 0; }
.fileUploadPaste { position:relative; float:left; text-align:center; }
.fileUploadPaste:focus-within p span.fa-clipboard::before { content: '\f0ea' !important; }
.fileUploadPaste p { font-size:15px; margin:0 auto; position:relative; z-index: 1; }
.fileUploadPaste input { cursor:pointer!important; position:absolute; top:0; left:0; z-index: 2; width:100%; height:100%; border:none!important; background-color:transparent!important; color:transparent!important; text-align: center; }
.fileUploadPaste input:focus { caret-color: transparent; color:var(--dkf-gray-300)!important; font-size:15px; }
.fileUpload.errorField { border:1px solid!important; padding:10px; }
.folders { overflow:auto; }
.browser-folders * { font-size:15px!important; }
.browser-folders .subtree ul { padding-left:18px; border-left:1px solid var(--dkf-border-light); }
.browser-folders ul { margin: 10px; }
.browser-folders ul li { margin:5px 0; white-space:nowrap; }
.browser-folders .input-group-text { padding: 0 8px; background-color:transparent; border:none; }
#contextMenu { z-index: 1066; }
#contextMenu > li > a { padding:3px 10px; }
#repoEntitiesAvailableButton { margin: 2px 10px 0 0; }
.repositoryIcon { max-width:60px; }
body.dragging, body.dragging * { cursor: move !important; }
.dragged { position: absolute; opacity: 0.5; z-index:var(--dkf-z-popover); }
.browser-folders ul li.placeholder { position: relative; }
.browser-folders ul li.placeholder:before { position: absolute; }
.fileUploadPaste input::placeholder { color: transparent; }
.fileUploadPaste input:focus::placeholder { color: var(--dkf-gray-300); }
.browser-folders .loadMoreFolders { cursor: pointer; display: flex; }
.browser-folders .loadMoreFolders > span { font-size: 12px !important; margin: 2px 0 0 4px; }
#downloadPopup .dokuLoader { margin-top:4px; margin-left:5px; }
.repository_folder.active { border:1px solid; padding:3px 5px; background-color: var(--dkf-bg-highlight); }
#browser-folders-move-tree ul { margin-left: 10px; }
#repoFolderModesButtons .file_upload > div > i { font-size:18px; width: auto; margin: 3px; }

/* Wizard IA */
.wizard_data #gridTemplate table { margin-top:0; }
.wizard_data #gridTemplate .filter-heading label { position:relative; font-size:12px!important; overflow: visible; padding:8px 4px!important }
.wizard_data .gridFreemiumFields { max-height: 600px; }
.wizard_data .filter-heading label:not(.predicted) { top:5px; left:0; }
.wizard_data .table-sort { cursor:move; }
/* Asistente de creacion de proceso (newProcessModule/view.jsp). Ambito
   .wizard_data: sin el, reestilaba todas las tablas de la aplicacion. */
.wizard_data table { border-spacing: 0; width: 100%; }
.wizard_data th { text-transform: uppercase; font-size: smaller; }
/* !important heredados del JSP: ganan al padding/borde de .table td del tema */
.wizard_data td { padding: 5px !important; text-align: left; border: 1px solid var(--dkf-gray-200) !important; font-size: smaller; }
.wizard_data tr:nth-child(even) { background-color: var(--dkf-bg-section); }
.table_content { width: 95%; display: inline-flex; max-height: 430px; overflow: auto; border-radius: 4px; background-color: var(--dkf-white); padding: 5px; }
/* !important: gana al fondo de fila de .wizard_data tr:nth-child(even) */
.wizard_removed_row { background-color: var(--dkf-danger-hover) !important; color: var(--dkf-white); }
/* !important heredados del JSP: anulan el ancho/fondo/color que fija el
   componente file_upload de dokuflex.js */
.wizard_file_upload { margin: 20px auto; width: 90% !important; border: 2px dashed var(--dkf-gray-150); border-radius: 10px; }
.wizard_file_upload:hover { background-color: var(--dkf-gray-50) !important; } /* !important: anula el inline que escribe file_upload (dokuflex.js) */
.wizard_file_upload .text { font-size: 18px; margin-top: 10px; font-weight: 600; color: var(--dkf-gray-600) !important; } /* !important: anula el inline que escribe file_upload (dokuflex.js) */
.wizard_file_upload .subtext { font-size: 14px; font-weight: 400; margin-top: -5px; font-style: italic; color: var(--dkf-gray-150) !important; } /* !important: anula el inline que escribe file_upload (dokuflex.js) */
.wizard_file_upload i { color: var(--dkf-gray-150); }
#box_wizard_init { border: 1px solid var(--dkf-link); border-radius: 10px; padding: 40px 20px 0 20px; }
.box_title { padding: 25px 0; color: var(--dkf-link); font-weight: 600; font-size: 22px; }
/* !important heredados del JSP: anulan el float/tamano del loader global */
.wizard_loader { float: none !important; margin: 180px auto 15px auto; width: 40px !important; height: 40px !important; }
.wizard_buttons_right { position: absolute; top: -45px; right: 42px; }
.wizard_buttons_left { position: absolute; top: -45px; left: 42px; }
/* !important heredados del JSP: anulan el peso/color de .badge */
.badge-options { margin: 3px; font-weight: normal !important; color: var(--dkf-black) !important; }
#headerO th, #headerT th { top: -5px; height: 28px; position: sticky; background: var(--dkf-white); }
/* !important heredado del JSP: gana al padding de .wizard_data td */
#bodyO td { padding: 8px 8px 5px 8px !important; }
.wizardStepsWrapper { position:relative; float: left; width: 100%; overflow:auto; }
.wizardSteps { position:relative; float:left; width: 100%; }
.wizardSteps li { float:left; text-align: center; padding:10px 20px; position:relative; box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75); }
.wizardSteps li:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.wizardSteps li:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.wizardSteps li::after { content: " "; position: absolute; z-index:1; top: 50%; right: 0; box-shadow: 1px -1px 1px 0px rgba(0,0,0,0.20); background-color:var(--dkf-white); width: 20px; height: 20px; transform: translate(calc(50% - 1px), -50%) rotate(45deg); }
.wizardSteps li:last-child::after { content: none; }
.wizardSteps li.active > div > span { font-weight:900; }
.wizardSteps span { font-size:30px; }
.wizardSteps p { margin:10px 0 0; }
#processFieldsTable .form-group { margin-bottom:0; }
#selectListTableWrapper th > span { float:left; margin-top:15px; cursor:move; }
#file_uploadJsonNewProcess .alert:not(.doku-toast-notification):not(.predicted):not(.userSelected):not(.alert-padding) { padding:0!important; }
#file_uploadJsonNewProcess .file_upload {  border-radius:4px; border-width: 2px; }
#file_uploadJsonNewProcess .text { font-weight:bold; color:var(--dkf-black); font-size:18px; margin-top:10px; }
#file_uploadJsonNewProcess .file_upload > div { padding:20px 0; }
#selectFieldsTableWrapper th label { font-size:12px!important; padding: 3px 6px!important; }
#selectFieldsTableWrapperMasterData td[align="center"] .checkbox, #selectFieldsTableWrapper td[align="center"] .checkbox { margin:0 auto!important; display: inherit; }
#selectGraphsWrapper .well { margin-bottom:0; padding: 10px; }
#selectGraphsWrapper .form-group:last-child { margin-bottom:0 }
#selectGraphsWrapper .well > .row:not(:first-child) { margin-top: 10px; }
#selectGraphsWrapper .form-group label { text-transform: none; }
#selectGraphsWrapper .graphButtons { float:right; margin-bottom: 10px; width:100%; }
#selectGraphsWrapper .graphButtons > * { margin-left: 5px; float:right; }
#selectGraphsWrapper .graphButtons > span { cursor:move; }
#selectGraphsWrapper .graphButtons button:not(.move-handler) { position:relative; z-index:2; }
#selectGraphsWrapper .removed { position:relative; }
#selectGraphsWrapper .removed .graph_layer::after { content:' '; z-index:1; opacity: 0.5; position:absolute; top:0; left:0; width:100%; height:100%; background-image: linear-gradient(45deg, var(--dkf-white) 25%, var(--dkf-gray-50) 25%, var(--dkf-gray-50) 50%, var(--dkf-white) 50%, var(--dkf-white) 75%, var(--dkf-gray-50) 75%, var(--dkf-gray-50) 100%); background-size: 56px 56px; }
.wizardPanelField { position:relative; border: 1px dashed; border-radius: 4px; text-align:center; float:left; width: 100%; }
.wizardPanelField p { padding:20px; margin:0; }
.wizardPanelField p li.ui-sortable-placeholder { display:none; }
.wizardPanelAddRow button { border-radius: 4px; text-align:center; float:left; width: 100%; }
.dragging-panel { opacity: 0.5; border: 2px dashed #007bff; }
.wizardPanelOptions, .wizardPanelOptionsInside { position:absolute; top: 5px; right: 5px; }
.wizardPanelOptions a:not(:last-child), .wizardPanelOptionsInside a:not(:last-child) { margin-right: 2px; }
#wizardPanelsSidebar > div { float:left; width: 100%; }
.wizardPanelSidebarFieldsList { float:left; max-height: 500px; overflow-y:auto; width:100%; margin-bottom:13px; }
.wizardPanelSidebarFieldsList .ui-sortable-placeholder { display:none; }
.wizardPanelSidebarFieldsList li { cursor:move; }
.wizardWfDesignWrapper { width:100%; overflow:auto; }
.wizardWfRow { width:100%; }
.wizardWfRow > [data-step-id], .wizardWfRow .wizard-placeholder { position:relative; float:left; width: 100%; max-width:195px; margin: 5px 0; }
.wizardWfRow > [data-step-id] .wizardPanelField { max-width:145px; }
.wizardWfRow .wizardPanelOptions { position: absolute; border-top: 1px solid; top: 50%; width: 45px; }
.wizardWfRow .wizardPanelOptions span { background-color:var(--dkf-white); padding: 0 3px; font-size:20px; position:absolute; right: 9px; top:50%; transform: translateY(-50%); }
.wizardWfRow [data-step-id="start"] .wizardPanelField > p, .wizardWfRow [data-step-id="end"] .wizardPanelField > p { margin-left: 30px; }
.wizardWfRow .wizardPanelField > span { border-right:1px dashed; color:var(--dkf-gray-900); width:30px; position:absolute; height:100%; left:0; top: 0; }
.wizardWfRow .wizardPanelField > span::before { position:absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); }
.well.card-highlight .fa-duotone { color:var(--dkf-primary); }
#wizardProcessPreviewForm ul li { float:left; width: 100%; padding: 10px; margin: 2px; background-color:lightgrey; color:var(--dkf-gray-900); border-radius:var(--dkf-radius-lg); }

/* Migas de pan */
.breadcrumb { background-color:transparent!important; margin:0!important; border:none; float:left; margin-left:10px; padding:0!important; }
.breadcrumb a { font-size:16px; font-weight:bold; line-height:16px; }
.breadcrumb a:hover { text-decoration:underline; }

/* Colorpicker */

.sp-colorize { height:100%; width:100%; border:1px solid var(--dkf-border-light); border-right:none!important; border-top-left-radius:4px; border-bottom-left-radius:4px; }
.sp-colorize-container { border:none!important; }
.sp-original-input-container input[type="text"] { margin-bottom:0!important; border-radius:0; border-top-right-radius: 4px!important; border-bottom-right-radius: 4px!important; }
.sp-colorize-container { min-width: 35px; }

/* GanttView + progress + calendar utility rules */
.ganttview-hzheader-months { float:left; }
.progress-success { cursor:pointer; }
.ganttview { width:100%; }
.ganttview-slide-container { width:100%; }
/* Gantt de imputaciones (timesheet/view.jsp). Los !important heredados del
   JSP anulan los estilos inline que escribe el plugin jquery.ganttView al
   pintar celdas, cabeceras y etiquetas. */
div.ganttview-grid-row, div.ganttview-grid-row-cell, div.ganttview-vtheader-container div.row-fluid { height: 40px; max-height: 40px; }
div.ganttview-grid div.summary { height: 30px !important; min-height: 30px !important; } /* !important: anula el inline que escribe jquery.ganttView */
div.ganttview-hzheader-day { width: 16px !important; border-radius: 0 !important; } /* !important: anula el inline que escribe jquery.ganttView */
div.ganttview-hzheader-days .label-info,
div.ganttview-hzheader-dayNames .label { color: var(--dkf-white) !important; background-color: var(--dkf-gray-600) !important; } /* !important: anula el inline que escribe jquery.ganttView */
div.ganttview-vtheader-container div.summary .label-success,
div.ganttview-grid div.summary .label-success { background-color: var(--dkf-gray-300) !important; color: var(--dkf-gray-700) !important; } /* !important: anula el inline que escribe jquery.ganttView */
div.ganttview-vtheader-container div.summary .label-info,
div.ganttview-grid div.summary .label-info { background-color: var(--dkf-gray-200) !important; color: var(--dkf-gray-700) !important; } /* !important: anula el inline que escribe jquery.ganttView */
div.ganttview-vtheader-container div.summary .label-warning,
div.ganttview-grid div.summary .label-warning { background-color: var(--dkf-gray-600) !important; color: var(--dkf-white) !important; } /* !important: anula el inline que escribe jquery.ganttView */
div.ganttview-grid-row-cell { width: 24px; border-top: 1px solid var(--dkf-gray-500); border-right: 1px solid var(--dkf-gray-500); }
div.ganttview-grid-row-cell span { top: 10px; position: absolute; left: 5px; font-weight: bold; }
div.ganttview-grid-row-cell input { width: 20px; }
div.ganttview-vtheader-container div.row-fluid { border-top: 1px solid var(--dkf-gray-500); height: 40px; min-height: 40px; overflow: hidden; }
div.ganttview-vtheader-container div.summary { height: 30px !important; min-height: 30px !important; } /* !important: anula el inline que escribe jquery.ganttView */
div.ganttview-vtheader-container div.summary a { color: var(--dkf-gray-700); }
div.ganttview-vtheader-container div.summary .label-success,
div.ganttview-vtheader-container div.summary .label-warning,
div.ganttview-vtheader-container div.summary .label-info { color: var(--dkf-white); padding: 8px; }
div.ganttview-grid div.summary .label-success,
div.ganttview-grid div.summary .label-warning,
div.ganttview-grid div.summary .label-info { color: var(--dkf-white); }
div.ganttview-vtheader-container img { height: 35px; max-height: 35px; }
.nonborderbox * { box-sizing: content-box; }
.progress .bar { padding:5px; }
.progress-primary { background-color:var(--dkf-link)!important; border-color:#204d74!important; color:var(--dkf-white)!important; }
.progress-success { background-color:var(--dkf-bs-success)!important; border-color:var(--dkf-bs-success-dark)!important; color:var(--dkf-white)!important; }
.progress-warning { background-color:var(--dkf-warning-dark)!important; border-color:var(--dkf-accent-dark)!important; color:var(--dkf-white)!important; }
.progress-info { background-color:var(--dkf-info-alt)!important; border-color:var(--dkf-info-soft)!important; color:var(--dkf-white)!important; }
.progress-danger { background-color:var(--dkf-danger-dark)!important; border-color:var(--dkf-bs-danger-dark)!important; color:var(--dkf-white)!important; }
.selectedCalendar, .pts-column-element.selectedCalendar[data-date] { background-color:#00ff00!important; }

#dashboardDiv .panel{ border:0; }
#dashboardDiv .panel-heading { background-color: var(--dkf-link); color:white; margin: 0; }
#dashboardDiv .panel-body { background-color:whitesmoke; }
#dashboardDiv .value { margin-top: 5px; }
#dashboardDiv .text { margin-top: -6px; }
#dashboardDiv .transparent { color:transparent; }
#vehiculoEstadisticas .panel-body { background-color: white; }
#vehiculoEstadisticas .panel{ border: 1px solid var(--dkf-link); }
#dineroAcumuladoPanel .form-group, #dineroAcumuladoPanel .form-group input { margin-bottom:4px!important; }
#dashboardDiv table { margin-top:0!important; }
#dineroAcumuladoPanel label { margin-top:2px; }
.eurosVehiculos .col { padding:3px; font-size:14px; }

/* Selector de procesos en preferencias */
.processSelectedLayer { border:1px solid var(--dkf-gray-300); padding: 5px; width:100%; float:left; background-color:var(--dkf-white); margin-bottom:12px; }
.processSelectedLayer ul { float:left; width:100%; }
.processSelectedLayer ul li { cursor:move; white-space:nowrap; padding: 3px; float:left; border:1px solid var(--dkf-gray-400); margin: 2px; border-radius: 3px; background-color: var(--dkf-gray-100); background-image: linear-gradient(var(--dkf-gray-50) 20%, var(--dkf-bg-header) 50%, var(--dkf-gray-100) 52%, var(--dkf-gray-100) 100%); }
.processSelectedLayer ul li a { cursor:pointer; color:darkred; }

/* Barra de progreso */
.iw_progressbar { float:left; width:100%; height:20px; background-color:var(--dkf-gray-400); border:1px solid; }
.iw_progress { width:0; float:left; background-color:var(--dkf-green-strong); height:18px; }

/* Administración de Alertas */
.conditionsDocumentList strong { float:left; margin-top:10px!important; }
.conditionsDocumentList > div > .row { margin-top:5px; }

/* Chat */
#chat.chat-closed { display:none; }
#chat { position:fixed; z-index:1061; bottom:0; right:0; height:500px; width:400px; margin-bottom:0!important; top:auto!important; }
#chat .dropdown-menu { left:15px; }
#chat .panel-body { overflow:auto; height:100%; position:relative; }
#chat .typings { position:fixed; bottom:128px; width:350px; padding: 10px 0; background-color:var(--dkf-white); }
#chat .typings .fa-user, #chat .typings .fa-users { font-size:10px; }
#chat .panel-footer .form-group { margin-bottom:0; }
#chat .checkbox { margin:5px 0 0 20px ; }
#chat .fa-spinner { font-size:13px; }
#chat.minimized { height:40px!important; }
#chat.minimized .panel-body, #chat.minimized .panel-footer { display:none; }
.chat_user { font-size:14px; }
.chat_user span { font-size:12px; position:relative; top:-1px; }
.chat_date { font-size:11px; color:var(--dkf-gray-200); margin-top:3px; }
.chat_message { margin:10px 0; }
#chat_message { margin:0 0 3px; }
#chat .checkbox { margin-top:4px!important; }
.chat_message p { font-size:13px; line-height:15px; }
.chat_message audio { width:100%; }
.chat_element li { border-bottom:1px solid var(--dkf-gray-200); margin:10px 0; padding-bottom:5px; }
.chat_element li:first-child { margin-top:0; }
.chat_element li:last-child { border:none; padding-bottom:0; }
.chat_move { cursor:move; }
.chat_avatar { width:30px; border:1px solid var(--dkf-gray-200); border-radius:5px; float:left; margin-right:5px; }
.chat_user_info { float:left; margin-top:1px; }
#chat_buttons .fa-spinner.fa-spin { color:var(--dkf-white); }
#footerChatLink > span { color:var(--dkf-white); }
#footerChatLink { display:none; }
.panel-title .chat_label_unreaded, .panel-title .chat_label_unreaded .fa-comment { font-size:12px!important; }
#chat_channels { display:none; height:100%; overflow:auto; color:var(--dkf-white); position:absolute; top:0; left:0; z-index:3; width:200px; }
#chat_channels ul, #chat_channels ul li { float:left; }
#chat_channels li, #chat_channels li a { width:100%; }
#chat_channels li a { padding:8px; float:left; }
#chat_channels * { color:var(--dkf-white); }
#chat_privated_close { position:absolute; top:10px; right:10px; }

/* Mailbox */
.read td { background-color:var(--dkf-bg-section); }
.read td * { color:var(--dkf-black); font-weight:normal!important; }
.unread td { background-color:var(--dkf-white); }
.unread td * { color:var(--dkf-black); font-weight:bold!important; }
.unread td .fal { font-weight:normal!important; }
.mailboxList td .mail-important { font-weight:bold!important; color: #f1b718 !important; }
.mailboxList td .mail-no-important { color: var(--dkf-gray-300) !important; }
.mailMsg { font-size:15px; }

/* Listado de comentarios */
#listComments .name, .listComments .name { float:left; }
#listComments .user, .listComments .user { max-width:50px; }
#listComments .user img, .listComments .user img { float:left; max-width:40px; }
#listComments > div, .listComments > div { float:left; width:100%;  position:relative; padding:10px!important; margin-bottom:15px; border:1px solid; box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); }
#listComments .body, .listComments .body { float:left; margin-left:10px; padding:10px 0; border:none!important; width:calc(100% - 65px); }
#listComments .time, .listComments .time { font-size:11px; float:left; margin:1px 0 0 10px; }
#listComments .subject, .listComments .subject { float:left; margin-top:5px; }
#listComments .text, .listComments .text { /*white-space: pre-wrap;*/ word-wrap: break-word; line-height:16px; width: 100%; float:left; margin-top:5px; /*max-height:40px; overflow:hidden;*/ }
#listComments .text img, .listComments .text img { max-width: 100%; }
#listComments .showMore, .listComments .showMore { color:var(--dkf-gray-900); text-transform: uppercase; font-weight: bold; }
#listComments .btn-expand, .listComments .btn-expand { display:none; }
#listComments .compact:not(.compact-expanded) .text, .listComments .compact:not(.compact-expanded) .text { max-height:40px; overflow:hidden; }
#listComments .compact .btn-expand, .listComments .compact .btn-expand { display:block; }
#listComments .btn-group, .listComments .btn-group { position:absolute; top:0; right:0; }
#listComments ul > li, .listComments ul > li { list-style: circle!important; }
#listComments ol > li, .listComments ol > li { list-style: decimal!important; }
#expandCommentImage img { max-width: 100%; max-height:100%; }

/* Componente flexgrid */
.panel-body .flexgrid .table { margin:0!important; }
.flexgrid .table .form-control, .flexgrid .table .input-group { margin-bottom:0!important; }
.flexgrid .table .form-control { border-radius: 0!important; }
.flexgrid .table .input-group-text { padding: 4px 6px!important; }
.flexgrid .btn { color:var(--dkf-white)!important; }
.flexgrid textarea { min-width:100px!important; }
.flexgrid tfoot .input-group { width:100%; }
.flexgrid input[type="checkbox"], [data-type="flexgrid"] input[type="checkbox"] { margin-top:0!important; box-shadow: none; }
.flexgrid th[data-thtype="checkbox"], [data-type="flexgrid"] th[data-thtype="checkbox"] { width:1%; }
.flexgrid td:last-child .btn-group .btn-sortable { cursor:move; }

/* Listing usability — sort affordance on headers that carry data-sortBy
   (already set by the grid renderer in dokuflex.grid.js). The em-dash
   .dkf-empty-cell rule was removed alongside the JS revert that stopped
   emitting the span. */
.flexgrid thead th[data-sortBy] { cursor:pointer; user-select:none; }
.flexgrid thead th[data-sortBy] > label { display:inline-block; padding-right:14px; position:relative; }
.flexgrid thead th[data-sortBy] > label::after {
    content: '\2195';
    position:absolute; right:0; top:50%; transform:translateY(-50%);
    color:var(--dkf-slate-400); font-size:0.85em; opacity:0.55; transition:opacity .12s;
}
.flexgrid thead th[data-sortBy]:hover > label::after,
.flexgrid thead th[data-sortBy].sortBy-asc > label::after,
.flexgrid thead th[data-sortBy].sortBy-desc > label::after { opacity:1; color:var(--dkf-link-active); }
.flexgrid thead th[data-sortBy].sortBy-asc > label::after { content:'\2191'; }
.flexgrid thead th[data-sortBy].sortBy-desc > label::after { content:'\2193'; }
.flexgrid-filter, .flexgrid-filter button { width:100%; }
.flexgrid-filter button { top:0!important; left:0!important; height:25px; }
.flexgrid-filter-dropdown { margin-top:5px; }
.flexgrid-filter-dropdown .form-group { margin-bottom:5px; }
.flexgrid-list li { border-bottom:1px solid var(--dkf-gray-200); /*white-space: nowrap; */padding:5px 0; }
.flexgrid-list li:first-child { padding-top:0; }
.flexgrid-list li:last-child { border:none; padding-bottom:0; }
.flexgrid .table>tbody+tbody { border:none }
.flexgrid .table-responsive { padding:0; clear: both; }
.flexgrid .form-control { min-width: 100px; }
.flexgrid label { color:inherit!important; padding-left: 12px!important; text-transform: none; font-size:12px!important; }
.flexgrid table tbody .form-control { padding: 9px 12px!important; height:auto!important; border-radius:0!important; }
.flexgrid table tbody select.form-control, .flexgrid table tbody a { min-height:39px!important; }
.flexgrid table tbody tr:first-child select.form-control, .flexgrid table tbody tr:first-child a { min-height:40px!important; }
.flexgrid .table-condensed>tbody>tr>td:not(.checkData):not(.equalPadding):not(.checkDataInTable):not(.actions) { padding:0!important; }
.flexgrid:not([data-vertical]) table tbody td:not(:first-child) .form-control:not(:hover):not(:focus) { border-left-color:transparent!important; }
.flexgrid table tbody tr td textarea.form-control { height:40px!important; min-height:40px!important; }
.flexgrid table tbody td.flexgrid-actions a.btn-remove { min-width:33px; }
.flexgrid table tbody td.flexgrid-actions a.btn-search { min-width:37px; }
.flexgrid table tbody td.flexgrid-actions a.btn-sortable { min-width:36px; }
.flexgrid table tbody td.flexgrid-actions a { font-size:12px; position:relative; float:left; padding: 0 12px; border-left:1px solid; }
.flexgrid table tbody td.flexgrid-actions a span { position:absolute; top:calc(50% - 6px); }
.flexgrid[data-vertical] th { padding:3px!important; }
.flexgrid[data-vertical] .flexgrid-vertical-buttons .form-control { min-width:auto; }
.flexgrid[data-vertical] label { padding-left: 5px!important; }
.flexgrid[data-vertical][data-verticalstyledupheaders] .table-condensed>tbody>tr:last-child>td:not(.checkData):not(.equalPadding):not(.checkDataInTable):not(.actions) { padding-bottom:10px!important; }
.flexgrid input:focus, .flexgrid textarea:focus, .flexgrid select:focus, .invoiceLine input:focus, .invoiceLine select:focus { background-color:var(--dkf-bg-hover); }
.flexgrid .table-condensed>tbody>tr>td[data-td-flexgrid-checkbox] { text-align:center; /*border-top:1px solid #E0E0E0FF!important;*/ /*box-shadow: inset 0 -1px 0 #E0E0E0FF!important;*/ border-left:1px solid #E0E0E0FF!important; }
.flexgrid .table-condensed>tbody>tr>td:not(.checkData):not(.equalPadding):not(.checkDataInTable):not(.actions)[data-td-flexgrid-checkbox] { padding:13px 0!important; }
.flexgrid .table-condensed>tbody>tr:not(:first-child)>td[data-td-flexgrid-checkbox] { border-top:none!important; }
.flexgrid .processCopyValue { padding:8px 12px!important; }
.flexgrid tfoot td:last-child { border-right-color:var(--dkf-white)!important; }
.flexgrid tfoot .input-group input { background-color:transparent!important; border:none!important; font-weight:bold; text-align:right; color:var(--dkf-primary); font-size:13px; }
.flexgrid tbody td label.checkbox { display:inline; padding:0 !important; margin: 0!important; }
.flexgrid tbody td .form-control[type="checkbox"], .flexgrid tbody td .form-control[type="radio"] { padding-bottom:0!important; }
.flexgrid[data-vertical] th .input-group { flex-wrap: nowrap; }
.flexgrid[data-vertical] [data-td-flexgrid-checkbox] .flexgrid-vertical-buttons { margin-top: 10px !important; }
.flexgrid table tbody tr td .form-control { border:none; }
.flexgrid table tbody tr td:not(:last-child) { border-right:1px solid!important; }
.flexgrid[data-vertical] table tbody tr td:last-child { border-right:1px solid!important; }
.flexgrid table tbody tr { border-bottom:1px solid; border-top:1px solid; }

/* --- Refresco visual flexgrid (solo estetica, via tokens del proyecto) ----
   No cambia estructura ni ninguno de los selectores/atributos que usa
   dokuflex.flexgrid.js: cabecera diferenciada, hover de fila, foco mas
   claro y el footer de totales como una barra unica a lo ancho (antes se
   veia como un recuadro gris a media tabla). */
.flexgrid thead { background-color:var(--dkf-bg-section); }
/* color en el th: el label hereda (`.flexgrid label` fuerza color:inherit) */
.flexgrid thead th { border-bottom:2px solid var(--dkf-border); color:var(--dkf-slate-600); }
.flexgrid thead th > label { font-weight:500; }
/* Inputs editables transparentes: dejan ver el tinte de hover de la fila;
   los readonly/disabled conservan su gris (senal de no-editable). */
.flexgrid tbody td .form-control:not([readonly]):not([disabled]):not(:focus) { background-color:transparent; }
.flexgrid .numberFormatLayer > input[type="number"][data-widthsetted] { color:transparent; }
.flexgrid tbody tr:hover > td { background-color:var(--dkf-bg-hover); }
/* Foco: mantiene el fondo de la regla previa y anade un anillo primary. */
.flexgrid tbody .form-control:focus { box-shadow:inset 0 0 0 1px var(--dkf-primary); position:relative; z-index:1; }
/* Footer de totales: barra continua con borde superior marcado. */
.flexgrid tfoot tr > td { background-color:var(--dkf-bg-section); border-top:2px solid var(--dkf-border); }

/* Mensaje de error genérico */
.alert:not(.doku-toast-notification):not(.predicted):not(.userSelected):not(.alert-padding):not(.condForeign) { padding: 0 6px!important; }
.alert.alert-danger h2 { margin-top:5px; }
.alert p:last-child, .well p:last-child { margin-bottom: 0; }

/* ********************************* */
/* ****** Visor de documentos ****** */
/* ********************************* */
.pdfviewer { height:400px; }
.dropdown-annotations { float:left; margin-right:3px; }
.visor, .infoDocumento, .viewer { width:100%!important; }
.cuerpoDatos { padding:10px; font-size:14px; }
.imageViewerWrapper { position:relative; overflow:auto; max-height:600px; }
.imageViewerWrapper > span { border-radius:4px; float:left; position:sticky; top:5px; left:calc(50% - 68px); padding:8px; z-index:1; background: rgba(0, 0, 0, 0.5); }
.imageViewerWrapper > span a { margin:0 2px; }
.imageViewerWrapper .fa { font-size:25px; color:var(--dkf-white); }
/* UL.jqueryFileTree A.active movido a dokuflex-filetree.css (rediseño del arbol) */
.viewerPDF { height:100%; }
.viewerPDF .toolbar { width:100%; z-index:1!important; }
#downloadPublicForm .viewerPDF { height:400px; }
.pdf-sign { background-color:var(--dkf-white); padding:5px; border:1px dashed var(--dkf-gray-400); position:absolute; top:0; left:0; border-radius: 6px; width:20%; z-index:3; }
.pdf-sign img { width:100%; }
#signDocSave { display:none; }

.annotationDraw { position:absolute; top:0; cursor:pointer!important; }
#annotationsLayer { display:none; width:100%; padding:10px; background-color:var(--dkf-bg-highlight); border:1px solid #ffcaab; }
.annotationTextarea, .annotationImage { min-width:101px; min-height:32px; z-index:3; position:absolute; top:0; padding:20px 5px 5px; border:1px dashed var(--dkf-gray-300); }
.annotationDone { border:none!important; }
.annotationDone .btn-group { display:none!important; }
.annotationDone textarea { border-color:transparent!important; }
.annotationTextarea textarea { margin-top:6px!important; padding:6px 12px!important; border:1px solid var(--dkf-gray-300); font-size:14px; line-height:1.42857143; border-radius:4px; background-color:transparent; }
.annotationTextarea .btn-group, .annotationImage .btn-group { position:absolute; top:5px; right:5px; }
.annotationTextarea .btn-group input, .annotationImage .btn-group input { background-color:var(--dkf-black); color:transparent; border-color:var(--dkf-black); width:20px; font-size:0; }
.annotationTextarea button, .annotationImage button { padding:0 2px; font-size:10px; }
.annotationImage .image-icon { margin-top:6px; }
.annotationsImage li { float:left; margin-right:5px; }
.annotationsImage img { width:50px; }
#scaleSelectContainer { height:25px; }
/* .jqueryFileTree .loadMoreFolders movido a dokuflex-filetree.css (rediseño del arbol) */
.pdfviewer[data-showasimage="1"]{ overflow:auto; text-align:center; }
.pdfviewer[data-showasimage="1"] img { width:calc(100% - 20px); margin:10px 0; box-shadow: -5px -5px 5px 0px rgba(0,0,0,0.3); border:1px solid; }
#maximized_image { position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.8); z-index:var(--dkf-z-overlay); }
#maximized_image img { position:absolute; max-width:100%; max-height:100%; z-index:-1; }
#maximized_image a { margin:10px; }
.ovHidden { overflow:hidden; }
.unknown-document-preview { max-width:150px; }
#fileInput.fileInput { display:none!important; visibility:hidden!important; }
/* Ocultar sidebar left */
#sidebarContainer { display:none!important; }
html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer { left:0!important; }
/* Ocultar botones */
.viewerPDF #viewBookmark, .viewerPDF #editorFreeText, .viewerPDF #editorInk, .viewerPDF #sidebarToggle { display:none; }
/* Error PDF Invalid structure cuando es un popup con un PDF que carga bien... no se ha conseguido encontrar el causante de ese error, se oculta la capa de errores */
.modal-content #errorWrapper { display:none; }
#buttonEditDocumentOffice365 { color:var(--dkf-white)!important; }
#fileExtContent { width:100%; }
.visor video { width:100%; }
#toolbarContainer { border:none!important; box-shadow:none!important; }
.viewerPDF #pageNumber, .viewerPDF #scaleSelect { font-size: 13px; }
#toolbarViewerLeft > .toolbarButtonSpacer { display:none; }
#secondaryToolbarToggle { float:right!important; }
#outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) { inset-inline-start:0 !important; }
#toolbarViewerMiddle { position: relative!important; transform:none!important; left: auto!important; }
.printingPDFViewer .layout > div[data-lateral-opened] { display:none; }
.printingPDFViewer .layout > .panelside { width: 100%!important; }
.printingPDFViewer .layout > .panelside .content > .row > div:not(.visorCols),
.printingPDFViewer .layout > .panelside .content > .row .big-panel
{ display:none; }
.documentVersions { float:left; }
.documentVersions li { float:left; padding: 10px 0; width: 100%; }
.documentVersions li:not(:last-child) { border-bottom: 1px solid; }

/* ************************ */
/* ****** publicLink ****** */
/* ************************ */
#downloadPublicForm .download { display:none; }

/* ********************************* */
/* ****** Unidad organizativa ****** */
/* ********************************* */
.orgChart { background-color:transparent!important; border:none!important; margin:0!important; padding:0!important; padding-bottom:10px!important; padding-right:10px!important; overflow:auto; }
div.orgChart div.hasChildren { background-color:var(--dkf-gray-50)!important; }
div.orgChart div.node { border:1px solid!important; padding:10px!important; }
div.orgChart tr.lines td.line { height:10px!important; }

/* ********************** */
/* ****** Workflow ****** */
/* ********************** */
#workFlowZoomButtons { position:absolute; top:10px; right:20px; z-index: 1; }
#workflowDesignerLayer { min-height:600px; position:relative; overflow:auto; background:var(--dkf-gray-25)!important; width:100%!important; border:1px solid var(--dkf-gray-400); margin:20px 0; }
.modal #workflowDesignerLayer { margin-top:0; max-height:100%; margin-bottom:0; }
#workflowDesignerCanvas { height:auto; margin:0!important; background:transparent!important; min-width:100%; position:relative; transform:scale(1); padding:30px 20px 20px; transform-origin: left top; }
#workflowDesignerCanvas .window, #workflowDesignerCanvas .windowInitial { min-width:33px; min-height:33px; }
#workflowDesignerCanvas .nodeApprover { background-size: contain!important; }
#workflowDesignerCanvas .nodeApprover strong { color:var(--dkf-white); }
#workflowDesignerCanvas connection { cursor:pointer; }
#workflowDesignerCanvas .nodeReader span, #workflowDesignerCanvas .nodeScheduler span { font-size:19px; }
#workflowDesignerCanvas .nodeReader strong { color:var(--dkf-white); position:absolute; left:42%; top:4px; }
#workflowDesignerProperties .alert-info { color:var(--dkf-alert-info-text)!important; }
#workflowDesignerProperties .cuerpoDatos { padding:0!important; }
#workflowDesignerProperties .modal-body { padding-top:0!important; }
#workflowDesignerProperties .modal-dialog { width:700px!important; }
#workflowDesignerProperties .nodeReaderAuthorLayer a, #workflowDesignerProperties .nodeReaderAuthorLayer a:hover { cursor:auto!important; text-decoration:none; color:var(--dkf-gray-900)!important; }
#workflowDesignerProperties .cuerpoDatos > .row { margin-bottom:10px; }
#workflowDesignerProperties .userSelected { margin-top:3px; padding:5px; border:1px solid var(--dkf-gray-900); border-radius: 4px; }
/*#workflowDesignerProperties .cuerpoDatos > .row input,*/ #workflowDesignerProperties .cuerpoDatos > .row select { margin:3px 0; }
.updateFieldFieldList input, .updateFieldFieldList select { margin:0!important; }
.updateFieldFieldList > .row { margin: 5px -15px 10px; }
#workflowDesignerProperties .nodeReaderAuthorLayer { margin:3px 0; }
#workflowDesignerProperties .nodeReaderAuthorLayer input { float:left; margin:1px 4px 0 0!important; }
.dataOnRadioClick { padding:10px 0 10px 17px; }
.active-node { background-color:var(--dkf-bg-highlight)!important; border:3px solid var(--dkf-link)!important; }
.parameters_line .btn-group { margin-top:5px; }
.jtk-overlay { display:none!important; }
#workflowDesignerProperties.modal.in, #workflowDesignerProperties.modal.show { max-width:100%; /*top:0; right:0; position:absolute;  margin:10px;*/ }

.workflow_block { height:100%; }
.workflow_block_layer { border-bottom:1px solid; position:relative; height:200px; }
.workflow_block_text { cursor: move; position: absolute; padding:5px 10px; top:50%; text-align: center; transform-origin: center top; transform: translateX(-50%) rotate(-90deg); box-sizing: border-box; border-radius: 0 0 5px 5px; }
.workflow_block_text a { margin:0 10px 0 0; cursor:pointer; }
.workflow_block_text.process_text_black *, .workflow_block_text.process_text_black *:hover { color:var(--dkf-black)!important; }
.workflow_block_text.process_text_white *, .workflow_block_text.process_text_white *:hover { color:var(--dkf-white)!important; }
.workflow_comment { display:block; font-size:13px; font-weight:400; color:var(--dkf-slate-500); line-height:19px; margin-top:2px; word-break: break-word; }
.workflow_message_time { float:right; color:var(--dkf-slate-600); font-size:12px; }
.workflow_message_time_head { display:inline-block; font-size:12px; font-weight:600; color:var(--dkf-primary); background-color:var(--dkf-primary-tint); border-radius:12px; padding:2px 10px; white-space:nowrap; }
.workflowInfo td, #wfHistoryFields td { padding:3px 0; }
.workflowInfo td:first-child, #wfHistoryFields td:first-child { color:var(--dkf-slate-500); font-size:13px; padding-right:12px; vertical-align:top; }
.workflowInfo .wfStatus strong { display:inline-block; background-color:var(--dkf-primary-tint); color:var(--dkf-primary); border-radius:12px; padding:1px 10px; font-size:13px; }
.workflow_group { overflow:hidden; position: absolute; top:0; left: 0; width: 300px; height: 300px; resize:both; min-height: 10px; }
.workflow_group .panel-move { cursor:move; }
.workflow_group.collapsed { height:43px!important; }
.workflow_group .process_text_white { color:var(--dkf-white)!important; }
.workflow_group .process_text_black { color:var(--dkf-black)!important; }
.workflow_group_title { width:calc(100% - 100px); line-height:20px; }
.workflow_group_text, .disable_selection { user-select: none; }
.jtk-group-collapsed .w, .jtk-group-collapsed ul, .jtk-group-collapsed .container, .jtk-group-collapsed .name, .jtk-group-collapsed .window { display:none; }
.jtk-connector, .jtk-endpoint { z-index:1; }
[data-action='accept-workflow'].hide-for-layout-inner, [data-action='reject-workflow'].hide-for-layout-inner { display:none!important; }
hr.popover-separator { margin:10px 0; }
[data-tabShowedForSave] { display:block!important; }
#workflowHistoryTables table { margin-top:0; }
#workflowHistoryTables > .row { margin:0 0 4px; padding:12px 16px; background-color:var(--dkf-bg-section); border:1px solid var(--dkf-border-light); border-radius:var(--dkf-radius); }
#workflowHistoryTables > .row > div { padding:0; }

/* Nuevo WF */
#workflowDesignerLayer { line-height:12px!important;  }
.workflowColHeader { z-index:2; position:absolute; top:0; left: 0; width:100%; border-bottom:1px solid var(--dkf-slate-200); background-color:var(--dkf-gray-50); }
.workflowHeaderGroup { position:relative; }
.workflowColHeaderGroup > div { cursor:pointer; float:left; padding:5px 20px; border-right:1px solid; text-align: center; min-height:22px; }
.workflowColHeaderGroup > div:first-child { margin-left:20px; padding-left:0; }
.workflowColHeaderGroup > div:last-child { border:none; }
.workflowHeaderGroupSet >div[id] { display:none; }
.node-row { float:left; width:100%; }
.node-row[data-row="0"] { margin-top: 30px; }
.node-row.row-compact { display:none; }
.node-col { float:left; min-height:58px; }
.workflowHeaderName { position:relative; }
.workflowHeaderName span { font-size:11px; text-transform: uppercase; font-weight:600; color:var(--dkf-slate-500); }
.workflowHeaderIcons { position:absolute; right:3px; top:4px; }
.col-compact .workflowHeaderName { display:none; }
.node-col.col-compact { opacity:0.2; background-color:var(--dkf-gray-100); width:5px!important; padding-left:0!important; overflow:hidden; height:58px!important; }
.node-col.col-compact * { opacity:0; }
.node-col.col-compact.node-empty-line::before { border:none!important; }
.workflowColHeaderGroup > div:not(.workflow-group-column-button).col-compact { width:5px!important; padding-left:0; padding-right:0; overflow:hidden; }
.workflowColHeaderGroup > div:not(.workflow-group-column-button).col-compact span { display:none; }
.workflowColHeaderGroup > div:not(.workflow-group-column-button).col-compact .node-cloned { opacity:0; }
.node-box, .node-connection { float:left; min-height:56px; height:56px; }
.node-box { border-radius:6px; position:relative; border:1px solid var(--dkf-wf-line); background-color:var(--dkf-white); box-shadow:0 1px 2px rgba(15,23,42,.08); transition-property: transform; transition-duration: .2s; transition-timing-function: ease-in-out; }
.node-box:not(.node-box-empty) { cursor:pointer; }
[data-col].ghost { opacity: 0.1; }
.node-link .node-box { background-color: var(--dkf-teal-tint); }
.node-goto { border-style:dashed; cursor: alias; animation: shakeLinkTo 0.9s; animation-iteration-count: infinite; }
.node-box-empty { opacity:0!important; }
.node-connection { position:relative; height:56px; }
.node-field { width:100%; }
.node-config { display:none; }
.active-node { background-color:var(--dkf-bg-highlight)!important; border:1px solid var(--dkf-link)!important; }
.node-disabled .node-box, .node-disabled .node-line { opacity:0.5; cursor:not-allowed; }
.node-disabled .node-line a { cursor:not-allowed; }
.node-jump .node-box, .node-jump .node-line { cursor:alias; }
.node-jump .node-box:before, .node-jump-set:before { content:''; top:0; left:0; width:100%; height:100%; position:absolute; z-index:3; opacity:0.3; background: repeating-linear-gradient(45deg, var(--dkf-white), var(--dkf-white) 10px, var(--dkf-gray-400) 10px, var(--dkf-gray-400) 20px); }
.btn.node-jump-set:before { opacity:0.12; } /* en el boton del modal el rayado pleno parecia un glitch */
.node-field { position:relative; float:left; }
.node { float:left; position:relative; }
.node .popover-content ul li { word-wrap: break-word; }
.node-linked { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.node .node-info { float:left; /*height:100%;*/ margin:15px 5px 15px 5px; width:calc(100% - 44px); overflow:hidden; }
.node .node-info > span { float:left; width:100%; overflow:hidden; text-overflow:ellipsis; }
/*//-> Desactivado por petición de Toni, ahora hay un tooltip que enseña la información*/

.node .node-info .node-title > span { font-size:14px!important; text-transform: uppercase; white-space: nowrap; }
.node .node-info .node-subtitle > span { text-transform: none!important; white-space: nowrap; }
.node .node-notification { position:absolute; font-size:12px; top:2px; left:4px; display:none; }
.node .node-notification.on { display:block; }
.node-box span { font-size:12px!important; }
.node-line > .dropdown-toggle { background-color:var(--dkf-white); padding:3px 7px; border-radius:4px; border:1px solid var(--dkf-wf-line); color:var(--dkf-slate-600); }
.node-line > .dropdown-toggle:not(.disabled):hover { border-color:var(--dkf-primary); color:var(--dkf-primary); }
.node-line > .dropdown-toggle.disabled { border-color:var(--dkf-gray-300)!important; color:var(--dkf-gray-300)!important; cursor:not-allowed; }
.node-line > .dropdown-toggle[data-previous-html] { border-style:dashed; }
.node-connection .node-line { position:relative; border-bottom:1px solid var(--dkf-wf-line); width:35px; height:6px; text-align: center; margin:0 2px; }
.node-connection .dropdown-menu { margin-top:17px; margin-left:35px; border-radius: 4px; border-top-left-radius: 0; border-color:var(--dkf-gray-600); }
.node-icon { max-width:34px; float:left; padding:0 5px; border-right:none; height:100%; border-radius: 5px 0px 0px 5px; }
.node-icon > i { position:relative; top: calc(50% - 10px); font-size:20px; }
.node-icon > i.fa-link { font-size:16px; top: calc(50% - 8px); }
.node-icon .fa-bolt { margin-left:2px; }
.node-empty-line:before { content:''; display:block; border-left:1px solid var(--dkf-wf-line); width:1px; height:58px; }
.node-options { display:none; position:absolute; top:3px; right:5px; }
.node-box:not(.node-disabled):not(.node-jump):not(.node-cloned):hover { background-color:var(--dkf-bg-highlight); }
.node-box.process_text_white:hover, .node-box.process_text_white:hover * { color:var(--dkf-gray-900)!important; }
.node-box:not(.node-goto):not(.node-disabled):not(.node-jump):hover .node-options { display:block; }
.node-links { position:absolute; bottom:2px; height:12px; overflow:hidden; left:4px; }
.node-links a { margin:0 2px 2px 0; }
.node-compact, .node-go-down { position:absolute; top:25px; left:5px; z-index:1; }
.node-line-bottom-last .node-compact, .node-line-bottom-last .node-go-down { display:none; }
.node-go-down { left:15px; }
.node-cloned { opacity:0; position:fixed; }
.node-cloned[style*="opacity: 1"] { z-index:1; }
.node-cloned .node-connection, .node-cloned .node-options, .node-cloned .node-links { display:none!important; }
.node-cloned .node-box { background-color:var(--dkf-white)!important; border-style:dashed; opacity:0.5; }
.node-links a span { font-size:9px!important; }
.node-link .node-move, .node-end .node-move { display:none; }
.node-broken-link { box-shadow: inset 0 0 2px 2px rgba(255,0,0,1); }
.wfRo .node-config, .wfRo .node-move, .wfRo .node-remove { display:none; }
.wfRo .node-line .dropdown-menu { display:none; }
.wfRo .node-action .node-line a, .wfRo .node-start .node-line a { display:none; }
.wfRo .node-condition .node-line > .dropdown-toggle { color:var(--dkf-white); border-color:var(--dkf-black); }
.wfRo .node-condition .node-line > .dropdown-toggle::after { font-weight:bold; margin: -2px 0 0 -8px; font-size:9px; content:'\f128'; color:var(--dkf-black); font-family:Font Awesome\ 5 Pro, Font Awesome\ 5 Brands, Font Awesome\ 5 Free, Font Awesome\ 5 Solids, Helvetica; }
.node-line li:first-child { text-transform: uppercase; font-weight:bold; padding: 8px 10px; background-color:var(--dkf-gray-50); margin:-5px 0 3px; }
#workflow-group-column-button { background-color:var(--dkf-gray-50); display: inline-flex; position:relative; width:100%; border-top:1px solid var(--dkf-slate-200)!important; color:var(--dkf-slate-500); font-size:11px; text-transform: uppercase; cursor:pointer; }
#workflow-group-column-button span { position:sticky; left: 0; flex-grow: 0; flex-shrink: 0; padding:5px 10px; }
.node .progress-bar { text-align: left; line-height: 12px!important; }
.wizardWfRow .wizardPanelField > span { background-color:var(--dkf-gray-100); }
.node-start .node-icon { background-color:var(--dkf-wf-start); }
.node-reader .node-icon { background-color:var(--dkf-wf-reader); }
.node-approver .node-icon { background-color:var(--dkf-wf-approver); }
.node-approver_parallel .node-icon { background-color:var(--dkf-wf-approver-parallel); }
.node-action .node-icon { background-color:var(--dkf-wf-action); }
.node-condition .node-icon { background-color:var(--dkf-wf-condition); }
.node-scheduler .node-icon { background-color:var(--dkf-wf-scheduler); }
.node-workflow .node-icon { background-color:var(--dkf-wf-linked); }
.node-end .node-icon { background-color:var(--dkf-wf-end); }
.node-start .node-icon, .node-start .node-notification { color: var(--dkf-slate-900); }
.node-reader .node-icon, .node-reader .node-notification { color: var(--dkf-gray-900); }
.node-approver .node-icon, .node-approver .node-notification { color: var(--dkf-white); }
.node-approver_parallel .node-icon, .node-approver_parallel .node-notification { color: var(--dkf-white); }
.node-action .node-icon, .node-action .node-notification { color: var(--dkf-white); }
.node-condition .node-icon, .node-condition .node-notification { color: var(--dkf-gray-900); }
.node-scheduler .node-icon, .node-scheduler .node-notification { color:var(--dkf-gray-900); }
.node-workflow .node-icon, .node-workflow .node-notification { color:var(--dkf-white); }
.node-end .node-icon, .node-end .node-notification { color:var(--dkf-white); }
.node-start .node-icon .fal { font-weight:400!important; }
.node-reader .node-icon .fal { font-weight:400!important; }
.node-approver .node-icon .fal { font-weight:400!important; }
.node-action .node-icon .fal { font-weight:400!important; }
.node-condition .node-icon .fal { font-weight:400!important; }
.node-scheduler .node-icon .fal { font-weight:400!important; }
.node-workflow .node-icon .fal { font-weight:400!important; }
.node-end .node-icon .fal { font-weight:400!important; }
.node-link .node-icon .fal { font-weight:400!important; }
/* Franja del menu "+" = mismo color que el icono del tipo de nodo. */
.dropdown-menu .start { border-left: 5px solid var(--dkf-wf-start); }
.dropdown-menu .reader { border-left: 5px solid var(--dkf-wf-reader); }
.dropdown-menu .approver, .dropdown-menu .approver_temp { border-left: 5px solid var(--dkf-wf-approver); }
.dropdown-menu .approver_parallel { border-left: 5px solid var(--dkf-wf-approver-parallel); }
.dropdown-menu .action { border-left: 5px solid var(--dkf-wf-action); }
.dropdown-menu .condition { border-left: 5px solid var(--dkf-wf-condition); }
.dropdown-menu .scheduler { border-left: 5px solid var(--dkf-wf-scheduler); }
.dropdown-menu .workflow { border-left: 5px solid var(--dkf-wf-linked); }
.dropdown-menu .end { border-left: 5px solid var(--dkf-wf-end); }
.node-start .node-box { min-width:120px; }
.node-end .node-box { min-width:120px; }
.node-approver .node-box { min-width:160px; }
.node-condition .node-box { min-width:140px; }
.node-reader .node-box { min-width:140px; }
.node-action .node-box { min-width:140px; }
.node-scheduler .node-box { min-width:160px; }
.node .node-line-top { border-top-left-radius: 20px; top: -20px; border-bottom:none; border-top:1px solid var(--dkf-wf-line); border-left:1px solid var(--dkf-wf-line); height:30px; }
.node .node-line-top > a { top:-6px; position:relative; }
.node .node-line-middle { top:calc(50% - 7px); }
.node .node-line-bottom { border-left:1px solid var(--dkf-wf-line); height:27px; }
.node .node-line-bottom.node-line-bottom-last { border-bottom-left-radius: 4px; }
.node .node-line-bottom > a { top:21px; position:relative; }
.node-approver .node-line-top { top: -10px; }
.node-approver_parallel .node-line-top { top: -10px; }
.node .node-line-bottom:not(.node-line-bottom-last):before,
.node.node-condition .node-line-middle:not(.node-line-bottom-last):after,
.node.node-approver .node-line-middle:not(.node-line-bottom-last):after,
.node.node-approver_parallel .node-line-middle:not(.node-line-bottom-last):after
{ position:absolute; bottom:-32px; content:''; display:block; border-left:1px solid var(--dkf-wf-line); width:22px; height:32px; }
.node .node-line-bottom:not(.node-line-bottom-last):before { left:-1px; }
/* Rama aprobado (verde) / rechazado (rojo): toggle + cable del mismo color
   para que el camino se lea sin abrir el nodo. */
.node-approver .node-line-middle, .node-approver_parallel .node-line-middle { border-color:var(--dkf-green); }
.node-approver .node-line-bottom, .node-approver_parallel .node-line-bottom,
.node-approver .node-line-bottom:not(.node-line-bottom-last):before,
.node-approver .node-line-middle:not(.node-line-bottom-last):after,
.node-approver_parallel .node-line-middle:not(.node-line-bottom-last):after { border-color:var(--dkf-danger); }
.node-approver .node-line-middle > .dropdown-toggle, .node-approver_parallel .node-line-middle > .dropdown-toggle { background-color:var(--dkf-alert-success-bg); border-color:var(--dkf-alert-success-border); color:var(--dkf-alert-success-text); }
.node-approver .node-line-bottom-last > .dropdown-toggle, .node-approver_parallel .node-line-bottom-last > .dropdown-toggle { background-color:var(--dkf-alert-danger-bg); border-color:var(--dkf-alert-danger-border); color:var(--dkf-danger-text); }
.node-action-hide .node-box { height:0; min-height:0; padding:0; border:none; border-top:1px solid; margin-top:26px; margin-left:-2px; margin-right:2px; }
.node-action-hide .node-box * { display:none; }
.node-action-hide .node-links { display:none; }
.node-action-hide .node-connection .node-line { width:39px; margin-left:-2px; }
.node-action-hide .node-connection .node-line .dropdown-toggle { margin-left:4px; }
.workflowDesignerSearcherWrapper .form-group { margin-bottom:0; }

/* **************************** */
/* ****** Datos Maestros ****** */
/* **************************** */
.targetDynamicList > ul > li label { font-size:15px; color:var(--dkf-gray-700); }
.targetDynamicList > ul > li { min-height:80px; border:1px dashed rgb(223, 223, 223); padding:10px; }
.targetDynamicList > ul .ui-sortable-placeholder { display:none; }
.sourceDynamicList li { width:100%; margin: 10px 0; }
.sourceDynamicList li span { width:100%; }
.gridButtons .btn { margin-right: 5px; }
.gridButtons .btn:last-child { margin-right: 0; }

/* ********************** */
/* ****** Fichajes ****** */
/* ********************** */
.addQuadrantButton { margin-top: 7px; opacity: 0; }
.rowCalendar div[data-date]:hover .addQuadrantButton { opacity: 1; }
.controlTimeQuadrant .form-control, .controlTimeReport .form-control { min-width:auto!important; height: auto!important; }

/* ********************** */
/* ****** Procesos ****** */
/* ********************** */
.title h3:has(div) > div { display:flex; align-items: center; justify-content: center; }
.title h3:has(div) > div .processTitleIcon { background-color:var(--dkf-primary); border-radius:var(--dkf-radius); min-width: 40px; min-height: 40px; position:relative; margin-right: 10px; }
.title h3:has(div) > div .processTitleIcon > i { position:absolute!important; margin:0!important; top: 50%; left:50%; transform:translateY(-50%) translateX(-50%);  }
.title h3:has(div) > div .processTitleIcon .processTitleInfo { position:absolute; right:-4px; bottom:-4px; line-height:13px; border:1px solid var(--dkf-primary); border-radius:50%; text-align:center; font-size:16px; color:var(--dkf-white)!important; text-decoration:none; }
.title h3:has(div) > div .processTitleIcon .portletTitleInfoIcon { color:var(--dkf-white)!important; }
.title h3:has(div) > div .processTitleIcon .processTitleInfo i { margin:0; vertical-align:middle; }
#processDescriptionModal .modal-body ul { list-style:disc; padding-left:24px; }
#processDescriptionModal .modal-body ol { list-style:decimal; padding-left:24px; }
#processDescriptionModal .modal-body li { list-style:inherit; }
textarea.ckeditor_basic { color:transparent!important; }
.panel-close-form-designer { border-top:none!important; border-bottom:1px solid; }
.innerContent .big-panel { margin-bottom:15px; }
option[value="panel-default"]{ color: var(--dkf-gray-900); background-color: var(--dkf-gray-50); border-color: var(--dkf-gray-200); }
option[value="panel-danger"],option[value="progress-bar-danger"]{ color: var(--dkf-danger-text); background-color: var(--dkf-alert-danger-bg); border-color: var(--dkf-alert-danger-border); }
option[value="panel-warning"],option[value="progress-bar-warning"]{ color: var(--dkf-alert-warning-text); background-color: var(--dkf-alert-warning-bg); border-color: var(--dkf-alert-warning-border); }
option[value="panel-info"],option[value="progress-bar-info"]{ color: var(--dkf-alert-info-text); background-color: var(--dkf-alert-info-bg); border-color: var(--dkf-alert-info-border); }
option[value="panel-success"],option[value="progress-bar-success"]{ color: var(--dkf-alert-success-text); background-color: var(--dkf-alert-success-bg); border-color: var(--dkf-alert-success-border); }
option[value="panel-primary"],option[value="progress-bar-default"]{ color: var(--dkf-white); background-color: var(--dkf-link); border-color: var(--dkf-link); }
.filter-field { border:1px solid var(--dkf-gray-150); float:left; width: 100%; padding:7px; margin-bottom:30px; background-color:var(--dkf-bg-cream); border-radius:4px; }
.filter-field:last-child { margin-bottom:10px; }
.filter-field > button { float:right; margin:0; }
.filter-field:not(:first-child) { margin-top: 30px; }
#filter-else { margin-top: 50px; }
.filter-field:not(:first-child):before { content: "AND"; font-size: 20px; border:1px dashed var(--dkf-gray-150); width: 100%; height: 100%; float:left; margin-top: -58px; padding: 10px; font-weight: 600; }
.filter-field:has(.showOnMultiFilter:not(.d-none)) > .row { position:relative; padding-left: 60px; }
.filter-field:has(.showOnMultiFilter:not(.d-none)) > .row:before { content: "AND"; top:calc(50% - 8px); left:40px; position:absolute; transform: translateY(-50%) translateX(-50%); border-left:1px dashed var(--dkf-gray-150); padding-left: 10px; line-height: 53px; font-weight: 600; }
.filter-field:has(.showOnMultiFilter:not(.d-none)) > .row.operatorAnd:before { content: "AND"; }
.filter-field:has(.showOnMultiFilter:not(.d-none)) > .row.operatorOr:before { content: "OR"; }
#build #target label.checkbox, #build #target label.radio, .form-group label.checkbox, .form-group label.radio { margin-left:20px; }
.copy-button span, .move-button span { color:var(--dkf-gray-700)!important; position:absolute; }
.copy-button span { top:3px; left:4px; }
.move-button span { top:4px; left:4px; font-size:12px!important; cursor:move; }
#actions_layer { float:left; padding:2px 5px 2px 5px; border:1px solid var(--dkf-gray-300); border-top:none; margin:0 0 10px 0; }
#actions_layer .fa { margin:5px 0 0 0; }
#actions_layer li { float:left; width:100%; }
#actions_layer li label { margin: 0 0 0 6px; }
.signature_image { max-width:100%; }
.signature_layer canvas { background-color:var(--dkf-white); /*box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.28); */ }
.panel-title.control-label { text-align:left!important; padding:0!important; }
.button-on-heading { text-align:right; margin:-4px 0 0 0; float:right; }
.button-on-heading .btn { margin-right:5px; padding:2px 7px;  }
.button-on-heading .btn:last-child { margin-right:0; }
#target .button-on-heading .btn { margin-right:0!important; }
#target fieldset .component .sortable { padding: 5px; min-height:75px; }
#target input[type="text"], #target input[type="password"], #target textarea, #target select, #target .input-group, #target .panel:not(.kanban-element) { margin-bottom:0!important; }
label.checkbox, label.radio { font-weight:normal; }
.popover .input-group { width:100%; }
.autocomplete_fieldsname { position:absolute; background-color:var(--dkf-white); border:1px solid var(--dkf-gray-300); padding:10px; z-index:1065; max-height:300px; overflow:auto; }
.autocomplete_fieldsname * { font-size:14px; }
.autocomplete_fieldsname li { margin:2px 0; float:left; width: 100%; }
#target .sortable { border:1px dashed rgb(223, 223, 223); }
#target .sortable .component { border:none!important; position:relative; margin-left:-15px!important; margin-right:-15px!important; padding-left:15px!important; padding-right:15px!important; width:calc(100% + 30px)!important; min-height: 132px!important; }
#target .sorting-target, .targetDynamicList [data-sorttarget] { background-color:var(--dkf-bg-highlight); border:1px solid var(--dkf-black); }
#target .ui-sortable-placeholder { display:none!important; }
.component.sorting { width:100%!important; margin:0!important; border:none; }
#target .component { min-height:100px!important; padding-top:10px; border:1px dashed; float:left; }

#target .sortable, #target .component { z-index:2; }
#target .dkf-container > .clearfix { position:relative; }
#target .dkf-container > .clearfix .fa-layer, .targetDynamicList .fa-layer, #target .controlIcons { display:none; position:absolute; border:1px solid rgb(223, 223, 223); }
#target .dkf-container > .clearfix .fa-layer, .targetDynamicList .fa-layer { background-color:var(--dkf-gray-25); z-index:2; left:-28px; top:29px; padding:5px; border-right:none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; transform:translateY(-100%); width: 29px; }
#target .dkf-container > .clearfix .fa-layer { top:0; width: auto; }
#target .controlIcons { background-color:var(--dkf-bg-cream); top:-32px; right:-1px; z-index:1; border-bottom:none; padding:2px 4px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
#target .sortable .controlIcons { top:-31px; }
.targetDynamicList .controlIcons a { margin-top: -2px; margin-bottom: 10px; }
.targetDynamicList ul { position:relative; background-color:var(--dkf-gray-25); }
.targetDynamicList ul li { background-color:var(--dkf-gray-25); }
.targetDynamicList ul:hover .fa-layer { display:block!important; opacity: 1!important }
#target .dkf-container > .clearfix .fa-layer .fa, #target .dkf-container > .clearfix .fa-layer .far, .targetDynamicList .fa-layer .fa, #target .dkf-container > .clearfix .fa-layer .fas, .targetDynamicList .fa-layer .fas , #target .dkf-container > .clearfix .fa-layer .fal, .targetDynamicList .fa-layer .fal { font-size:18px; clear:both; float:left; height:11px; position:relative; z-index:1; }
#target .dkf-container > .clearfix .fa-layer .fas, .targetDynamicList .fa-layer .fas, .targetDynamicList .fa-layer .fal { font-size:28px; }
#target .dkf-container > .clearfix .fa-layer .fa-sort-down, .targetDynamicList .fa-layer .fa-sort-down, #target .dkf-container > .clearfix .fa-layer .fa-sort-up, .targetDynamicList .fa-layer .fa-sort-up { margin-left:3px; }
#target .dkf-container > .clearfix .fa-layer .fa-sort-down, .targetDynamicList .fa-layer .fa-sort-down { margin-top:1px; margin-bottom:-1px; }
#target .dkf-container > .clearfix[data-rowcleared="0"] .fa-layer .fa-sort-asc, .targetDynamicList ul:first-child .fa-layer .fa-sort-asc { display:none; }
#target .dkf-container > .clearfix:last-child .fa-layer .fa-sort-desc, .targetDynamicList ul:last-child .fa-layer .fa-sort-desc { display:none; }
/* Solo la cabecera propia del panel (dentro del cuerpo puede haber ficheros, flexgrids... con su propia cabecera) */
#target [data-type="panel"] > .component-right > .controls > .panel > .panel-heading { border-radius: var(--dkf-designer-panel-heading-radius, 8px)!important; }
/* Con cuerpo dentro (paneles anidados) solo se redondean las esquinas de arriba */
#target [data-type="panel"] > .component-right > .controls > .panel:has(> .panel-body.dkf-container) > .panel-heading { --dkf-designer-panel-heading-radius: 8px 8px 0 0; }
.fa-layer .fa-sort-asc, .fa-layer .fa-sort-desc { font-size:25px!important; }
.fa-layer .fa-sort-desc { margin:-8px 0 8px 0; }
.fa-layer .fa-circle-plus { z-index:2!important; }
.portletLoading { margin:20px 0; }
div[data-type="paragraph"] .controls > strong { font-weight:normal; }
div[data-type="paragraph"] label, .paragraph { font-weight:normal; text-align: left; }
div[data-type="paragraph"] label * { text-align: left; }
div[data-type="paragraph"] label ul, .paragraph ul { margin-left:44px; }
div[data-type="paragraph"] label ol, .paragraph ol { margin-left:44px; }
div[data-type="paragraph"] label li, .paragraph li { text-align: left; margin:5px 0; }
div[data-type="paragraph"] label ul li, .paragraph ul li { list-style-type:disc; }
div[data-type="paragraph"] label ol li, .paragraph ol li { list-style-type:decimal; }
div[data-type="paragraph"] label p, .paragraph p { margin-top:10px; }
div[data-type="paragraph"] label p:first-child, .paragraph p:first-child { margin-top:0; }
.paragraph { font-size:15px; }
.label.process-tag { margin:0 3px 0 0!important; }
.panel-with-form > .row { margin-left:0; margin-right:0; }
.automatic-data tfoot td { background-color:var(--dkf-bg-hover); }
.condition-item { padding-top:20px; padding-bottom:20px; border-bottom: 1px dashed var(--dkf-gray-100); }
.condition-item:last-child { border-bottom:none; }
.condition-item > div > span.fal { margin: 2px 10px 0 0; float:left; }
.condition-item > div > span[data-target]:not(.select2) { margin:0 0 10px; float:left; font-weight:bold; font-size:16px; width: calc(100% - 23px); }

#target .fa-globe { font-size:14px; color:var(--dkf-gray-800); }
.modal-body #flexgrid .parameters_line > div { padding-left:5px!important; padding-right:5px!important; }
.modal-body #flexgrid .parameters_line > div .form-control { padding:4px 20px 4px 6px!important; }
#wfLink { display:none; }
#addColumn { color:green; }
#removeColumn { color:red; }
.processImg { width:100%; }
.translatedInput  { position:relative; }
.translatedInput p { position:absolute; z-index:3; font-size:14px; color:var(--dkf-gray-800); padding:7px 13px; height:34px; line-height:1.42857143; }
#components .component, .form-horizontal#temp { position:relative; background-color:var(--dkf-gray-25); margin: 10px 5px; border:1px solid var(--dkf-gray-100); padding:10px; border-radius:3px; cursor:pointer; }
#components .component:hover, .form-horizontal#temp:hover { box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15); }
#components .component-left, .form-horizontal#temp { color:var(--dkf-black); }
#components .component-left .component-icon, .form-horizontal#temp .component-icon { float:left; text-align:center; padding:15px; border-radius:10px; color:var(--dkf-white); width:60px; height: 60px; position:relative; }
#components .component-left .component-icon span, .form-horizontal#temp .component-icon span { font-size:25px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); }
#components .component-left .component-desc, .form-horizontal#temp .component-desc { width:calc(100% - 130px); float:left; line-height:15px; font-size:13px; position:absolute; top:50%; left: 100px; transform: translateY(-50%); }
#components .component-left .component-desc strong, .form-horizontal#temp .component-desc strong { font-size:16px; font-weight:normal!important; }
#components .component-left .component-desc p, .form-horizontal#temp .component-desc p { color:var(--dkf-gray-600); margin-bottom:0; }
#components .component-right, .form-horizontal#temp .component-right { display:none; }
#target .component-right .controls select, #target .component-right .controls input, #target .component-right .controls textarea { pointer-events: none; }
#components .component-left { display:block; }
#target .component-right { display:block; }
#target .component-left { display:none; }
#target[data-processInFullMode] .component .move-button { display:none; }
#appFormData[data-processInFullMode] .nav-tabs [href="#conditionAdvanced"] { display:none; }
.tab-content .tab-pane[data-loading-subforms] { display:block; }
.form-horizontal#temp { margin:0!important; }
button[data-name] > span { margin-right: 5px; }
.wfButtonsCss button, .actionsOnDesignerButtons .btn { padding:8px 13px!important; }
.wfButtonsCss button > i, .actionsOnDesignerButtons .btn > i { margin-right:3px; }
#modal-designer-conditions .select2 { width:100%!important; }
#modal-designer-conditions .removeBlankSpace { margin-top:10px!important; }
#modal-designer-conditions .disableConditionWrapper { margin-top:5px!important; }
#modal-designer-conditions .modal-condition-disabled { opacity: 0.5; }
#modal-designer-conditions .modal-condition-disabled *:not([name="disabledCondition"]):not(.disableConditionWrapper) { cursor:not-allowed!important; }
#modal-designer-conditions [name="conditions-nexus"] { position:absolute; left: 0; width: 80px; }
#modal-designer-conditions .col-no-set-value { position:relative; }
#modal-designer-conditions .col-no-set-value.conditions-with-nexus > .condition-ors { width:calc(100% - 50px); border-left: 2px dashed; padding-left: 50px; margin-bottom: -8px; padding-bottom: 8px; margin-left: 25px; }
.form-readonly .file_upload, .form-readonly .fileUploadPaste { display:none!important; }
.version-num, .version-date { float:left; }
.version-num .far { font-size:15px; }
.version-date { font-size:11px; color:var(--dkf-gray-300); }
.cardactive { background:var(--dkf-bg-highlight)!important; }
.progress { width:calc(100% - 20px); margin:0 auto; }
#dynamicLayoutShow .progress { width: 100%; }
.progress-bar { border-radius:4px; }
table .progress span { color:var(--dkf-gray-400); }
.progressUserBar { position:relative; overflow:visible; }
.progressUserBar .progress-bar-handler { font-size:25px; position:absolute; top:-2px; left:-10px; }
.progress-bar.active, .progress.active .progress-bar { transition:none!important; }
.progress-bar-handler { color:var(--dkf-black); }
.form-readonly .progress-bar-handler { display:none; }
.has-error .cke { border-color:var(--dkf-danger-text)!important; }
.has-error label, .errorField .panel-label, .has-error input::placeholder { color:var(--dkf-danger-text)!important; }
.btn-block-i { width:calc(100% - 25px); }
[data-process-popover-onlyclick] { cursor:pointer; }
#tagsFilters_chosen { min-width:100px!important; }
.checkbox.checkbox-inline, .checkbox.radio-inline, .checkbox-inline, .radio-inline { float:left; margin:0 10px 5px 0!important; }
#target .dkf-container > div:hover { background-color:var(--dkf-bg-cream); }
.translatedInput > p { width:100%; white-space:nowrap; overflow-x:auto; overflow-y:hidden; }
.translatedInput > p::-webkit-scrollbar { width: 5px; height: 5px; background-color: transparent; }
.addComponentLink { display:inline; font-size:12px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); white-space:nowrap; border:1px solid var(--dkf-border-light); color:var(--dkf-border-light); padding:7px 10px 7px 7px; border-radius:17px; text-transform:uppercase; }
#target .controls .panel:not(.panel-close-form-designer):not(.kanban-element):not(:has(> .panel-body.dkf-container)) { border-bottom:none!important; }
#target .controls .file_upload { margin-bottom:0!important; }
#appBuilderContainer { position:relative; }
/* Disenador: buscador y botones en una sola fila; en <1440 px Volver, Vista previa y Opciones quedan solo con icono (tienen title y aria-label) */
.actionsOnDesigner { position:fixed; bottom:10px; right:10px; z-index:1061; display:flex; flex-wrap:nowrap; justify-content:flex-end; align-items:center; gap:8px; max-width:calc(100vw - 20px); }
.actionsOnDesigner > .clearfix { display:none; }
.actionsOnDesigner > .showHistoryLayoutAdvice { position:absolute; right:0; bottom:calc(100% + 8px); margin:0; background-color:var(--dkf-white); }
.actionsOnDesignerButtons { display:flex; flex-shrink:0; gap:4px; }
.actionsOnDesignerButtons .btn { white-space:nowrap; }
@media (max-width: 1439.98px) {
	.actionsOnDesignerButtons .btn-label { display:none; }
	.actionsOnDesignerButtons .btn > i { margin-right:0; }
}
.wfButtonsCss, .followUpButtonWrapper { display:none; position:fixed; bottom:10px; right:25px; z-index:1063; }
.followUpButtonWrapper { display:block; }
.fa-layer .fa-sort-down { bottom:8px; z-index:0!important; }
.button-del-row, .button-copy-row, .button-new-row { height:18px!important; }
.button-del-row, .button-copy-row { margin-top:1px; }
.button-color-row > span { margin-top:1px; }
.starsRating { float:left; }
.starsRating:not([data-ro]):not([readonly]) li { cursor:pointer; }
.starsRating li { float:left; font-size:20px; }
.starsRating li * { color:#ffe400; }
.processDesignerId, .componentIcons { padding:2px 3px; margin: 5px 0; }
.processDesignerId { float:right;font-size:10px; color:var(--dkf-gray-400); }
.processDesignerId.duplicated { cursor:pointer; color:var(--dkf-white); background-color:var(--dkf-danger-dark); }
.processDesignerId.duplicated:focus-visible { outline:2px solid var(--dkf-focus); outline-offset:2px; }
/* Lienzo: vista previa legible de desplegables y cierres de panel (DokuCanvasPreview en dokuflex.processBuilder.js).
   El <select> original sigue en el DOM (guarda "clave##valor") pero oculto. */
#target .dkf-canvas-source { display:none; }
#target .dkf-canvas-select { display:flex; align-items:center; justify-content:space-between; gap:8px; overflow:hidden; white-space:nowrap; cursor:default; }
#target .dkf-canvas-select-text { overflow:hidden; text-overflow:ellipsis; }
#target .dkf-canvas-select.is-dynamic .dkf-canvas-select-text { font-style:italic; color:var(--dkf-gray-650); }
#target .dkf-canvas-multi { display:flex; flex-wrap:wrap; align-items:center; gap:4px; height:auto; min-height:38px; }
#target .dkf-canvas-multi-item { padding:1px 8px; font-size:12px; border:1px solid var(--dkf-border-light); border-radius:999px; background-color:var(--dkf-surface-muted); }
#target .dkf-canvas-panel-end { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; font-size:12px; color:var(--dkf-gray-650); border:1px dashed var(--dkf-border-light); border-radius:999px; background-color:var(--dkf-surface-muted); }
/* Paneles anidados en el lienzo (PanelTree en dokuflex.processBuilder.js): el cuerpo de cada panel es un
   contenedor .row con sus propias filas y botoneras; el hueco izquierdo aloja la botonera de fila (.fa-layer a -28px)
   y el pie (.dkf-panel-end) lleva la pildora "Fin del panel" y el "+ fila" siempre visible. */
#target .panel-body.dkf-container { position:relative; margin-left:0; margin-right:0; padding:14px 15px 6px 28px; min-height:56px; }
#target .panel-body.dkf-container > .sortable { padding:0 calc(var(--bs-gutter-x, 1.5rem) * .5); min-height:0; }
#target .panel-body.dkf-container .button-indent-row { display:none; }
#target .dkf-container > .dkf-panel-end { position:relative; width:100%; min-height:24px; padding:8px 0 0; }
#target .dkf-container > .dkf-panel-end > .fa-layer { display:block; top:4px; width:29px; transform:none; }
#target .dkf-container > .dkf-panel-end .dkf-canvas-panel-end { margin-left:2px; }
#target .controls .panel.panel-block { border:1px dashed var(--dkf-border-light); box-shadow:none; }
#target .controls .panel.panel-block > .panel-heading { background-color:transparent; color:var(--dkf-gray-650); font-size:12px; border-bottom:1px dashed var(--dkf-border-light); }
.componentIcons { z-index:2; position:relative; float:left; background-color:var(--dkf-bg-cream); margin:2px 1px 0; border:1px solid var(--dkf-border-light); border-radius:4px; }
.componentIcons * { font-size:10px; }
.affected-wf-hide { opacity: 0.2 }
.affected-wf-readonly { opacity: 0.6 }

.affected-wf-hide::before, .affected-wf-hide-p::before { content:''; top:0; left:0; width:100%; height:100%; position:absolute; z-index:3; opacity:0.3; background: repeating-linear-gradient(45deg, var(--dkf-white), var(--dkf-white) 10px, var(--dkf-gray-400) 10px, var(--dkf-gray-400) 20px); }
.affected-wf-readonly::before, .affected-wf-readonly-p::before { content:''; top:0; left:0; width:100%; height:100%; position:absolute; z-index:3; background-color:var(--dkf-gray-400); opacity:0.3; }
.affected-wf-hide-p, .affected-wf-readonly-p, .affected-wf-mandatory-p { font-size:12px; float:left; padding:1px 7px; border-radius:4px; border:1px solid var(--dkf-gray-400); margin: 0 5px 10px 0; position:relative; }
.affected-wf-mandatory::before, .affected-wf-mandatory-p::before { content:''; top:0; left:0; width:100%; height:100%; position:absolute; z-index:3; background:rgba(255, 0, 0, 0.2); }
.affected-wf-readonly-p, .affected-wf-hide-p, .affected-wf-mandatory-p { cursor:pointer; }
#workflowAffectedWrapper .form-group { margin-bottom:10px; }
.processFormTabs { padding:0!important; overflow:visible; }
.workflowTimeline { overflow:auto; position:relative; padding-bottom:5px; }
.workflowTimeline::-webkit-scrollbar { height:6px!important; }
.workflowTimeline ul { float:left; }
.workflowTimeline ul li { width:300px; display:inline-block; }
.workflowTimeline ul li:first-child { padding-left: 0; }
.workflowTimeline ul li:last-child { padding-right: 0; }
.workflowTimeline ul li:first-child .timeline-badge { margin: 0 calc(50% - 25px); }
.workflowTimeline ul li:last-child .timeline-badge { margin: 0 calc(50% - 15px); }
.workflowTimeline ul li:first-child .info, .workflowTimeline ul li:last-child .info { width:calc(100% - 10px); }
.workflowTimeline ul li:first-child .info { margin-left:0!important; }
.workflowTimeline ul li:last-child .info { margin-right:0!important; }
.workflowTimeline ul li .info { position:relative; width:calc(100% - 20px); border:1px solid var(--dkf-border); margin:0 auto 15px; border-radius:4px; box-shadow:0 1px 6px rgba(0, 0, 0, 0.175); }
.workflowTimeline ul li .info strong { font-size:17px; line-height:17px; margin-bottom:10px; float:left; width:100%; }
.workflowTimeline ul li .info p { margin-bottom:5px; }
.workflowTimeline ul li .info:after { content:''; transform: rotate(-45deg); border-left:1px solid var(--dkf-border); border-bottom:1px solid var(--dkf-border); width:16px; height:16px; background-color:var(--dkf-white); position:absolute; bottom:-9px; left:calc(50% - 8px); }
.workflowTimeline ul li .info > div { margin:10px; overflow:auto; }
.workflowTimeline ul li .timeline-badge { position:relative; z-index:2; width:40px; height:40px; margin:0 auto; }
.workflowTimeline ul li .timeline-badge > span { position:relative; z-index:1; border-radius: 50%; width:40px; height:40px; font-size:1.3em; color:var(--dkf-white); }
.workflowTimeline ul li .timeline-badge.success, .workflowTimeline ul li .timeline-badge.danger { background-color:transparent!important; }
.workflowTimeline ul li .timeline-badge.success > span { background-color:var(--dkf-bs-success-dark) !important; padding: 9px 9px 9px 11px; }
.workflowTimeline ul li .timeline-badge.danger > span { background-color:var(--dkf-danger-dark) !important; padding: 9px 9px 9px 11px; }
.workflowTimeline ul li .timeline-badge:before { z-index:1; content:''; top:calc(50% - 1px); left: -165px; border-top:1px solid var(--dkf-border); position:absolute; width: 370px; }
.workflowTimeline ul li:first-child .timeline-badge:before, .workflowTimeline ul li:last-child .timeline-badge:before { width: 375px!important; }
.workflowTimeline ul li:last-child .timeline-badge:before { left: -170px; width:370px!important; }
.workflowTimeline ul li.first .timeline-badge:before { left: 50%; width:190px!important; }
.workflowTimeline ul li.last .timeline-badge:before { width:180px!important; }
.processBreadcrumb .processBreadcrumbInfo { border-radius:4px; padding: .7em 1em .7em 2em; float: left; text-decoration: none; position: relative; border:none; border-top:1px solid; border-bottom:1px solid; min-height:66px; }
.processBreadcrumb .processBreadcrumbCard { cursor:pointer; padding: .7em 1.5em .7em 1.5em;  }
.processBreadcrumb:first-child .processBreadcrumbInfo:not(.processBreadcrumbCard) { padding-left:1.2em; }
.processBreadcrumb:not(.active) .processBreadcrumbInfo strong { margin-top:14px; float:left; }
.processBreadcrumb .processBreadcrumbInfo > span { float:left; margin-top:4px; }
.processBreadcrumb .processBreadcrumbInfo strong .label { margin-top:-2px; margin-left:5px; }
.processBreadcrumb:first-child .processBreadcrumbInfo { border-left:1px solid; }
.processBreadcrumb .processBreadcrumbInfo { border-right:1px solid; }
/* Flecha chevron a altura completa via clip-path: los triangulos border
   antiguos eran de tamano fijo (1.5em) y no cubrian la celda cuando el alto
   cambia (titulo que envuelve, pasos con usuario+fecha vs. solo titulo).
   ::before = capa borde (1-2px de diagonal visible), ::after = fondo celda. */
.processBreadcrumb:not(:last-child) .processBreadcrumbInfo:not(.processBreadcrumbCard):after,
.processBreadcrumb:not(:last-child) .processBreadcrumbInfo:not(.processBreadcrumbCard):before { content: ""; position: absolute; top: 0; bottom: 0; width: 14px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.processBreadcrumb:not(:last-child) .processBreadcrumbInfo:not(.processBreadcrumbCard):before { z-index: 1; right: -14px; background-color: var(--dkf-border-light); }
.processBreadcrumb:not(:last-child) .processBreadcrumbInfo:not(.processBreadcrumbCard):after { z-index: 2; right: -12px; top: 1px; bottom: 1px; background-color: var(--dkf-white); }
/* Paso actual: fondo tintado + barra inferior primary (el outline rectangular
   antiguo cortaba la forma de flecha). */
.processBreadcrumb.actual .processBreadcrumbInfo:not(.processBreadcrumbCard) { background-color: var(--dkf-primary-tint); box-shadow: inset 0 -3px 0 var(--dkf-primary); }
.processBreadcrumb.actual .processBreadcrumbInfo:not(.processBreadcrumbCard) .breadcrumbTitle, .processBreadcrumb.actual .processBreadcrumbInfo:not(.processBreadcrumbCard) > strong { color: var(--dkf-primary); }

.processBreadcrumb .processBreadcrumbInfo.cardactive, .processBreadcrumbCard:hover, .portlet:not(.lightProcessIcon) .title .toolbarIconsWrapper a:hover .fal:after, .portlet:not(.lightProcessIcon) .title .toolbarIconsWrapper a:hover .fa:after { outline: 1px solid var(--dkf-link); outline-offset: -1px; }
.processBreadcrumb.actual .processBreadcrumbInfo:not(.processBreadcrumbCard):before { background-color: var(--dkf-primary); }
.processBreadcrumb.actual .processBreadcrumbInfo:not(.processBreadcrumbCard):after { background-color: var(--dkf-primary-tint); }
.processBreadcrumb .processBreadcrumbInfo.cardactive:before { border-left-color: var(--dkf-link)!important; }
.portlet:not(.lightProcessIcon) .title .toolbar .fal:hover, .portlet:not(.lightProcessIcon) .toolbar .title .fa:hover { color:var(--dkf-link)!important; }
/* --- workflowTimeline (variante breadcrumbs): layout flex.
   align-items:stretch iguala el alto de todos los pasos aunque su contenido
   difiera, y el centrado vertical pasa a justify-content (el hack de
   margin-top:14px de arriba queda neutralizado en este contexto). */
.workflowTimeline .processBreadcrumbWrapper { display:flex; align-items:stretch; min-width:max-content; }
.workflowTimeline .processBreadcrumb { display:flex; flex:0 0 auto; }
.workflowTimeline .processBreadcrumb .processBreadcrumbInfo { display:flex; float:none; flex-direction:column; justify-content:center; row-gap:2px; max-width:280px; border-radius:0; }
.workflowTimeline .processBreadcrumb:first-child .processBreadcrumbInfo { border-radius:var(--dkf-radius-sm) 0 0 var(--dkf-radius-sm); }
.workflowTimeline .processBreadcrumb:last-child .processBreadcrumbInfo { border-radius:0 var(--dkf-radius-sm) var(--dkf-radius-sm) 0; }
.workflowTimeline .processBreadcrumb:not(.active) .processBreadcrumbInfo strong { margin-top:0; float:none; }
.workflowTimeline .processBreadcrumbInfo .breadcrumbTitle { line-height:1.3; }
.workflowTimeline .processBreadcrumbInfo .clearfix { display:none; } /* en flex-column el clearfix solo aporta row-gap extra */
.workflowTimeline .processBreadcrumbInfo > span { float:none; margin-top:0; font-size:12px; line-height:1.3; color:var(--dkf-slate-500); }
/* Metadatos que inyecta dokuflex.process.js (1er span = usuario, 2o = fecha) */
.workflowTimeline .processBreadcrumbInfo > span:before { font-family:"Font Awesome 6 Pro"; font-weight:300; margin-right:5px; color:var(--dkf-slate-400); }
.workflowTimeline .processBreadcrumbInfo > span:nth-of-type(1):before { content:"\f007"; } /* fa-user */
.workflowTimeline .processBreadcrumbInfo > span:nth-of-type(2):before { content:"\f017"; } /* fa-clock */
/* Paso completado: check verde delante del titulo */
.workflowTimeline .processBreadcrumb.active:not(.actual) .breadcrumbTitle:before { content:"\f058"; font-family:"Font Awesome 6 Pro"; font-weight:300; margin-right:5px; color:var(--dkf-bs-success); } /* fa-circle-check */
/* Pasos futuros / no ejecutados: titulo atenuado */
.workflowTimeline .processBreadcrumb.future .breadcrumbTitle, .workflowTimeline .processBreadcrumb.inactive .breadcrumbTitle { color:var(--dkf-slate-400); }
#workflowTimeLineBreadCrumbs li .fa-move { display:none; float:left; cursor:move; }
#workflowTimeLineBreadCrumbs li:hover .fa-move { display:block }
#workflowTimeLineBreadCrumbs li label { margin-left: 20px!important; }
.contractWrapper { float:left; width:100%; }
.contractWrapper .popover { max-width:500px!important; }
.contractWrapper .popover-content { min-width:500px; }
.contractPage { float:left; clear:both; position:relative; margin:0 0 10px; border:1px solid; }
.contractPage .checkbox .owncheckbox, .contractPage .checkbox .ownradio { top:1px!important; }
.contractPage img:not(.signature_image) { max-width:100%; }
.contractPage > .dropdown { position:absolute; top:5px; right:5px; }
.contractPage .popover label { font-size:12px!important; margin-bottom:0!important; }
.contractPage .popover input, .contractPage .popover select { margin-bottom:0!important; }
.contractPage .popover .form-group { margin-bottom:5px!important; }
.contractPage .popover .popover-content > .btn-group { margin-top:10px; }
.contractPage .popover .multi-form { margin-bottom:5px; }
.contractPage .popover .multi-form:last-child { margin-bottom:0!important; }
.contractPageComponent.creating { border:1px dashed; border-radius:4px; }
.contractPageComponent { padding:5px; position:absolute; top: 5px; left: 5px; }
.contractPageComponent input[type="text"], .contractPageComponent input[type="number"], .contractPageComponent textarea, .contractPageComponent select { padding:4px 6px!important; margin-bottom:0!important; background-color:transparent; }
.contractPageComponent textarea { height:100%!important; resize:none; }
.contractPageComponent [disabled] { background-color:var(--dkf-white)!important; cursor:auto; }
.contractPageComponent .contractPageSign { background-color:transparent; border:1px solid; border-radius:4px; overflow:hidden; min-width:288px; min-height:138px; height:100%; width:100%; }
.contractPageComponent .contractPageSign.readonly { border:none; }
.contractPageComponent .contractPageSign .button-on-heading { margin-top:3px!important; }
.contractPageComponent .contractPageSign .button-on-heading .btn { margin-right:3px!important; }
.contractPageComponent .contractPageSign .panel { background-color:transparent; }
.contractPageComponent .contractPageSign .panel, .contractPageComponent .contractPageSign .panel-body { width:100%; height:100%; }
.contractPageComponent .contractPageSign .panel, .contractPageComponent .contractPageSign .panel-heading { border:none!important; padding:0!important; }
.contractPageComponent .contractPageSign .panel-body { padding:0!important; position:relative; }
.contractPageComponent .contractPageSign button { position:absolute; right:2px; top:2px; }
.contractPageComponent .form-control[readonly], .contractPageComponent .signature_all.readonly { background-color:transparent!important; border:none; }
.contractPageComponent.contractPageComponentMandatory, .contractPageComponentMandatory .mandatory, .contractPageComponentMandatory .form-control:not(:focus), .contractPageComponent.contractPageComponentMandatory .contractPageSign { border-color:var(--dkf-red-bright)!important; }
.contractPageComponentButtons { position:absolute; top:-22px; left: 0; }
.contractPageComponentButtons .btn-draggable { cursor:move; }
.contractPageComponentButtons button { border-radius: 4px 4px 0px 0px; }
.stickyPosition { position:sticky; top:5px; z-index:3; }
.searchUserNotFound { padding:10px 10px 0 10px; font-size:13px; }
.userselector .input-group, .input-group-choosed { width:100%; }
.userSelected, .cmmSelected { white-space: nowrap; border-radius: 8px!important; }
.userSelected a, .cmmSelected a, .input-group-choosed .predicted a { float:right; }
.userselector .predicted, .input-group-choosed .predicted { padding:8px 11px 8px 11px; }
.listModulesItem { max-height:70px!important; float:left; overflow: auto; margin-bottom:10px!important; }
.widget-item { margin-bottom:10px!important; }
#userCommentPredict { border:1px solid var(--dkf-border-light); float:left; background-color:var(--dkf-white); }
#userCommentPredict label { cursor:pointer; border:none; border-radius:0; border-bottom:1px solid; }
#userCommentPredict li { float:left; width:100%; }
#userCommentPredict li:last-child label { border-bottom:none; }
.cke_autocomplete_panel { margin-top: 5px!important; }
.portletForm { position:relative; }
.appDatainfoButton { position:absolute; top:-5px; right:-5px; z-index:1062!important; }
.infoPanelHidden { display:none; position:sticky; top:0; }
.infoPanelHidden.infoPanelNoFixed { position:relative; }
.infoShowed .infoPanelHidden { display:block; padding-right:0!important; }
/* La variante sticky scrollea por dentro: sin esto, el final de la tarjeta queda inaccesible cuando el contenido supera el alto de la ventana */
.infoShowed .infoPanelHidden:not(.infoPanelNoFixed) { max-height:100vh; overflow-y:auto; overscroll-behavior:contain; }
.infoPanelHidden::-webkit-scrollbar { width:6px; }
.infoPanelHidden::-webkit-scrollbar-thumb { background:var(--dkf-gray-150); border-radius:50px; }
.infoPanelHidden::-webkit-scrollbar-thumb:hover { background:var(--dkf-border-input); }
.infoPanelHidden::-webkit-scrollbar-track { background:transparent; }
/* Card chrome — alineado con #user-menu / #comunity-menu (docs/ux/dropdown-menu-bestpractices.md) */
.infoPanelHidden .content { background:var(--dkf-white); border:1px solid var(--dkf-border-light); border-radius:var(--dkf-radius); box-shadow:var(--dkf-shadow-lg); padding:16px 16px 18px; }
/* Cabecera de sección — mismo patrón que .cmm-section-title (mayúsculas, tracking, gray-700).
   El :not(.hide) es necesario: sin él, este display:flex gana a .hide{display:none} y resucita cabeceras vacías ("Información adicional").
   Sin justify-content: el icono (.infoPanelSectionIcon) va pegado al texto y las acciones (.infoPanelWf) se empujan a la derecha con margin-left:auto */
.infoPanelHidden .content > strong:not(.hide) { display:flex; align-items:center; gap:7px; width:100%; font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--dkf-gray-700); padding-bottom:4px; }
/* Icono de cabecera de sección — lo ponen appViewer/view.jsp y dokuflex.process.js (cabecera de documentos) */
.infoPanelSectionIcon { color:var(--dkf-primary); font-size:0.78rem; flex:0 0 15px; text-align:center; }
/* Agrupación: el contenido de cada sección es una banda gris suave bajo su cabecera (sustituye al subrayado) */
.infoPanelHidden .content > .infoPanelBlock { background:var(--dkf-gray-25); border:1px solid var(--dkf-gray-100); border-radius:var(--dkf-radius-sm); padding:9px 10px; }
/* Si el proceso no tiene documentos, el contenedor _app_tabs queda sin lista (el JS le quita el .hide igualmente) y pintaría una banda hueca */
.infoPanelHidden .content > .infoPanelBlock[id$="_app_tabs"]:not(:has(li)) { display:none; }
.infoPanelBlock { float:left; margin:6px 0 16px!important; width: 100%; }
.infoPanelBlock:last-child { margin-bottom:0!important; }
.infoPanelBlock > div { float:left; width:100%; margin-bottom:4px; }
.infoPanelBlock span { line-height:20px!important; }
.infoPanelBlock > div > span:first-child { color:var(--dkf-gray-500); }
.infoPanelBlock .spanblock { font-variant-numeric:tabular-nums; }
.infoPanelBlock .alert { padding:0!important; margin-bottom:0!important; }
.infoPanelBlockWfStatus { display:inline-flex; min-width:0; flex:0 1 auto; white-space: nowrap; }
.infoPanelBlockWfStatus .spanblock { max-width: 100%; min-width:0; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; padding:3px 10px !important; border-radius:12px; font-weight:600; font-size:10.5px; line-height:20px; letter-spacing:normal; text-transform:none; }
/* Los botones de acción de la cabecera (ver workflow, "+ N más") los posiciona el flex de la cabecera a la derecha */
.infoPanelWf { margin:0 0 0 auto; flex:0 0 auto; }
/* Chips de usuario tipo pill: avatar redondo + nombre (el padding pisa el .infoPanelBlock .alert{padding:0} de arriba).
   El :not(.hide) evita que este display gane a .hide y resucite los chips colapsados bajo "Varios usuarios" */
.infoPanelHidden .userSelected:not(.hide) { display:inline-flex; align-items:center; gap:6px; margin-top:-3px; max-width:100%; padding:2px 10px 2px 3px!important; border-radius:999px!important; background-color:var(--dkf-white); border:1px solid var(--dkf-border-light); transition:border-color var(--dkf-transition-fast), background-color var(--dkf-transition-fast); }
.infoPanelHidden .float-start .userSelected:not(.hide):not(:first-child) { margin-top:2px!important; }
.infoPanelHidden .userSelected img { float:none; width:18px; height:18px; margin:0; }
.infoPanelHidden .userSelected:hover { border-color:var(--dkf-primary)!important; background-color:var(--dkf-primary-tint); }
.workflowErrors span.fas { color: var(--dkf-accent); }
/* Errores de workflow como mini-tarjetas con acento de peligro */
.workflowErrors ul { margin:8px 0 0; padding:0; list-style:none; }
.workflowErrors ul li { margin-top:6px; padding:6px 8px; background:var(--dkf-white); border:1px solid var(--dkf-border-light); border-left:3px solid var(--dkf-danger-dark); border-radius:var(--dkf-radius-sm); white-space:normal; word-break:break-word; }
.spanblock { white-space: nowrap; }
.infoPanelBlock .badge { line-height:16px!important; font-size:10px!important; padding:0 4px!important; }
[data-lateral-opened] .portletForm { width:100%; }
[data-lateral-opened] .appDatainfoButton, [data-lateral-opened] .infoPanelHidden { display:none; }
[data-lateral-opened] form fieldset { overflow:auto; padding-right: 15px; }
[data-valtype="label"] p, .paragraph p { line-height:19px; font-weight:normal; }
#columns_list { float:left; width:100%; margin-bottom: 10px; }
#columns_list li, .filterRolesSelected { float:left; border:1px dashed var(--dkf-gray-300); padding: 4px; margin: 0 3px; border-radius:4px; }
#columns_list li > span {  border:1px solid var(--dkf-gray-300); border-radius:3px; padding:4px 5px; margin:0 2px; }
#columns_list li > span.disabled { cursor:not-allowed!important; }
#columns_list li:first-child { margin-left:0; }
#column_form .actionWrapperShow li { width:100%; float:left; margin:2px 0; }
#column_form .actionWrapperShow li ul, #actions_layer .duplicateDataOptions { margin:20px 20px 20px 40px; }
#column_form .actionWrapperShow li span { margin-right:5px; }
#column_form .actionWrapperShow li > span { cursor:move; }
#columns_list .handle { cursor:move; }
#mandatoryTimmingsMessage { display:none; }
.wfStatusChecks { margin-bottom:20px; }
.summaryConditionsList { overflow:auto; max-height:500px; margin-top:5px; }
.summaryConditionsList li a { float:left; width:100%; padding: 10px; border:1px solid var(--dkf-border-light); line-height:1.2; }
.summaryConditionsList li.active a { border-color:var(--dkf-primary); background-color:var(--dkf-primary-tint); font-weight:600; }
/* Condiciones avanzadas del disenador: filtrables y plegables por condicion, sin reordenar (el orden guardado importa en ejecucion) */
.cond-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.cond-toolbar .input-group { flex:1 1 280px; max-width:440px; }
.cond-toolbar .cond-toolbar-summary { margin-left:auto; font-size:12px; color:var(--dkf-gray-650); }
.cond-item-toggle { float:left; width:26px; height:26px; margin:-3px 8px 0 0; padding:0; line-height:1; color:inherit; border:1px solid var(--dkf-border-light); border-radius:var(--dkf-radius); background-color:var(--dkf-surface-muted); }
.cond-item-toggle:focus-visible { outline:2px solid var(--dkf-focus); outline-offset:2px; }
.cond-item-toggle .fa-chevron-down { transition:transform var(--dkf-transition-fast); }
.condition-item.cond-item-collapsed:not(.cond-filter-open) .cond-item-toggle .fa-chevron-down { transform:rotate(-90deg); }
/* Plegada: solo queda la cabecera (campo destino); mientras se filtra, las coincidencias se ven enteras */
#formDesignerConditionsList > .condition-item.cond-item-collapsed:not(.cond-filter-open) > :not(:first-child),
#formDesignerConditionsList > .condition-item.cond-filtered { display:none; }
/* Hueco para el boton de plegado junto al nombre del campo (la regla general reserva solo el del icono de mover) */
#formDesignerConditionsList > .condition-item > div > span[data-target]:not(.select2) { width:calc(100% - 57px); }
#formDesignerConditionsList > .condition-item.cond-item-collapsed:not(.cond-filter-open) { padding-top:12px; padding-bottom:2px; }
.cond-empty-filter { padding:15px; text-align:center; color:var(--dkf-gray-650); }
/* Popup de componente: medir pestanas ocultas para fijar la altura del modal */
.modal[data-popup-type] .modal-body .tab-content { position:relative; }
.modal[data-popup-type] .tab-content > .tab-pane.dkf-tab-measure { display:block!important; /* anula el display inline que dejan .show()/.hide() de jQuery */ position:absolute; top:0; left:0; right:0; visibility:hidden; pointer-events:none; }
/* Pestana Avanzadas del componente: prioridades de mostrar/editar/obligatorio/roles */
.dkf-priorities { margin-bottom:15px; }
.dkf-priorities > summary { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; cursor:pointer; list-style:none; font-weight:500; border:1px solid var(--dkf-border-light); border-radius:var(--dkf-radius); background-color:var(--dkf-white); }
.dkf-priorities > summary::-webkit-details-marker { display:none; }
.dkf-priorities > summary:focus-visible { outline:2px solid var(--dkf-focus); outline-offset:2px; }
.dkf-priorities[open] > summary { border-color:var(--dkf-alert-info-border); background-color:var(--dkf-alert-info-bg); }
.dkf-priorities-body { margin-top:8px; padding:12px 15px; line-height:1.45; color:var(--dkf-alert-info-text); border:1px solid var(--dkf-alert-info-border); border-radius:var(--dkf-radius); background-color:var(--dkf-alert-info-bg); }
.dkf-priorities-body ul { margin:6px 0 0; padding-left:20px; }
/* list-style en el li: la regla global "ul, li { list-style:none }" se aplica al propio li */
.dkf-priorities-body li { margin-bottom:5px; list-style:disc outside; }
/* Modal Opciones del disenador: secciones en pestanas */
#optionsModal .optionsTabs + .tab-content { padding-top:15px; }
.condSummaryAffected h3 { margin-top:0; }
#menuNavbar { margin-top:15px; }
#menuNavbar .pageLabel { font-weight:bold; }
#menuNavbar .move-icon { cursor:move; }
#menuNavbar .dropdown-submenu .move-icon { margin-right: 3px; }
#menuNavbar .dropdown-submenu .edit-icon { margin-right: 3px; }
#menuNavbar .dropdown-submenu .delete-icon { margin-right: 5px; }
#menuNavbar > .dropdown { margin-right: 5px; }
#menuNavbar > .dropdown:last-child { margin-right: 0 }
#menuNavbar .dropdown-submenu { position: relative; }
#menuNavbar .dropdown-menu > li > a { padding:3px 5px!important; margin:5px 0; }
#menuNavbar .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-radius: 0 6px 6px 6px; }
#menuNavbar .dropdown-menu .btn, #navBarMenuNew { border:1px dashed var(--dkf-gray-400); }
#menuNavbar .dropdown-menu .btn { margin: 0 0 0 5px; width:calc(100% - 10px);}
#menuNavbar .dropdown-submenu:hover>.dropdown-menu { display: block; }
#menuNavbar .dropdown-submenu.pull-left { float: none; }
#menuNavbar .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; border-radius: 6px 0 6px 6px; }
#menuNavbar > .dropdown > a > .move-icon, #menuNavbar > .dropdown > a > .edit-icon, #menuNavbar > .dropdown > a > .delete-icon { position:absolute; top:-18px; padding:3px; background-color:inherit; border:1px solid; border-color:inherit; border-bottom:none; }
#menuNavbar > .dropdown > a > .move-icon { left:0; border-right: none; border-top-left-radius: 4px; }
#menuNavbar > .dropdown > a > .edit-icon { left:17px; border-left:none; border-top-right-radius: 4px; }
#menuNavbar > .dropdown > a > .delete-icon { right:0; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.navBarMenu { margin-top:15px; }
.navBarMenu .dropdown-menu { padding: 0; }
.navBarMenu button, .navBarMenu a { text-align:left; }
.navBarMenu button:active, .navBarMenu a:active, .navBarMenu button:focus, .navBarMenu a:focus { box-shadow:none; outline:none!important; }
.navBarMenu .dropdown-menu button { border-radius:0!important; width:100%; }
.codeMirrorProcessBuilder { margin-bottom:10px; }
.codeMirrorProcessBuilder i { float:left; width:100%; margin-bottom:10px; }
.codeMirrorProcessBuilder button { margin-top:5px; }
.CodeMirror-hints { z-index: 1065!important; }
.codeMirrorProcessBuilder .CodeMirror { border:1px solid var(--dkf-border-light); border-radius: 4px; }
.selectDynamicFilters { display:none; }
.processCopyField { position:relative; }
.processCopyInput { opacity: 0; position:absolute; z-index:-1; max-width: 100%; }
.processCopyValue .element-copy { opacity:0; cursor:pointer; }
.processCopyField:hover .processCopyValue .element-copy { opacity: 1 }
.processStickyBar { bottom:0; position:sticky; padding: 5px; z-index:1062; height:60px; background-color:inherit; margin-left:-15px; margin-bottom:-20px; box-shadow: 0px -2px 2px 0px rgba(0,0,0,0.2); overflow-x:auto; }
.processStickyBar > div { height:100%; float:right; padding: 10px; border-left: 1px solid; text-align:right; }
.processStickyBar > div:last-child { border-left:none; }
.processStickyBar > div > label { font-size:12px; width:100%; float:right; color:var(--dkf-gray-600); font-weight:normal; margin-top:10px; }
.processStickyBar > div > span { font-size:18px; width:100%; float:right; }
.listDocumentsSwap { float:right; }
.listDocumentsSwap a { margin-left: 10px; }
.file-uploaded-bottom > div:not(.clearfix) { position:relative; width:100%; min-height:100px; background-size:cover; }
.file-uploaded-bottom > span { margin-top:10px; float:left; width: 100%; height:40px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-uploaded-bottom .actions { display:none; position:absolute; bottom:5px; right:5px; }
.file-uploaded-bottom:hover .actions { display:block; }
.file-uploaded-bottom .file-icon img { width:100%; }
.file-process-moving { border: 1px dashed; border-radius: 5px; margin: 0 0 10px 0; padding: 10px }

[id*=_app_tabs] .tab-content { position:static; overflow:visible; }
.ckeditor_preview { max-height:70px; overflow:auto; width:100%; }
.ckeditor_preview textarea { display:none; }
.ckeditor_preview_empty { min-height:70px; }
.summernote-own-button { margin-top: 4px; }
.openProcessSidebar { padding:20px 15px; background-color:var(--dkf-white); position:relative; }
.openProcessSidebarButton { top:10px; right:10px; position:absolute; z-index:1; }
.processDocumentLoading { display:block!important; }
.selectLayoutWrapper { position:absolute; bottom:19px; left: 16px; right:16px; }
.filterRolesSelected { margin:0 5px 10px; padding:6px 12px; float:left; cursor:pointer; }
.filterRolesSelected:first-child { margin-left:0; }
.invoiceLine { margin-top:10px; }
.invoiceLine .multi-form:not(:first-child) .headInvoice { display:none; }
.invoiceLine .advancedInvoiceLineWrapper { margin-bottom:10px; }
.invoiceLine .multi-form:last-child .advancedInvoiceLineWrapper { border:none; }
.invoiceLine .row-line { padding:0!important; }
.invoiceLine .col-line { padding:0!important; }
.invoiceLine .col-line > label { margin: 0 10px; }
.invoiceLine label { font-size:12px!important; }
.invoiceLine .col-line input, .invoiceLine .col-line select { border-radius:0!important; }
.invoiceLine .col-line input, .invoiceLine .col-line select { border-left:none; }
.invoiceLine .col-line:last-child input, .invoiceLine .col-line:last-child select { border-right:none; }
.advancedInvoiceLine { padding-bottom:10px; }
.inactiveProcess h3 { margin-top:5px!important; }
.inactiveProcess p { margin-top:15px!important; }
.revertDelete { margin-top:5px; cursor:pointer; }
.revertDelete > div { position:relative; float:left; width:20px; height:20px; }
.revertDelete > div .fa-spin { position:relative;font-size: 21px;width: 20px;height: 20px; }
.revertDelete .revertCountdown { position:absolute;left: 6px;top: 2px; }
.revertDelete strong { margin: 0 0 0 5px; }
#target [data-type="tabs"] .tabs-move { position:absolute; top:11px; z-index:12; cursor:move; }
#designFromFileFields { float:left; }
#designFromFileFields ul { float:left; max-height:150px; overflow: auto; width:100%; }
#designFromFileFields li { cursor:move; border-radius: 4px; padding:5px; float:left; border:1px solid; margin:2px; white-space: nowrap }
.table-no-result { text-align: center; position: relative; color: var(--dkf-gray-600); }
.table-no-result > div { position:relative; width: 100%; height: 150px; float:left; padding: 10px 0 10px !important; }
.table-no-result > div > div { max-width: 300px; text-align: center; position:absolute; transform:translateX(-50%) translateY(-50%); top: 50%; left: 50%; }
.table-no-result i { margin-bottom: 5px; }
.table-no-result span, .form-process-loading label, .form-process-loading .input-group { display:block; height: 15px; background: linear-gradient(to right, var(--dkf-gray-100) 20%, var(--dkf-gray-200) 50%, var(--dkf-gray-100) 80%); background-size: 500px 100px; animation-name: moving-gradient; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: forwards; border-radius:4px; }
.table-no-result span[data-grid-loading-bar-1] { width:100% }
.table-no-result span[data-grid-loading-bar-2] { width:50%; }
.table-no-result span[data-grid-loading-bar-3] { width:75%; }
.table-no-result span[data-grid-loading-bar-4] { width:25%; }
[data-dociconsappend] > img { max-width: 35px; }
#appFieldsOptions .well { padding:17px 0 0 0; }
.form-process-loading label { max-width:200px; }
.form-process-loading .input-group { height:100px; }
.handwrittenManually { position:absolute; top:3px; right: 3px; }
.translateLangLabel { position:absolute; bottom:3px; right: 3px; }
.translateFieldWrapper { position:relative; }
.translated-fields input { margin:5px 0 0 0; }
.translated-fields input:first-child { margin-top:0; }
.form-control.sourceTranslationText { border-color:var(--dkf-bg-highlight)!important }
label[onClick] { cursor:pointer; }
.col-with-color { padding-top:15px; }
.component-column:not(.col-with-color) { padding-top:15px; }
form .row-with-color-light label, .ownTheme form .row-with-color-light label { color:var(--dkf-gray-900)!important; }
form .row-with-color-dark label, .ownTheme form .row-with-color-dark label { color:var(--dkf-white)!important; }
#addIndexDesigner { float:left; margin: 2px 12px 0 0; }
#procForm { float:left; width:100%; padding-top:10px; }
#build { clear:both; float:left; width:100%; margin-top:10px; }
#build #target { width:100%; }
.processIndexList ul, .processIndexList ul li { float:left; width:100%; }
[data-formAsWizard] .processIndexList ul li { float:left; width:auto; padding-right:35px!important; }
[data-formAsWizard] .processIndexList { margin-bottom:10px; }
.processIndexList ul li { padding:20px; border:1px dashed; position:relative; cursor:pointer; }
.processIndexList ul li[disabled] { color:var(--dkf-gray-400) }
.processIndexList ul li:not(.addIndex):not([data-no-index]):after { font-family: Font Awesome\ 5 Pro; content: "\f054"; font-size:20px; position:absolute; right: 10px; }
.processIndexList ul li.addIndex { padding:20px!important; text-align: center; }
.processIndexList .addComponentLink { position:relative; top:auto; left: auto; margin:0 auto; text-align: center; }
.processIndexList .addComponentLink:last-child { margin-left:2px; }
.processIndexList [data-page-title] { font-size:17px }
.processIndexList [data-page-subtitle] { margin:10px 0 0 0; float:left; font-size:13px; }
.processIndexList .indexOptions { position:absolute; width:100%; top:0; left:0; }
.processIndexList .indexOptions a { position:absolute; top:5px; font-size:11px; }
.processIndexList .indexOptions a[data-page-move] { right:35px; cursor:move; }
.processIndexList .indexOptions a[data-page-remove] { right:20px; }
.processIndexList .indexOptions a[data-page-config] { right:5px; }
.portletForm .processIndexList .input-group, .portletForm .processIndexList .form-group { margin-bottom:5px!important; }
.portletForm .processIndexList li { border:none; border-bottom: 1px solid var(--dkf-gray-300); }
.portletForm .processIndexList li.active { color:var(--dkf-finance-accent); border-bottom: 4px solid var(--dkf-finance-accent); }
.portletForm .processIndexListScrollBar { overflow-y: auto; }
#newLayoutWrapper ul { float:left; width:100%; }
#newLayoutWrapper ul li { float:left; width:100%; border-radius: 4px; padding:10px; cursor:pointer; }
#newLayoutWrapper ul li:hover, #newLayoutWrapper ul li.active { background-color:var(--dkf-gray-400); }
#newLayoutWrapper ul li strong { font-size:16px; }
#newLayoutWrapper ul li i { font-size:25px; }
#newLayoutWrapper ul li .newLayoutIcon { float:left; text-align:center; padding:10px; border-radius:4px; width:20%; margin:0 10px 0 0; background-color:var(--dkf-white); color:var(--dkf-gray-900); }
#newLayoutWrapper ul li .newLayoutText { float:left; margin-top:4px; width:calc(80% - 10px); }
#newLayoutWrapper ul li .newLayoutText p { font-size:12px; margin-top:2px; }
#newLayoutWrapper img { max-width:100%; border:1px solid; border-radius: 10px; padding:20px; }
select.form-control[multiple][data-buttonmode] { height:0!important; }
select[data-buttonmode] { opacity:0; height:0!important; padding:0!important; margin:0!important; border:none!important; }
.selectButtonMode > .btn { padding:6px 12px!important; margin:0 5px 5px 0; }
.component-column[data-hiddenByIndex], .clearfix[data-hiddenByIndex], .component-column[data-hiddenByWizard], .clearfix[data-hiddenByWizard], .component-column[data-removedBlankSpace] { display:none; }
#target [data-dragging-row].indentDragging { z-index:10; }
#target .sortable.indentDragging { z-index:11; }
#target fieldset .clearfix .fa-layer .move-button { margin:2px 0 1px!important; }
#target fieldset .clearfix .fa-layer .move-button span { font-size:11px!important; top:2px!important; left:3px!important; }
.formAsWizardSteps { float:left; width:100%; text-align:center; margin:20px 0; }
.formAsWizardSteps button { margin: 0 20px; }
.formAsWizardSteps ul { margin:20px auto 10px; height:20px; }
.formAsWizardSteps ul li { display:inline-block; margin: 0 10px; width:21px; height:21px; }
.formAsWizardSteps ul li .fas { position:relative; font-size:21px; bottom:-3px; left:-1px; right:-1px; transition: font-size .2s ease; line-height:10px; }
.inputAddonClickable { cursor:pointer; }
.showHistoryLayoutAdvice { position:relative; line-height:17px; float:right; margin-top:10px; border-radius:5px; border:1px solid; padding:15px; color:var(--dkf-gray-900); }
.showHistoryLayoutAdvice a { position:absolute; top:8px; right:10px; }
.searchFieldName { flex:0 1 330px; min-width:230px; position:relative; line-height:17px; }
.searchFieldName .form-control { background-color:var(--dkf-white); }
.searchFieldName .dkf-search-count { font-size:12px; white-space:nowrap; background-color:var(--dkf-white); }
.searchFieldName .dkf-search-nav { padding:0 9px; border-color:var(--dkf-border-input); }
@media (max-width: 1439.98px) { .searchFieldName { flex-basis:260px; } }
.hiddenBySearch { display:none; }
/* Buscador del disenador: resalta en vez de ocultar */
#target .component.dkf-search-match { box-shadow:inset 0 0 0 2px var(--dkf-warning); }
#target .component.dkf-search-current { box-shadow:inset 0 0 0 3px var(--dkf-primary); background-color:var(--dkf-bg-highlight); }
mark.dkf-search-mark { padding:0; color:inherit; background-color:var(--dkf-warning); }
#historyLayouts.modal-bottom-left table thead th:nth-child(n+3) { display:none; }
#historyLayouts.modal-bottom-left table tbody td:nth-child(3), #historyLayouts.modal-bottom-left table tbody td:nth-child(4) { display:none; }
.gridFreemiumFields { max-height:165px; overflow-y:auto; }
.gridFreemiumFields li { padding: 2px 0; }
.gridFreemiumFields li:first-child { padding-top:0; }
[data-grid-freemium="1"] .modal-body .table-responsive { margin:0!important; }
.gridThSorter { position:absolute; top:0; left: 0; z-index:2; cursor:move; }
.tour-showing { display:block!important; opacity: 1!important; }
.multi-values { margin-bottom:10px; }
.multi-values .multi-buttons:not(:first-child) { margin-top:5px; }
[data-grid-freemium] .designDataPreview table { margin:10px 0!important; }
/* Pasos del workflow (boton "Workflow" de la toolbar del portlet) — stepper
   vertical en el orden real del flujo. Colores por tipo de nodo = mismos
   tokens semanticos que el designer (--dkf-wf-*) para un unico mapa mental. */
.workflowApprovers { padding:10px 0 0; }
.workflowApprovers .wfStepsLoading { padding:30px 0; text-align:center; color:var(--dkf-gray-700); }
.workflowApprovers .wfStepsEmpty { padding:20px 0; color:var(--dkf-gray-700); }
.workflowApprovers .wfStepsList { position:relative; padding-left:48px; max-width:980px; }
.workflowApprovers .wfStepsList::before { content:''; position:absolute; left:15px; top:10px; bottom:10px; width:2px; background:var(--dkf-slate-200); }
.workflowApprovers .wfStepItem { position:relative; margin-bottom:14px; }
.workflowApprovers .wfStepDot { position:absolute; left:-48px; top:4px; width:32px; height:32px; border-radius:var(--dkf-radius-round); display:flex; align-items:center; justify-content:center; background:var(--dkf-white); border:2px solid var(--dkf-wf-approver); color:var(--dkf-wf-approver); font-weight:700; font-size:14px; z-index:1; }
.workflowApprovers .wfStepDot-doc { border-color:var(--dkf-wf-action); color:var(--dkf-wf-action); border-style:dashed; font-size:13px; }
.workflowApprovers .wfStepMilestone { position:relative; margin:0 0 14px; padding:2px 0; color:var(--dkf-gray-700); font-size:13px; }
.workflowApprovers .wfStepMilestoneDot { position:absolute; left:-37px; top:7px; width:10px; height:10px; background:var(--dkf-wf-condition); border:2px solid var(--dkf-white); transform:rotate(45deg); z-index:1; }
.workflowApprovers .wfStepCard { border:1px solid var(--dkf-border-light); border-radius:var(--dkf-radius); background:var(--dkf-bg-body); box-shadow:var(--dkf-shadow-lg); overflow:hidden; }
.workflowApprovers .wfStepCard.wfStepDirty { border-left:3px solid var(--dkf-accent); }
.workflowApprovers .wfStepHead { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:9px 14px; }
.workflowApprovers .wfStepTitle { font-weight:600; font-size:15px; color:var(--dkf-slate-800); }
.workflowApprovers .wfStepWho { display:inline-flex; align-items:center; gap:6px; background:var(--dkf-primary-tint); color:var(--dkf-primary); font-size:12px; font-weight:600; padding:2px 10px; border-radius:14px; }
.workflowApprovers .wfStepWho-broken { background:var(--dkf-alert-danger-bg); color:var(--dkf-danger-text); }
.workflowApprovers .wfStepDownload { color:var(--dkf-link); }
.workflowApprovers .wfStepHeadSpacer { flex:1; }
/* :not() para ganar a .wfStepChip{display:inline-flex}, ver gotcha .hide */
.workflowApprovers .wfStepCard:not(.wfStepDirty) .wfStepDirtyChip { display:none; }
.workflowApprovers .wfStepSummary:not(:empty) { border-top:1px solid var(--dkf-gray-100); }
.workflowApprovers .wfStepBody { display:flex; flex-direction:column; gap:6px; padding:10px 14px 12px; }
.workflowApprovers .wfStepKV { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.workflowApprovers .wfStepK { min-width:170px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--dkf-gray-600); }
.workflowApprovers .wfStepChip { display:inline-flex; align-items:center; gap:5px; background:var(--dkf-gray-50); color:var(--dkf-gray-700); font-size:12px; padding:1px 9px; border-radius:12px; margin:1px 4px 1px 0; }
.workflowApprovers .wfStepChip-ok { background:var(--dkf-alert-success-bg); color:var(--dkf-alert-success-text); }
.workflowApprovers .wfStepChip-ko { background:var(--dkf-alert-danger-bg); color:var(--dkf-danger-text); }
.workflowApprovers .wfStepChip-warn { background:var(--dkf-alert-warning-bg); color:var(--dkf-alert-warning-text); }
.workflowApprovers .wfStepEdit { border-top:1px solid var(--dkf-gray-100); background:var(--dkf-bg-section); padding:14px; }
.workflowApprovers .wfStepEditCols { display:flex; gap:24px; flex-wrap:wrap; }
.workflowApprovers .wfStepEditCol { flex:1; min-width:260px; }
.workflowApprovers .wfStepEditLabel { display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--dkf-gray-600); margin-bottom:8px; }
.workflowApprovers .wfStepEditHint { margin:8px 0 4px; font-size:12px; color:var(--dkf-gray-700); }
.workflowApprovers .wfStepOpt { margin-bottom:2px; }
.workflowApprovers .wfStepOptExtra { margin:6px 0 10px 22px; }
.workflowApprovers .wfStepEditActions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.workflowApprovers .checkbox .ownradio, .workflowApprovers .checkbox .owncheckbox { width:14px; height:14px; border-color:var(--dkf-slate-500); }
.workflowApprovers .checkbox input:checked ~ .ownradio, .workflowApprovers .checkbox input:checked ~ .owncheckbox { border-color:var(--dkf-primary); }
.workflowApprovers .checkbox .ownradio:after { background-color:var(--dkf-primary); border-color:var(--dkf-primary); }
.workflowApprovers .checkbox .owncheckbox:after { border-color:var(--dkf-primary); left:5px; top:2px; }
.workflowApprovers .checkbox input:focus-visible ~ .ownradio, .workflowApprovers .checkbox input:focus-visible ~ .owncheckbox { outline:2px solid var(--dkf-focus); outline-offset:1px; }
/* display via :not(.hide) — un display de componente con 2 clases gana a
   .hide{display:none} y resucita el elemento (gotcha conocido del infoPanel) */
.workflowApprovers .wfStepsSaveBar:not(.hide) { display:flex; }
.workflowApprovers .wfStepsSaveBar { position:sticky; bottom:0; z-index:5; align-items:center; gap:12px; background:var(--dkf-bg-body); border-top:1px solid var(--dkf-border-light); padding:10px 0; margin-top:6px; max-width:980px; }
.workflowApprovers .wfStepsSaveBarSpacer { flex:1; }
.workflowApprovers .wfStepsDirtyBadge:not(.hide) { display:inline-flex; }
.workflowApprovers .wfStepsDirtyBadge { align-items:center; gap:6px; color:var(--dkf-warning-dark); font-size:13px; font-weight:600; }
@media (max-width: 767px) {
	.workflowApprovers .wfStepsList { padding-left:38px; }
	.workflowApprovers .wfStepDot { left:-38px; width:26px; height:26px; font-size:12px; }
	.workflowApprovers .wfStepMilestoneDot { left:-29px; }
	.workflowApprovers .wfStepK { min-width:100%; }
}
.designerRowSystemGroup { display:flex; flex-wrap:wrap; gap:5px; max-width:190px; margin-top:4px; }
.designerRowSystem { display:inline-flex; align-items:center; }
.designerRowSystem > div { border:1px solid; float:left; width:7px; height: 10px; margin-right: 2px; }
.designerRowSystem > div:last-of-type { width: 8px; border-right:1px solid; margin-right:0; }
.designerRowSystemNumber { margin-left:6px; font-size:12px; font-weight:600; line-height:1; }
#appFormData .designerShortcuts button { margin-bottom:5px; }
/* Cabecera del disenador: flex en lugar de floats para que columnas y atajos no salten de linea a 1280 px */
.designerHeaderActions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; }
.designerHeaderActions .switch-with-text .checkbox { margin:0; }
/* Estado del guardado bajo el titulo del disenador (DokuDesignerHeader) */
.dkf-save-status { display:block; clear:both; margin:0 0 6px; font-size:12px; white-space:nowrap; color:var(--dkf-gray-650); }
.dkf-save-status::before { content:"\f00c"; margin-right:5px; font-family:"Font Awesome 6 Pro"; font-weight:300; color:var(--dkf-success); }
.designerTopButtons { display:flex; flex-direction:row-reverse; flex-wrap:wrap; align-items:flex-start; gap:10px 20px; }
.designerTopButtons .form-group { margin-bottom:0; }
.designerTopButtons > div:last-child { flex:1 1 220px; max-width:285px; }
.designerTopButtons > div:first-child { border-left:1px solid; padding-left:20px; }
.appBuilderForm { margin-bottom: 20px; }
.appBuilderForm h2.processTitle { margin-top: 5px; margin-bottom: 12px !important; float: left; width: 100%; max-width: 100%; overflow: hidden; white-space: normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.newProcessCards .card-icon { margin-top:10px; }
.label-dark { background-color:var(--dkf-black); color:var(--dkf-white); }
.summernoteManualMentions { position:absolute; z-index:1065; background-color:var(--dkf-white); padding: 10px; border-radius:4px; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); }
.summernoteManualMentions ul { float:left; padding:0; margin: 0; }
.summernoteManualMentions li { float:left; padding:0; margin: 0; clear:both; }
.summernoteManualMentions a { float:left; padding: 5px 10px; }
.copyElements { height: 0!important; opacity: 0!important; position:absolute; z-index:-1; }
.appRoleToGrid ul { margin:10px 0; }
.appRoleToGrid li, .appRoleToGrid ul { float: left; width: 100%; }
.appRoleToGrid li span, .appRoleToGrid li label { float:left; }
.appRoleToGrid li span.fal { margin-right: 8px; margin-left: 6px; width: 15px; }
.select2-with-order > * { float:left; }
.select2-with-order .move-handler { width: 40px; margin: 5px 5px 0 0; }
.select2-with-order > .multi-field-select2 { width: calc(100% - 45px); }
#qrCodeWrapper > img { margin: 0 auto 20px; }
.shareLinkShort .btn-success * { color: var(--dkf-white); }
#followUpProcessWrapper h4 { margin-bottom:0; letter-spacing: 2px; text-overflow:ellipsis; overflow: hidden; }
#followUpProcessWrapper .alert { white-space:nowrap; background-color: var(--dkf-bg-section) !important; border:1px solid var(--dkf-border);  }
#followUpProcessWrapper .btn { margin-bottom:20px; }
#copyFollowUpUrl, #copyFollowUpCode { opacity:0; height:0; position:absolute; top:0; left:0; }
.qrReader { position: relative; }
.qrReader, .qrCreator { width:100%; border:1px solid; border-radius:4px; padding: 20px; float:left; }
.qrReader > span, .qrCreator > span { float:left; font-size: 30px; line-height:1.1; }
.qrReader > button, .qrCreator > button { float:left; margin-left: 20px; }
.qrCreatorResultWrapper { float:left; width: 100%; }
.qrCreatorResultWrapper img { padding:5px; margin:10px 0; border-radius: 5px; border:1px solid; }
.advancedConditionComponent .condition-item span[data-target] .label { /*color:var(--dkf-white);*/ font-size: 12px!important; margin-left: 3px; line-height:18px; /*padding-bottom:.2em!important;*/ font-weight:normal; }
.qrReaderElement { border:none!important; display: flex; flex-direction:column; align-items:flex-start; align-content:flex-start; }
.qrReaderElement img { display:none; }
.qrReader .qr-scan-again { clear: both; float: left; margin-top: 8px; }
button.html5-qrcode-element { position:relative; font-size:13px; float:left; color:var(--dkf-gray-900); background-color:var(--dkf-white); padding: 7px 12px 7px 30px; margin-bottom:0; display: inline-block; border-radius: 4px; border:1px solid var(--dkf-gray-300); }
button.html5-qrcode-element::before { font-family:Font Awesome\ 5 Pro, Font Awesome\ 5 Brands, Font Awesome\ 5 Free, Font Awesome\ 5 Solids, Helvetica; font-weight:300; position:absolute; top:7px; left: 12px; z-index:1; }
#html5-qrcode-button-camera-start::before { content:'\f030'; }
#html5-qrcode-button-camera-stop::before { content:'\e0d9'; }
.qrReaderElement [id*="__dashboard"] { order: 1; }
.qrReaderElement [id*="__scan_region"] { order: 2; min-height:auto!important; }
.qrReaderElement [id*="__scan_region"] video, .qrReaderElement [id*="__scan_region"] #qr-shaded-region { margin-top:20px; }
.qrReaderElement [id*="__scan_region"] img, .qrReaderElement [id*="__scan_region"] br { display: none; }
.qrReaderElement [id*="__scan_region"], .qrReaderElement [id*="__dashboard"] { text-align: left!important; flex-grow: 1!important; }
.qrReaderElement [id*="__dashboard_section"] { padding:0 0 0 10px!important; }
.qrReaderElement [id*="__dashboard_section"] > div:not(:first-child) { display: none; }
.qrReaderElement [id*="__dashboard_section_csr"] { position: relative; height:0; }
.qrReaderElement [id*="__dashboard_section_csr"] > span { color: transparent!important; }
.qrReaderElement #html5-qrcode-select-camera { color:var(--dkf-gray-900)!important; padding: 9px 12px !important; margin: -2px 0 15px 10px !important; height:auto !important; font-size: 14px; border-radius: 4px; }
[data-multi-values-name="createPersonalFieldsForm"] > .multi-data > .multi-form:not(:first-child) { border-top:1px solid; padding-top:20px; }
[data-multi-values-name="createPersonalFieldsForm"] .options-list { display: none; }
.editable-by-admin { margin-top: -10px; }
button.btn-create-layout:not(:hover) { border-color:transparent!important; }
.progress-dynamic-layout .progress-bar { white-space: nowrap; }
.progress-dynamic-layout .progress-bar span { color:var(--dkf-gray-200); margin-left: 10px; }
#dynamicResponseWrapper { margin-top: 10px; }
.component-column[style*="background-color"] .panel, .component-column[style*="background-color"] thead, .component-column[style*="background-color"] .tablesorter-header { background-color: transparent!important; }
.component[data-bgcolor] .panel, .component[data-bgcolor] thead { background-color: transparent!important; }
.component-column .master-data .table-no-result .fa-5x { font-size:3em; }
.component-column .master-data .table-no-result > div { height:100px; }
.infoPanelHidden .documentSidebarSearcher { margin-bottom:10px; }
.infoPanelHidden .relationsDocuments { text-align:center; float:left; width: 100%; }
.infoPanelHidden .relationsDocuments .infoPanelBlock { width: 100%; }
.infoPanelHidden .relationsDocuments ul { text-align:left; }
.infoPanelHidden .relationsDocuments ul, .infoPanelHidden .relationsDocuments ul li { float:left; width: 100%; }
.infoPanelHidden .relationsDocuments ul li { border:1px solid var(--dkf-border-light); border-radius: var(--dkf-radius); padding: 10px; margin-top: 10px; transition:border-color var(--dkf-transition-fast), background-color var(--dkf-transition-fast); }
.infoPanelHidden .relationsDocuments ul li:first-child { margin-top:0; }
.infoPanelHidden .relationsDocuments ul li:hover { border-color:var(--dkf-primary); background-color:var(--dkf-bg-hover); }
.infoPanelHidden .relationsDocuments ul li > div { float:left; }
.infoPanelHidden .relationsDocuments ul li .sidebarDocumentIcon { background-size: cover; width: 50px; height:50px; margin-right: 10px; border-radius:var(--dkf-radius-sm); }
.infoPanelHidden .relationsDocuments ul li .sidebarDocumentContent { margin-top: 6px; width: calc(100% - 125px); overflow: hidden; text-overflow: ellipsis; }
.infoPanelHidden .relationsDocuments ul li .sidebarDocumentContent strong { font-weight:400; white-space: nowrap; clear: both; line-height:20px; color:var(--dkf-gray-900); }
.infoPanelHidden .relationsDocuments ul li .sidebarDocumentContent span { font-weight:300; color:var(--dkf-gray-500); }
.infoPanelHidden .relationsDocuments ul li .sidebarDocumentActions { position:relative; margin-top: 15px; margin-left: 10px; float:right; }
.infoPanelHidden .relationsDocuments ul li .sidebarDocumentActions a { font-size: 18px; margin-right:5px; color:var(--dkf-gray-700); transition:color var(--dkf-transition-fast); }
.infoPanelHidden .relationsDocuments ul li .sidebarDocumentActions a:hover { color:var(--dkf-primary); }
.infoPanelHidden .relationsDocuments ul li .sidebarDocumentActions a:last-child { margin-right:0 }
.infoPanelHidden .cuerpoDatos { padding:0!important; }
.infoPanelHidden #listComments > div { box-shadow: none; border:1px solid var(--dkf-border-light); border-radius:var(--dkf-radius); margin-bottom:10px; }
.allowImportExcelAdvanced { padding-left: 18px; }
.rowVerticalAlignmentCenter, .rowVerticalAlignmentBottom, .rowVerticalAlignmentTop { display:flex; position:relative; }
.rowVerticalAlignmentCenter > .component, .rowVerticalAlignmentBottom > .component, .rowVerticalAlignmentTop > .component { position:static }
.rowVerticalAlignmentTop { align-items: start; }
.rowVerticalAlignmentCenter { align-items: center; }
.rowVerticalAlignmentBottom { align-items: end; }
.rowAligned { margin-bottom: 15px; }
.rowAligned > .form-group, .rowAligned > .form-control, .rowAligned input[type="text"], .rowAligned input[type="number"], .rowAligned input[type="password"], .rowAligned textarea, .rowAligned select, .rowAligned .card { margin-bottom:0!important; }
.rowAligned:not(.colAligned) > .form-group { width: 100%; }
.rowAligned > .pull-right, .rowAligned > .pull-left, .rowAligned > .pull-center { display:flex; }
.rowAligned > .pull-right { justify-content: end; }
.rowAligned > .pull-left { justify-content: start; }
.rowAligned > .pull-center { justify-content: center; }
[data-hiddenByFormType] { display:none; }
.condForeign { padding: 3px 6px!important; margin-top: 5px; font-size:12px; }
span > p.condForeign { float:right; margin-top: -3px; margin-bottom: 0; margin-left: 10px; font-weight: normal }
/* Preferencias del appViewer (#appList / #templatesList): grid compacto de tarjetas.
   El min-height:0!important anula el inline-style de mountEqualHeights() (igualaba
   las 200+ tarjetas a la mas alta); flex-wrap:nowrap anula el wrap de .row (BS5). */
#appList .panel { position:relative; }
#appList .grid > .row, #templatesList > .row { display:flex; flex-wrap:wrap; }
#appList .grid > .row > div, #templatesList > .row > div { width:33.333%; padding:6px!important; }
#appList .panel.widget-box-2, #templatesList .panel.widget-box-2 { height:100%; margin-bottom:0; border-radius:8px; transition:border-color .15s ease, box-shadow .15s ease; }
#appList .panel.widget-box-2:hover, #templatesList .panel.widget-box-2:hover { border-color:var(--dkf-link)!important; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
#appList .widget-box-2 .row-table, #templatesList .widget-box-2 .row-table { display:flex; flex-wrap:nowrap; align-items:center; gap:12px; min-height:0!important; padding:10px 12px; }
#appList .widget-box-2 .row-table > div, #templatesList .widget-box-2 .row-table > div { display:block; float:none; padding:0!important; }
#appList .widget-box-2 .row-table > .col-4, #templatesList .widget-box-2 .row-table > .col-4 { width:auto; flex:0 0 auto; }
#appList .widget-box-2 .row-table > .col-4 > span, #templatesList .widget-box-2 .row-table > .col-4 > span { font-size:18px!important; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background-color:var(--dkf-bg-section); border-radius:8px; }
#appList .widget-box-2 .row-table > .col-8, #templatesList .widget-box-2 .row-table > .col-8 { width:auto; flex:1 1 auto; min-width:0; }
#appList .widget-box-2 a, #templatesList .widget-box-2 a { font-size:14px!important; font-weight:600; line-height:1.3; }
#appList .widget-box-2 .clearfix, #templatesList .widget-box-2 .clearfix { margin-top:0!important; }
#appList .widget-box-2 p, #templatesList .widget-box-2 p { margin:2px 0 0; font-size:12px; color:var(--dkf-gray-600); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#appList .panel.widget-box-2.highlight { border-color:var(--dkf-link)!important; box-shadow:inset 0 0 0 1px var(--dkf-link); }
#appList .panel .selectLayoutWrapper { position:static; padding:0 12px 10px; }
#appList .panel .selectLayoutWrapper .col-md-12 { width:100%; padding:0; }
#appList .rownormal.well { border-radius:8px; }
#appList .checkbox { margin:4px 0; }
@media (max-width: 991px) { #appList .grid > .row > div, #templatesList > .row > div { width:50%; } }
@media (max-width: 575px) { #appList .grid > .row > div, #templatesList > .row > div { width:100%; } }
.note-editor.note-airframe.fullscreen, .note-editor.note-frame.fullscreen { background-color: var(--dkf-white); z-index: 1065!important; }
/* Listas escritas en Summernote (textarea con HTML): la regla global "ul, li { padding:0; list-style:none }" les quita viñetas y sangria */
.note-editable ul, .note-editable ol { margin:0 0 10px; padding-left:24px; }
.note-editable ul > li { list-style:disc outside; }
.note-editable ol > li { list-style:decimal outside; }
.note-editable ul ul > li { list-style-type:circle; }
.categoryselector .select2:first-of-type { margin-bottom:10px; }
[data-multi-values-name="gridColumns"] .multi-form { margin-bottom:10px; }
.gridColumnsAllField { margin-bottom:5px; }
.gridColumnsAllField > div, .gridColumnsAllField > input[type="text"], .gridColumnsAllField > select, .gridColumnsAllField > .select2 { margin-bottom:3px!important; }
#quickDelegation { padding-left: 20px; }
#quickDelegation > div > a { cursor:pointer; }

/* Wizard importador de procesos */
.wizardImportV2 ul li { padding:10px 0; }
.wizardImportV2 ul li:not(:last-child) { border-bottom: 1px solid; }
.wizardImportV2 .subdirectory { margin-top:5px; }
.wizardImportV2 .disabled { opacity: 0.6; }

/* Freemium install modules Portlet */
.freemium_installed { color: lightgray; }
.module_limits { position: absolute; right: 0; background-color: lightgray; padding: 5px; color: white; border-radius: 5px 0 0 0; bottom: 0; }
.module_limits_exceeded { background-color: maroon !important; }
.module_no_limits { background-color: var(--dkf-primary)!important; }
.module_box { padding: 15px 15px 0 15px!important; }
.module_box > div > .label { max-width:18%; overflow:hidden; text-overflow:ellipsis; }
.module_box > div > div:not(:first-child) { position:absolute; bottom: 10px; width: 100%; }
.module_installed { float: right; color:darkgrey !important; font-size: 12px; margin-right: 10px; }
.module_delete { float: right; z-index: 100; position:relative; }
.module_title { padding:0 5px; font-size: 16px; margin: 15px 0 10px 0; color: var(--dkf-gray-700); width:80%; }
.module_resume { padding:0 5px; font-size: 13px; line-height: 1.5; color: darkgrey; margin-bottom: 20px; }
.img_inside { width: 100%; /*height: 200px;*/  }
.category_label{float: right;padding: 1px 5px;font-size: 13px;background-color: whitesmoke;border-radius: 2px;}
.equal-height-freemiumModules .hover_freemium { transition: 0.5s ease; opacity: 0; position: absolute; background-color: rgba(222, 222, 222, 0.8); width: calc(100% - 30px);top: 0;border-radius: 5px;left: 0;text-align: center; margin: 15px; }
.equal-height-freemiumModules .hover_freemium:hover {opacity: 1;}
.hover_freemium_label{position: absolute;width: 33%;top: 45%;left: 33%;background-color: gainsboro;color: royalblue;padding: 7px;text-align: center;}
.hover_freemium button { position:absolute; top:50%; left: 50%; transform: translateY(-50%) translateX(-50%); }
.img_inside_description { border:none; border-radius:10px; }
.freemiumProcessModal .modal-body { border:none; border-radius:10px; }
.freemiumCategories { margin-bottom: 20px; }

.freemiumModules .img_inside { background-size:contain; background-repeat: no-repeat; border-radius: 5px; }
.freemiumFilters { position:relative; }
.freemiumFilters > div { position:absolute; width: calc(100% - 30px); height: 100%; top:0; }
.panel-external-layout { color:var(--dkf-gray-900)!important; float:right; margin-top: -3px; font-size: 11px!important; }
.panel-external-layout * { color:var(--dkf-gray-900)!important; }
.appStoreTitle h3 { margin: 12px 20px 12px 0 !important; }
.appStoreTitle .input-group-text:first-child { width:10%!important; min-width: 100px; }
.appStoreTitle .input-group-text select { background:transparent; border:none; padding: 2px; }
.appStoreTitle .titleAndBox { width: calc(100% - 200px); }
.appStoreTitle .toolbar { float:right; width: 200px; margin-top: 12px; }
/* Search bar */
.dkf-search-wrapper {
	max-width: 480px;
	margin: 0 auto 16px auto;
}
.dkf-search-wrapper .form-control {
	border-radius: 10px;
	padding: 10px 16px 10px 40px !important;
	border: 1px solid var(--dkf-border-light);
	font-size: 14px;
	background-color: var(--dkf-bg-section);
	transition: border-color 0.2s, background-color 0.2s;
}
.dkf-search-wrapper .form-control:focus {
	background-color: var(--dkf-white);
	border-color: #4facfe;
	box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
}
.dkf-search-wrapper .input-group-text {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--dkf-gray-500);
	z-index: 4;
	padding: 0;
	font-size: 15px;
}

/* Category pills */
.dkf-categories {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 20px;
}
/* Toolbar de la tienda de modulos (moduleFreemium/view.jsp): buscador con
   icono dentro del input, contador como chip y orden a la derecha, todo a la
   misma altura de 38px. */
.dkf-modulestore-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.dkf-modulestore-toolbar .dkf-search-wrapper { flex: 0 1 380px; min-width: 220px; }
.dkf-modulestore-toolbar .dkf-search-wrapper > div { position: relative; }
.dkf-modulestore-toolbar .input-group-text { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 0; color: var(--dkf-slate-400); font-size: 14px; line-height: 1; }
/* !important: gana a la altura/padding que fija el barrido global de .form-control del tema */
.dkf-modulestore-toolbar .form-control { height: 38px !important; padding: 6px 14px 6px 36px !important; font-size: 14px; border-radius: 8px; background-color: var(--dkf-surface-muted); border: 1px solid var(--dkf-border-soft); box-shadow: none; }
.dkf-modulestore-toolbar .form-control:focus { background-color: var(--dkf-white); border-color: var(--dkf-primary); box-shadow: var(--dkf-focus-ring); }
.dkf-modulestore-toolbar .dkf-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--dkf-slate-400); cursor: pointer; padding: 4px; }
.dkf-modulestore-toolbar .dkf-search-clear:hover { color: var(--dkf-slate-900); }
.dkf-modulestore-toolbar .dkf-results-count { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; font-size: 12.5px; font-weight: 500; color: var(--dkf-slate-550); background: var(--dkf-slate-200); border-radius: 999px; white-space: nowrap; }
.dkf-modulestore-toolbar .dkf-results-count:empty { display: none; }
.dkf-modulestore-toolbar .dkf-sort-wrapper { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
/* !important: misma razon que el .form-control de arriba */
.dkf-modulestore-toolbar .dkf-sort-wrapper select { height: 38px !important; width: auto; min-width: 180px; font-size: 14px; border-radius: 8px; border: 1px solid var(--dkf-border-soft); background-color: var(--dkf-white); padding: 6px 32px 6px 12px; box-shadow: none; }
.dkf-modulestore-toolbar .dkf-sort-wrapper select:focus { border-color: var(--dkf-primary); box-shadow: var(--dkf-focus-ring); }
.dkf-modulestore-toolbar .dkf-sort-label { font-size: 12.5px; color: var(--dkf-slate-500); font-weight: 500; white-space: nowrap; }
/* Select con icono delante (idioma / orden): mismo patron que el buscador (icono
   absoluto dentro del control, decorativo). Gana al padding del select de arriba
   por especificidad, sin !important. */
.dkf-modulestore-toolbar .dkf-select-icon { position: relative; display: inline-flex; align-items: center; }
.dkf-modulestore-toolbar .dkf-select-icon > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--dkf-slate-400); font-size: 14px; line-height: 1; transition: color 0.2s ease; }
.dkf-modulestore-toolbar .dkf-sort-wrapper .dkf-select-icon select { padding-left: 34px; min-width: 170px; }
.dkf-modulestore-toolbar .dkf-select-icon:focus-within > i,
.dkf-modulestore-toolbar .dkf-select-icon:hover > i { color: var(--dkf-primary); }
@media (max-width: 640px) {
	.dkf-modulestore-toolbar .dkf-sort-wrapper { margin-left: 0; }
	.dkf-modulestore-toolbar .dkf-search-wrapper { flex: 1 1 100%; }
}
.dkf-categories.freemiumCategories { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.freemiumModules .dkf-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.freemiumModules .dkf-card-actions { display: flex; gap: 6px; }
.freemiumModules .dkf-card[role="button"] { cursor: pointer; }
.freemiumModules .dkf-card[role="button"]:focus-visible { outline: 3px solid rgba(30, 55, 153, 0.35); outline-offset: 2px; }
/* Modal de detalle del modulo */
.dkf-modal-preview { margin: 10px 0; text-align: center; }
.dkf-modal-preview img { max-width: 100%; border: 1px solid var(--dkf-gray-300); border-radius: 8px; box-shadow: var(--dkf-shadow-stat); }
.dkf-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.dkf-modal-head-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--dkf-white); flex-shrink: 0; }
.dkf-modal-head-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--dkf-slate-500); font-weight: 500; }
.dkf-modal-desc { color: var(--dkf-slate-550); line-height: 1.6; font-size: 14px; }
.dkf-modal-times { font-size: 12px; color: var(--dkf-slate-400); }
/* Estado vacio del listado */
.dkf-modules-empty { text-align: center; padding: 56px 16px; color: var(--dkf-slate-500); background: var(--dkf-surface-muted); border-radius: 12px; margin-top: 12px; }
.dkf-modules-empty .dkf-empty-icon { font-size: 32px; color: var(--dkf-gray-300); margin-bottom: 12px; }
.dkf-modules-empty .dkf-empty-msg { font-size: 0.95rem; }

.dkf-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	border-radius: 20px;
	border: 1px solid var(--dkf-border-light);
	background: var(--dkf-white);
	color: var(--dkf-gray-700);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.dkf-cat-pill:hover {
	border-color: var(--dkf-primary-light);
	background: var(--dkf-primary-tint);
	color: var(--dkf-primary);
}
.dkf-cat-pill.active {
	background: var(--dkf-primary);
	color: var(--dkf-white);
	border-color: var(--dkf-primary);
}
.dkf-cat-pill .cat-icon {
	font-size: 13px;
	color: var(--dkf-slate-400);
	transition: color 0.2s ease;
}
.dkf-cat-pill:hover .cat-icon,
.dkf-cat-pill.active .cat-icon {
	color: inherit;
}
/* Numero de modulos de la categoria: chip discreto que se invierte en la
   pildora activa (fondo blanco, texto primario) para seguir siendo legible. */
.dkf-cat-pill .dkf-cat-count {
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--dkf-slate-200);
	color: var(--dkf-slate-550);
}
.dkf-cat-pill.active .dkf-cat-count {
	background: var(--dkf-white);
	color: var(--dkf-primary);
}

/* Module card — resting/hover siguen el lenguaje de la web publica
   (tarjeta blanca radius 12, sombra con tinte de marca, lift en hover).
   El hover vive AQUI: .dkf-card ya no cuelga de la regla del menu
   lateral (linea ~1190), que lavaba toda la tarjeta de azul. */
.dkf-card {
	background: var(--dkf-white);
	border: 1px solid var(--dkf-bg-hover);
	border-radius: 12px;
	padding: 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
	position: relative;
	overflow: hidden;
}
.dkf-card:hover {
	transform: translateY(-2px);
	border-color: var(--dkf-primary-light);
	box-shadow: 0 12px 28px -12px rgba(30, 55, 153, 0.28), 0 4px 10px rgba(15, 23, 42, 0.05);
}

/* Icon area */
.dkf-card-icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--dkf-white);
	flex-shrink: 0;
}

/* Header: icon + title */
.dkf-card-header {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 12px;
}
.dkf-card-header-text {
	flex: 1;
	min-width: 0;
}
.dkf-card-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--dkf-slate-900);
	margin: 0 0 4px 0;
	line-height: 1.25;
	letter-spacing: -0.1px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dkf-card-category {
	font-size: 10.5px;
	font-weight: 500;
	color: var(--dkf-slate-500);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.dkf-card-version {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	background: var(--dkf-primary-tint);
	color: var(--dkf-primary);
	border-radius: 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.dkf-card-lang {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 6px;
	background: var(--dkf-slate-200);
	color: var(--dkf-slate-600);
	border-radius: 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}
.dkf-modal-changelog {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--dkf-gray-100);
}
.dkf-modal-changelog-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--dkf-gray-900);
	margin: 0 0 8px;
}
.dkf-changelog-entry {
	margin-bottom: 10px;
}
.dkf-changelog-version {
	display: inline-block;
	padding: 1px 6px;
	background: var(--dkf-primary-tint);
	color: var(--dkf-primary-light);
	border-radius: 8px;
	font-size: 11px;
	font-weight: 600;
	margin-bottom: 4px;
}
.dkf-changelog-text {
	margin: 0;
	padding: 6px 10px;
	background: var(--dkf-bg-section);
	border-radius: 6px;
	font-size: 12px;
	font-family: inherit;
	color: #495057;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Description */
.dkf-card-desc {
	font-size: 13px;
	color: var(--dkf-gray-700);
	line-height: 1.55;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 16px;
}

/* Footer */
.dkf-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--dkf-gray-50);
}
.dkf-card-footer .btn {
	font-size: 12.5px;
	font-weight: 500;
	border-radius: 8px;
	padding: 5px 12px;
}
/* CTAs de la tarjeta. El JS emite btn-primary (Instalar) y btn-light
   (Ir al modulo); la regla global de .btn-primary (linea ~5030) fuerza
   --dkf-primary-dark con !important, asi que aqui se re-ancla al azul
   de marca (--dkf-primary, el mismo que los CTA de la web publica)
   tambien con !important y mayor especificidad. */
.freemiumModules .btn-primary {
	background-color: var(--dkf-primary) !important;
	border-color: var(--dkf-primary) !important;
	font-weight: 600;
}
.freemiumModules .btn-primary:hover,
.freemiumModules .btn-primary:focus-visible {
	background-color: var(--dkf-primary-hover) !important;
	border-color: var(--dkf-primary-hover) !important;
}
.freemiumModules .btn-light {
	background: var(--dkf-primary-tint) !important;
	color: var(--dkf-primary) !important;
	border: 1px solid transparent !important;
	font-weight: 600;
}
.freemiumModules .btn-light:hover,
.freemiumModules .btn-light:focus-visible {
	background: var(--dkf-indigo-tint) !important;
	color: var(--dkf-primary) !important;
}
/* Lift the title so it becomes the dominant element of the card. */
.dkf-card:hover .dkf-card-title { color: var(--dkf-primary); }
.dkf-card-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--dkf-gray-500);
}
.dkf-card-meta i {
	margin-right: 3px;
}

/* Installed badge */
.dkf-badge-installed {
	font-size: 11px;
	font-weight: 500;
	color: #0d9488;
	background: var(--dkf-modern-done-bg); /* unificacion sep-2026: era #f0fdfa (dE 3.0) */
	border: 1px solid var(--dkf-teal-tint);
	padding: 2px 10px;
	border-radius: 20px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.dkf-badge-installed i {
	font-size: 10px;
}

/* Remove link */
.dkf-card .dkf-card-remove {
	position: absolute;
	top: 10px;
	right: 10px;
	color: var(--dkf-border);
	font-size: 14px;
	opacity: 0;
	transition: opacity 0.2s, color 0.2s;
	cursor: pointer;
	z-index: 2;
}
.dkf-card:hover .dkf-card-remove {
	opacity: 1;
}
.dkf-card .dkf-card-remove:hover {
	color: var(--dkf-red-alert);
}

/* Icon color palette */
.dkf-icon-0 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.dkf-icon-1 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.dkf-icon-2 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.dkf-icon-3 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.dkf-icon-4 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.dkf-icon-5 { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
.dkf-icon-6 { background: linear-gradient(135deg, var(--dkf-warning-hover) 0%, #d57eeb 100%); }
.dkf-icon-7 { background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%); }

.conditions-group { margin-left: -12px; padding-left: 15px; }
.conditions-group-header { margin-left: -5px; padding-top:13px; margin-bottom:10px; }
.conditions-group-header .btn { padding: 6px 12px; }
.col-no-set-value > .conditions-group > .conditions-group-header { padding-top:0; }
.conditions-group > .conditions-group-data { padding-left: 20px; }
.conditions-group-data { padding-left: 20px; position:relative; }
.conditions-group-data > .conditions-group { padding-left: 20px; position:relative; }
.conditions-group-data > .conditions-group:before { content: "—"; position:absolute; left:-1px; top:calc(50% - 1px); }
.conditions-group-data > div { border-left: 1px dashed; }
.conditions-group-data > div:last-child { border-bottom-left-radius: 8px; }
.conditions-group-data > .condition-ors > div:first-child:before { content: "—"; position:absolute; left:-1px; top:10px; }
.conditions-nexus-wrapper { margin-bottom:12px; }

/* Scheduler (Lanzadera) */
.schedulerDateInactive { background: var(--dkf-red-soft)!important; }

/* Dynamic Layouts */
[data-multi-values-name="dynamicDesignForm"] .multi-form { border: 1px solid; padding: 20px; border-radius: 10px; margin-bottom: 20px; }
[data-multi-values-name="dynamicDesignForm"] .multi-buttons { margin-top:26px; }

/* Block page */
#block_page_bg { top:0; left:0; z-index:var(--dkf-z-blockpage); background-color:rgba(15, 19, 35, 0.55); width:100%; height:100%; position:fixed; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: bp-fade-in .18s ease-out; }
#block_page_layer { z-index:calc(var(--dkf-z-blockpage) + 1); width:100%; height:100%; position:fixed; top:0; left:0; display:flex; align-items:center; justify-content:center; padding:24px; pointer-events:none; }
#block_page_content { pointer-events:auto; max-width:100%; animation: bp-pop-in .22s cubic-bezier(.2,.9,.32,1.2); }
#block_page_body { margin:0 auto; display:block; background-color:var(--dkf-white); min-width: 320px; max-width: 420px; padding: 36px 36px 32px; border-radius:16px; position:relative; box-shadow: 0 24px 70px rgba(0,0,0,.32), 0 4px 16px rgba(0,0,0,.18); text-align:center; overflow:hidden; }
#block_page_body .dokuLoader { width: 56px; height: 56px; float:none; display: inline-block; margin:0; border-width:2px; }
#block_page_body .dokuLoader:before, #block_page_body .dokuLoader:after { border-width:2px; }
#block_page_body h1 { display:flex; align-items:center; justify-content:center; font-weight:bold; background-color:transparent; font-size:20px; line-height:20px; margin:0; position:relative; min-height:60px; }
#block_page_body h1 .dokuLoaderLetter { font-size:24px; line-height:24px; font-weight:700; }
#block_page_message { width: 100%; max-width: none; font-size:13px; background-color:transparent; color:var(--dkf-black); float: none; text-align: center; margin-top:14px; }
#block_page_message h2 { font-size:20px; line-height:1.3; margin: 6px 0 4px!important; font-weight:600; color:var(--dkf-slate-900); letter-spacing:-.01em; }
#block_page_message p { font-size:14px; margin: 0 0 4px; line-height:1.45; } /* el color lo fija la regla global de textos secundarios (gray-650 con !important, mas abajo); el que habia aqui era codigo muerto */
#block_page_body .fa-spinner { font-size:33px; margin-bottom:10px; }
#block_page_wrapper { position:relative; }
#block_page_border { position:absolute; left:0; right:0; bottom:0; margin:0; border-radius: 0; height: 4px!important; min-height: 4px; background: rgba(30,55,153,.10); width:auto; overflow: hidden; }
#block_page_border > div { width: 100%; animation-duration: 1s!important; }
#block_close_button { position:absolute; top: 12px; right: 12px; line-height:1; z-index:2; opacity:.55; transition: opacity .15s ease, transform .15s ease; }
#block_close_button:hover { opacity:1; transform: scale(1.05); }
#block_page_body .dots { margin-top: 14px; }
#block_page_body .dots span { background: var(--dkf-primary-light, #2196f3); width:6px; height:6px; margin: 0 3px; }

@keyframes bp-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes bp-pop-in { from { opacity:0; transform: translateY(8px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
	#block_page_bg, #block_page_content { animation: none; }
	#block_page_body .dokuLoader, #block_page_body .dokuLoader:before, #block_page_body .dokuLoader:after { animation-duration: 6s; }
	#block_page_body .dots span { animation: none; opacity: .7; }
	#block_page_border .progress-bar-animated { animation: none; }
}

/* JSON Viewer */
/* Visor JSON nativo (Dokuflex.renderJsonViewer). Sustituye a las reglas
   .json-document / ul.json-dict / a.json-toggle de jquery.json-viewer 1.4.0,
   que quedaron huerfanas al borrar la libreria (auditoria js-libs, 70b74f64). */
.dkf-json { font-family: var(--bs-font-monospace, monospace); font-size: .85rem; line-height: 1.5; white-space: normal; }
.dkf-json details > summary { cursor: pointer; color: var(--dkf-slate-500); }
.dkf-json .dkf-json-branch { margin-left: 16px; border-left: 1px solid var(--dkf-gray-150); padding-left: 8px; }
.dkf-json .dkf-json-key { color: var(--dkf-slate-700); font-weight: 600; }
.dkf-json .dkf-json-string { color: var(--dkf-green-strong); }
.dkf-json .dkf-json-literal { color: var(--dkf-primary); }
.dkf-json .dkf-json-empty { color: var(--dkf-slate-400); font-style: italic; }
/* clear: el visor no debe compartir linea con ningun float del modal (ver abajo). */
#processJsonDataRender { clear: both; }
/* El textarea solo existe para que funcione document.execCommand('copy'), por eso
   es invisible. Iba con float:left y, como .form-control mide el 100%, el float
   ocupaba TODO el ancho de la linea; el <pre> del visor crea un contexto de
   formato de bloque (pre{overflow:auto} de Bootstrap) y un BFC no puede solaparse
   con un float, asi que se quedaba en 0px de ancho: el modal salia vacio.
   Fuera de flujo (position:absolute) no estorba y el copiar sigue funcionando. */
#processJsonDataValue { opacity:0!important; height:0!important; padding:0!important; margin:0!important; position:absolute; }

/* Tareas */
.row.rownormal { margin-left:0!important; margin-right:0!important; }
hr.dotted { margin-top:5px; margin-bottom:5px; }

/* Firmas */
.signitem { margin-top:10px; }
.signitem .user { margin-right:10px; float:left; width: 36px; position:relative; display:block; }

/* OCR */
.list-rounded { margin:5px 0; }
.list-rounded .active { background-color:var(--dkf-bg-highlight)!important; }
.list-rounded li { float:left; list-style-type:none; margin: 7px 2px; }
.list-rounded li a { padding:3px 5px; border:1px solid; border-radius:5px; }
.ocrLabel { cursor:pointer; }
.position-sticky { position:sticky; top:10px; }

/* Signature OTP */
.signOtpLayer { width:100%; max-width:800px; position:absolute; bottom:0; right:0; }
.signOtpLayer button, .signOtpLayer .signature_all { width:100%; }
.signOtpLayer .jSignature { border:3px solid!important; }
.signOtpLayer .signature_layer { background-color:var(--dkf-white); }
.form-readonly .signature_layer { display:none; }
.signature-otp-button { border-radius:0!important; }
.signature_all.readonly:not([data-formIsPreview]) { background-color:var(--dkf-gray-100); }
.signature_all.readonly[data-formIsPreview] { background-color:inherit; }
.signature_all.readonly .panel-body:not([data-formIsPreview]) { min-height:330px; }

/* ****************************** */
/* ****** Workflow History ****** */
/* ****************************** */
/* Timeline cronologico de una sola columna (linea a la izquierda, tarjetas a la derecha).
   Solo lo usa portlets/workflow/history.jsp; el breadcrumb .workflowTimeline tiene sus propias reglas. */
.timeline {
	list-style: none;
	padding: 14px 0;
	margin: 0;
	position: relative;
}

	.timeline:before {
		top: 10px;
		bottom: 10px;
		position: absolute;
		content: " ";
		width: 2px;
		background-color: var(--dkf-slate-200);
		left: 19px;
	}

	.timeline > li {
		position: relative;
		margin: 0 0 14px;
		padding-left: 56px;
		min-height: 40px;
	}

		.timeline > li:last-child {
			margin-bottom: 0;
		}

		.timeline > li > .timeline-badge {
			color: var(--dkf-white);
			width: 40px;
			height: 40px;
			line-height: 40px;
			font-size: 1.15em;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			background-color: var(--dkf-slate-500);
			z-index: 2;
			border-radius: var(--dkf-radius-round);
			box-shadow: 0 0 0 4px var(--dkf-white);
		}

		.timeline > li > .timeline-panel {
			position: relative;
			background-color: var(--dkf-white);
			border: 1px solid var(--dkf-border-light);
			border-left-width: 3px;
			border-left-color: var(--dkf-slate-400);
			border-radius: var(--dkf-radius);
			box-shadow: var(--dkf-shadow-panel);
			padding: 12px 16px;
		}

		/* inicio y fin del workflow: mismos colores que los nodos start/end del disenador */
		.timeline > li > .timeline-badge.start { background-color: var(--dkf-bs-success-dark); }
		.timeline > li > .timeline-badge.end { background-color: var(--dkf-wf-end); }

		/* acento izquierdo de la tarjeta segun el color del hito (el badge precede al panel en el DOM) */
		.timeline > li > .timeline-badge.success + .timeline-panel { border-left-color: var(--dkf-bs-success); }
		.timeline > li > .timeline-badge.danger + .timeline-panel { border-left-color: var(--dkf-danger-dark); }
		.timeline > li > .timeline-badge.warning + .timeline-panel { border-left-color: var(--dkf-accent); }
		.timeline > li > .timeline-badge.info + .timeline-panel { border-left-color: var(--dkf-info-soft); }
		.timeline > li > .timeline-badge.primary + .timeline-panel { border-left-color: var(--dkf-primary); }
		.timeline > li > .timeline-badge.start + .timeline-panel { border-left-color: var(--dkf-bs-success-dark); }

		/* ultimo movimiento: el chip de fecha pasa a solido para que se vea donde esta el flujo */
		.timeline > li:last-child > .timeline-panel .workflow_message_time_head { background-color: var(--dkf-primary); color: var(--dkf-white); }

		/* fin del workflow: tarjeta bien marcada, sin dudas de que esta terminado */
		.timeline > li > .timeline-badge.end + .timeline-panel { border-left-color: var(--dkf-wf-end); background-color: var(--dkf-bg-section); }
		.timeline > li > .timeline-badge.end + .timeline-panel .timeline-title { color: var(--dkf-slate-900); text-transform: uppercase; letter-spacing: 0.03em; }
		.timeline > li > .timeline-badge.end + .timeline-panel .workflow_message_time_head { background-color: var(--dkf-wf-end); color: var(--dkf-white); }

		.timeline > li > .timeline-panel.timeline-panel-danger {
			background-color: var(--dkf-alert-danger-bg);
			border-color: var(--dkf-alert-danger-border);
			border-left-color: var(--dkf-danger-dark);
			color: var(--dkf-danger-text);
		}

.timeline-badge.primary {
	background-color: #2e6da4 !important;
}

.timeline-badge.success {
	background-color: var(--dkf-bs-success-dark) !important;
}

.timeline-badge.warning {
	background-color: #f0ad4e !important;
}

.timeline-badge.danger {
	background-color: var(--dkf-danger-dark) !important;
}

.timeline-badge.info {
	background-color: var(--dkf-info-soft) !important;
}

.timeline-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

	.timeline-heading p {
		margin: 0;
	}

.timeline-title {
	margin: 0;
	color: var(--dkf-slate-800);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.timeline-body > p,
.timeline-body > ul {
	margin-bottom: 0;
}

	.timeline-body > p + p {
		margin-top: 5px;
	}
	.timeline-body > ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.timeline-body > ul:empty {
		display: none;
	}
	.timeline-body > ul > li {
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px dashed var(--dkf-border-light);
		line-height: 19px;
		word-break: break-word;
		color: var(--dkf-slate-600);
	}
	.timeline-body > ul > li:first-child {
		margin-top: 6px;
		padding-top: 0;
		border-top: none;
	}
	.timeline-body > ul > li:empty {
		display: none;
	}
	.timeline-body > ul > li > span:first-child {
		display: inline-block;
		min-width: 18px;
		text-align: center;
		margin-right: 4px;
		color: var(--dkf-slate-500);
	}
	/* iconos de resultado con color semantico */
	.timeline-body > ul > li > span.fa-circle-check:first-child { color: var(--dkf-bs-success-dark); }
	.timeline-body > ul > li > span.fa-circle-xmark:first-child,
	.timeline-body > ul > li > span.fa-ban:first-child { color: var(--dkf-danger-dark); }
	.timeline-panel-danger .timeline-body > ul > li,
	.timeline-panel-danger .timeline-body > ul > li > span:first-child {
		color: inherit;
	}

@media (max-width: 767px) {
	ul.timeline:before {
		left: 16px;
	}

	ul.timeline > li {
		padding-left: 46px;
	}

	ul.timeline > li > .timeline-badge {
		width: 34px;
		height: 34px;
		line-height: 34px;
		font-size: 1em;
	}
}

/* Offset RIGHT */
.col-offset-right-12 {
	margin-right: 100%;
}
.col-offset-right-11 {
	margin-right: 91.66666667%;
}
.col-offset-right-10 {
	margin-right: 83.33333333%;
}
.col-offset-right-9 {
	margin-right: 75%;
}
.col-offset-right-8 {
	margin-right: 66.66666667%;
}
.col-offset-right-7 {
	margin-right: 58.33333333%;
}
.col-offset-right-6 {
	margin-right: 50%;
}
.col-offset-right-5 {
	margin-right: 41.66666667%;
}
.col-offset-right-4 {
	margin-right: 33.33333333%;
}
.col-offset-right-3 {
	margin-right: 25%;
}
.col-offset-right-2 {
	margin-right: 16.66666667%;
}
.col-offset-right-1 {
	margin-right: 8.33333333%;
}
.col-offset-right-0 {
	margin-right: 0;
}
@media (min-width: 768px) {
	.col-sm-offset-right-12 {
		margin-right: 100%;
	}
	.col-sm-offset-right-11 {
		margin-right: 91.66666667%;
	}
	.col-sm-offset-right-10 {
		margin-right: 83.33333333%;
	}
	.col-sm-offset-right-9 {
		margin-right: 75%;
	}
	.col-sm-offset-right-8 {
		margin-right: 66.66666667%;
	}
	.col-sm-offset-right-7 {
		margin-right: 58.33333333%;
	}
	.col-sm-offset-right-6 {
		margin-right: 50%;
	}
	.col-sm-offset-right-5 {
		margin-right: 41.66666667%;
	}
	.col-sm-offset-right-4 {
		margin-right: 33.33333333%;
	}
	.col-sm-offset-right-3 {
		margin-right: 25%;
	}
	.col-sm-offset-right-2 {
		margin-right: 16.66666667%;
	}
	.col-sm-offset-right-1 {
		margin-right: 8.33333333%;
	}
	.col-sm-offset-right-0 {
		margin-right: 0;
	}
}
@media (min-width: 992px) {
	.col-md-offset-right-12 {
		margin-right: 100%;
	}
	.col-md-offset-right-11 {
		margin-right: 91.66666667%;
	}
	.col-md-offset-right-10 {
		margin-right: 83.33333333%;
	}
	.col-md-offset-right-9 {
		margin-right: 75%;
	}
	.col-md-offset-right-8 {
		margin-right: 66.66666667%;
	}
	.col-md-offset-right-7 {
		margin-right: 58.33333333%;
	}
	.col-md-offset-right-6 {
		margin-right: 50%;
	}
	.col-md-offset-right-5 {
		margin-right: 41.66666667%;
	}
	.col-md-offset-right-4 {
		margin-right: 33.33333333%;
	}
	.col-md-offset-right-3 {
		margin-right: 25%;
	}
	.col-md-offset-right-2 {
		margin-right: 16.66666667%;
	}
	.col-md-offset-right-1 {
		margin-right: 8.33333333%;
	}
	.col-md-offset-right-0 {
		margin-right: 0;
	}
}
@media (min-width: 1200px) {
	.col-lg-offset-right-12 {
		margin-right: 100%;
	}
	.col-lg-offset-right-11 {
		margin-right: 91.66666667%;
	}
	.col-lg-offset-right-10 {
		margin-right: 83.33333333%;
	}
	.col-lg-offset-right-9 {
		margin-right: 75%;
	}
	.col-lg-offset-right-8 {
		margin-right: 66.66666667%;
	}
	.col-lg-offset-right-7 {
		margin-right: 58.33333333%;
	}
	.col-lg-offset-right-6 {
		margin-right: 50%;
	}
	.col-lg-offset-right-5 {
		margin-right: 41.66666667%;
	}
	.col-lg-offset-right-4 {
		margin-right: 33.33333333%;
	}
	.col-lg-offset-right-3 {
		margin-right: 25%;
	}
	.col-lg-offset-right-2 {
		margin-right: 16.66666667%;
	}
	.col-lg-offset-right-1 {
		margin-right: 8.33333333%;
	}
	.col-lg-offset-right-0 {
		margin-right: 0;
	}
}

/* ******************** */
/* ****** Footer ****** */
/* ******************** */
footer { position:fixed; z-index:1061; /*width:calc(100% - 36px); left:36px;*/ width:100%; left:0; bottom:0; background-color:var(--dkf-white); border-top:1px solid var(--dkf-border); padding:0;}
footer .row { margin-right:0; margin-left:0; }
.brandCorp img { width:100%; max-width:100px; margin-top:5px; }
footer ul { float:left; padding:10px 0; }
footer ul li { float:left; margin:4px 10px 0; }
footer ul li a { font-size:12px; color:var(--dkf-black)!important; text-transform: uppercase; text-decoration:none!important; }
footer h2 { float:right; font-size:14px; margin:0; padding-top:7px; }
footer h2 span { top:2px!important; }

.linkable { display:none; }
.alert-info:not(.alert-blue){background-color:var(--dkf-white)!important; border-color:transparent;}
.alert-info:not(.alert-blue) hr{border-top-color:var(--dkf-gray-200)!important;}

/* ******************** */
/* ****** Labels ****** */
/* ******************** */
.label { font-weight:normal; border-radius: 5px; padding: 5px 8px!important; font-size:75%; }
.label-success { background-color:var(--dkf-teal-tint); color:#56a48d }
.label-primary { background-color: var(--dkf-blue-pale); color:var(--dkf-link) }
.label-warning { background-color: var(--dkf-alert-warning-border); color:#f0ad4e }
.label-dark { background-color:var(--dkf-gray-300); color:var(--dkf-black) }
.label-white { background-color:var(--dkf-white); color:var(--dkf-black) }
.label-default { background-color: var(--dkf-gray-100); color:var(--dkf-gray-650) }
.label-danger { background-color: #e3bebd; color:var(--dkf-danger-dark) }
td .label { border:1px solid; }
.label-xs { padding:3px 4px!important; font-size: 12px; }

/* Escala de recencia de fechas (Dokuflex.getFriendlyDate en dokuflex.js:
   fresco=color vivo -> rancio=apagado). Las utilidades .bg-* de Bootstrap
   fuerzan colores crudos, y bg-warning ademas texto blanco sobre amarillo
   (ilegible). Se retintan a la paleta --dkf-* conservando el gradiente; el
   flag por regla es obligado para ganar a esas utilidades .bg-* (ver abajo). */
.label.badge.bg-success { background-color:var(--dkf-success)!important; color:var(--dkf-white)!important; } /* gana a BS .bg-* !important */
.label.badge.bg-primary { background-color:var(--dkf-primary)!important; color:var(--dkf-white)!important; } /* gana a BS .bg-* !important */
.label.badge.bg-info    { background-color:var(--dkf-info-alt)!important; color:var(--dkf-white)!important; } /* gana a BS .bg-* !important */
.label.badge.bg-warning { background-color:var(--dkf-warning)!important; color:var(--dkf-gray-900)!important; } /* gana a BS .bg-* !important */
.label.badge.bg-light   { background-color:var(--dkf-gray-100)!important; color:var(--dkf-gray-700)!important; } /* gana a BS .bg-* !important */
.label.badge.bg-dark    { background-color:var(--dkf-slate-500)!important; color:var(--dkf-white)!important; } /* gana a BS .bg-* !important */
.label.badge.bg-danger  { background-color:var(--dkf-danger-dark)!important; color:var(--dkf-white)!important; } /* gana a BS .bg-* !important */
.label.badge { border-color:transparent; font-weight:500; }

/* ************************** */
/* ****** Media querys ****** */
/* ************************** */
@media (max-width: 991px) {
	.appDatainfoButton { display:none; }
	.infoPanelHidden { display:block!important; padding:0!important; margin-top:10px; }
}
@media (max-width: 992px) {
	.container-login > .row > div:last-child { border-radius:9px!important; }
}
@media (max-width: 767px) {
	#comunity-menu { min-width:0; }
	.nav-user { padding-left:0; float:right!important; }
	#comunity-name { margin-right:0; }
	.nav>li { float:left; }
	.navbar-nav { margin: 0; }
	.nav-user .dropdown-menu { right:0; left:auto; }
	.navbar-nav .open .dropdown-menu { border: 1px solid rgba(0,0,0,.15); background-color:var(--dkf-white); position:absolute; box-shadow:0 6px 12px rgba(0,0,0,.175); }
	.navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a { padding:3px 10px; }

	.nav-user { border-left:none!important; }

	#header-upper-bar { width:100%!important; }
	#comunityMenu { width:auto; }
	#organizationMenu { width:auto; }
	#comunity-name { width:auto!important; }

	.modal-body .table-responsive { margin: 0!important; }
	.checkDataInTable, #modalRelationTable tbody td { width:100%!important; }
	.checkDataInTable .checkbox { top:3px!important; right:22px!important; position:absolute!important; }

	#menu-horizontal { top: 50px; }
	#cuerpo_principal.menu-top { margin-top: 50px!important; }

}
@media (max-width: 510px) {
	.signature_image { width:100%; }
	table { margin-top:0!important; }
	#appBuildersideBarLeft .popover { max-width:100%!important; }
	.modal { max-width:100%; margin:0 auto; }

	.wfButtonsCss .btn-group { display:block; }
	.wfButtonsCss .btn-group .btn { width:100%; border-radius:4px!important; margin-bottom:3px; }

	.grid-main-filters > div { margin-bottom:10px; }

	#header { float:left; }
	#header .nav-item { float:left; }
	#header #comunity-name { margin-left: 5px; margin-right: 10px; }
	#header #comunityMenu { padding:0; }
	#header .nav-user img { width: 40px; height:40px; margin-top:1px; }
	#header-user-roles > div {
		margin-top:-2px !important;
	}
	#header .nav-user {
		width: auto!important;
		float: right!important;
		margin: 0!important;
		padding: 0!important;
		height: auto!important;
	}

	#comunityMenu > span { max-width: 140px; overflow: hidden; text-overflow:ellipsis; }
	#header-upper-bar .nav-icons > a .fas,
	#header-upper-bar .nav-icons > a .fa-solid,
	#header-upper-bar .nav-icons > a .fa-regular,
	#header-upper-bar .nav-icons > a .fa-thin,
	#header-upper-bar .nav-icons > a .fa-duotone,
	#header-upper-bar .nav-icons > a .fa-brands,
	#header-upper-bar .nav-icons > a .fal { font-size: 17px !important; }
	#header-upper-bar .nav-icons > a { padding-left: 5px!important; padding-right: 5px!important; }

	#header-upper-bar .button-signing-time { float:none; margin:-12px 0 3px 0; }

	.weekDisplay { font-size: 15px!important; }
	.nav-tabs > li { width: 100%; }

}
@media (max-width: 451px) {
	#header .hasRoles { display:none; }
}
@media (max-width: 1150px) {
	.nav-user > div:first-child { margin-right: 0!important; }
	#header-upper-bar .navbar-right { margin-right: 20px!important; }
	.nav-user #user-menu-desplegable a > .user-avatar { width: 40px!important; height: 40px!important; margin: 0; }
	#user-name { max-width: 100px; text-overflow: ellipsis; overflow: hidden; }
}

/* Visor de documentos */
@media (max-width: 1150px) {
	#header-upper-bar .navbar-right { border:none!important; margin-left:0!important; padding-left:0!important; }
	#header-upper-bar .navbar-right .nav-icons { margin:12px 0 0!important; }
	#header-searcher { width:228px!important; }
	#header-nav-searcher { width:180px!important; }
}
@media (max-width: 1304px) {
	#header-searcher { padding-left:0!important; margin-left:0!important; border-left:none!important; }
}
@media (max-width: 1700px) {
	.visorCols { width:100%!important; }
}

/* *************************** */
/* ****** VERSION 5.0.0 ****** */
/* *************************** */

/* Blanco */
.navbar, #menu-brand, thead, .tablesorter-header, .filter-heading.focused .highlight { background-color: var(--dkf-white) !important; }
.fieldActionsWrapper > .btn-group > a:not(.remove-app-data), .fieldActionsWrapper > a:not(.remove-app-data), .fieldActionsWrapper > a:hover, .fieldActionsWrapper .big-action, .process_box.process_text_white .widget-description * { color:var(--dkf-white)!important; }

/* Negro */
#header-upper-menu a, #comunityMenu, #organizationMenu, .nav-user a,
.sidebar-nav li.active a > span:last-child,
.sidebar-nav > li:not(:first-child):not(.nav-header):not(#menu-brand):not(.noHover):hover a > span:last-child,
.menu-collapsed-hover a > span:last-child, #header-upper-bar h2, #header-nav-searcher,
thead .form-control, thead .fa, thead .fal, thead .fas, thead label, .filter-heading .btn,
.filter-heading .btn span, .filter-heading label, thead th label, thead th, .table-filters-checkbox ul li a { color:var(--dkf-black)!important; }
thead:not(.controlTimeQuadrant):not(.controlTimeReport) .input-group .form-control, thead:not(.controlTimeQuadrant):not(.controlTimeReport) .input-group-text, .filter-heading .dateRange:first-child { border-color:var(--dkf-black); }

/* Gris barra de scroll tablas */

/* Gris iconos cabecera */
.nav-icons > a .fas,
.nav-icons > a .fal,
.nav-icons > a .fa-thin,
.nav-icons > a .fa-duotone,
.nav-icons > a .fa-solid,
.nav-icons > a .fa-brands,
#comunity-name label, .file-icon { color:var(--dkf-gray-700)!important; }
/* Hover affordance for the top header icons — colour shift to primary
   (no background, per the .nav-icons:hover{background:none} decision).
   See docs/ux/dropdown-menu-bestpractices.md §"Menú superior". */
.nav-icons > a .fas, .nav-icons > a .fal, .nav-icons > a .fa-thin,
.nav-icons > a .fa-duotone, .nav-icons > a .fa-solid, .nav-icons > a .fa-regular,
.nav-icons > a .fa-brands { transition:color var(--dkf-transition-fast); }
.nav-icons > a:hover .fas, .nav-icons > a:hover .fal, .nav-icons > a:hover .fa-thin,
.nav-icons > a:hover .fa-duotone, .nav-icons > a:hover .fa-solid, .nav-icons > a:hover .fa-regular,
.nav-icons > a:hover .fa-brands { color:var(--dkf-primary)!important; }

/* ===== Navbar superior — pulido moderno + a11y (06/2026) =====
   Markup: WebContent/html/app/jsp/themes/dokuflex/main.jsp (<nav class="navbar fixed">).
   Mantiene la decisión documentada de "solo cambio de color en hover, sin
   fondo" (docs/ux/dropdown-menu-bestpractices.md §"Menú superior"); aquí solo
   se añade: sticky con sombra sutil, foco visible por teclado, estado activo
   del icono cuyo dropdown está abierto y alineación uniforme de los glifos. */
#header-upper-bar .nav-icons > a [class*="fa-"] { vertical-align:middle; }
/* Foco visible para navegación por teclado (a11y) */
#header-upper-bar .nav-icons > a:focus-visible,
#toggleMenuHandler:focus-visible,
#header-searcher-icon:focus-visible,
#comunityMenu:focus-visible,
#dropDownAlerts:focus-visible {
	outline:2px solid var(--dkf-primary);
	outline-offset:2px;
	border-radius:var(--dkf-radius-sm);
}
/* Icono en color primario mientras su dropdown está abierto (igual que el hover) */
#header-upper-bar .nav-icons.show > a [class*="fa-"],
#header-upper-bar .nav-icons > a[aria-expanded="true"] [class*="fa-"],
#dropDownAlerts[aria-expanded="true"] [class*="fa-"] { color:var(--dkf-primary)!important; }
/* Transición suave del giro/color del chevron del toggle de menú (right=plegado, left=desplegado) */
#toggleMenuHandler > span { transition:transform var(--dkf-transition-fast), color var(--dkf-transition-fast); }

/* Gris claro fondo portlets */
body, .kanban-group > div, #dokuflex-help-bar > div, .timings_list, .gridMoreMenu .menu-item a { background-color:var(--dkf-bg-header)!important; }

/* Gris deshablitado */
.community-icons * { color:var(--dkf-gray-300)!important; }
/* Pestañas inactivas: gris-700 para contraste AA (gray-300 daba 1.6:1 sobre blanco) */
.nav-tabs > li > a { color:var(--dkf-tab-color, var(--dkf-gray-700))!important; }
.page-layouts, .page-layouts * { border-color:var(--dkf-gray-300)!important; }

/* Gris suave border inputs */
.form-control:not(:focus):not(:hover), .input-group-text, .panel-default, .panel-default>.panel-heading, .nav-tabs, .table-bordered tbody, #user-show-profile-info, #user-show-organization,
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td:not(.agg), .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th, .table-bordered>tfoot,
.file_upload, .fileUploadPaste, .file_upload:not(.errorField):not(.file_upload_highlight), .select2-container--default .select2-selection--single,
.select2-container--default .select2-search--dropdown .select2-search__field, .select2-dropdown, .chosen-container-multi .chosen-choices, .predicted, .bootstrap-switch,
.card, .graph_layer, thead  .popover .input-group .form-control, thead .popover .input-group-text, .checkbox .owncheckbox, .checkbox .ownradio, #forumList .panel-heading,
.flexgrid-filter-dropdown input, #header-searcher, #header-nav-searcher, #header-upper-bar .navbar-right,
.grid-main-filters, .grid-main-filters .separador, .grid-bottom-filters .separador,
.filter-heading .input-group .form-control,
.filter-heading .input-group-text.round,
.filter-heading:not(.filter-active):not(.focused) .input-group-text:last-child,
.filter-heading:not(.filter-active):not(.focused) .input-group-text,
.suggestionsResult img, .flexgrid-filter-dropdown .form-control, .dynamicSearcher, #target .component, .file-uploaded .file-cover,
.file-uploading, .file_upload_wrapper, .lightProcessOpened, #listComments > div, .listComments > div, .chosen-container-single .chosen-single, .chosen-container .chosen-drop,
.kanban-body .panel, .progress-circle .progress-circle-disabled, .holidaysLegend, .contractPage img, .contractPage, .contractPageComponent .contractPageSign, .contractPageComponent,
.pdfviewer[data-showasimage="1"] img, .graph_new_dataset_link, .graph_dataset, .countdown, /*.flexgrid input:focus, .flexgrid textarea:focus, .flexgrid select:focus,*/ .invoiceLine input, .invoiceLine select
.flexgrid .table>tfoot>tr>td, #newLayoutWrapper img, .showHistoryLayoutAdvice, #affectedWfList li, .portlet:not(.lightProcessIcon) .title .fa:after, .portlet:not(.lightProcessIcon) .title .fal:after,
.portlet:not(.lightProcessIcon) .title, .selectFaIconSearcher, .kanban-element .panel-body > div, .designerTopButtons > div:first-child, #file_uploadJsonNewProcess .file_upload, #header #main-menu > li,
#header .haveSubMenu .submenu, .popover-content .submenu li, [data-multi-values-name="dynamicDesignForm"] .multi-form, #header-shortcuts-wrapper, .header-searcher-wrapper, .qrReader, .qrCreator, .qrCreatorResultWrapper img,
#html5-qrcode-select-camera, .grid .filters .label, [data-multi-values-name="createPersonalFieldsForm"]  > .multi-data > .multi-form:not(:first-child), .select2-container--default .select2-selection--multiple,
.employeesList ul li, .employeesList ul li > div:last-child > div, div[data-caltype="weeks"] th, div[data-caltype="weeks"] td > div, .shiftOnDaysWrapper .listShiftOnDays > ul > li, .shiftsLegend > ul > li,
.shiftOnShiftPerDay > li, .signingsPerDayHeader, .qrSigningWrapper .generatedQrCode, .controlTimeReportTable tbody tr td span, td .label, .nav-control-time .button-signing-time,
#modal-designer-conditions .col-no-set-value.conditions-with-nexus > .condition-ors, #signingReportDetail .commentsList li, .relationsDocuments ul li, .tableWeekQuadrant .day-cell,
.controlTime .quadrantWeek .moreEmployees, .processBreadcrumb .processBreadcrumbInfo, .flexgrid table tbody tr td .form-control,
.flexgrid table tbody tr td:not(:last-child), .flexgrid[data-vertical] table tbody tr td:last-child, .flexgrid table tbody tr, .wizardImportV2 ul li,
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td, .table-bordered>thead>tr>th, .table-bordered>tbody>tr, .documentVersions li:not(:last-child) { border-color: var(--dkf-border-light) !important; }
/* (la capa borde de la flecha del breadcrumb se pinta ahora via background-color
   en su bloque de componente — clip-path, no border-left) */
.filters-popup-cond, .filters-popup-cond *, .filter-heading.focused .input-group-text { color: var(--dkf-border-light) !important; }
.input-group .form-control:first-child:focus, .input-group .form-control:first-child:hover { border-right-color:var(--dkf-border-light); }

/* Gris suave deshabilitado */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control, thead.well, .like-table-header, .form-readonly .checkbox .owncheckbox, .form-readonly .checkbox .ownradio, [data-isFile="1"] .file-icon-wrapper:hover, #cardsInfoSheets .card-empty,
.processBreadcrumb.inactive .processBreadcrumbInfo, .wizardSteps li.disabled, .wizardSteps li.disabled::after { background-color:var(--dkf-bg-section)!important; }
.processBreadcrumb .processBreadcrumbInfo.cardactive { background-color: var(--dkf-bg-highlight) !important; }
.processBreadcrumb.future .processBreadcrumbInfo { background-color: var(--dkf-gray-50); }
.filters-popup .modal-body > .row > .clearfix { border-color:var(--dkf-bg-section)!important; }
.processBreadcrumb.inactive .processBreadcrumbInfo::after { background-color:var(--dkf-bg-section)!important; }
.processBreadcrumb.future:not(:last-child) .processBreadcrumbInfo:not(.processBreadcrumbCard)::after { background-color: var(--dkf-gray-50); }

thead .form-control[readonly] { background-color:transparent!important; }

/* Gris suave scrollbar menú */
#chat_channels::-webkit-scrollbar-thumb, .workflowTimeline::-webkit-scrollbar-thumb, #main-menu::-webkit-scrollbar-thumb, .lightProcessHTML > .panel > .panel-body::-webkit-scrollbar-thumb, #community_menu_search::-webkit-scrollbar-thumb, .doubleScroll-scroll-wrapper::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb, .processIndexListScrollBar::-webkit-scrollbar-thumb, .smallScroll::-webkit-scrollbar-thumb { background-color:var(--dkf-gray-150); }

/* Gris oscuro título portlet */
.portlet:not(.lightProcessIcon) .title *:not(.whiteLetter):not(button):not(label):not(button > span):not(label > span):not(.processTitleInfo):not(.portletTitleInfoIcon), .header-filter, #forumList .threadEdit a, #forumList .threadEdit a.fa-star, .separadorPag span, .separadorPag a, .separador a, .separador nav, .separador nav label, .process_box .widget-description *, .gridMoreMenu .menu-item a, #block_page_message p { color:var(--dkf-gray-650)!important; }

/* Azul oscuro barra */
body::-webkit-scrollbar, [data-lateral-opened="1"] fieldset::-webkit-scrollbar-thumb { width:7px!important; }
body::-webkit-scrollbar-thumb, [data-lateral-opened="1"] fieldset::-webkit-scrollbar-thumb { background-color:var(--dkf-gray-300)!important; }
.sidebar-nav li > a, .fa-spinner.fa-spin, .filter-heading.focused .form-control, .filter-heading .input-group .predicted,
.filter-heading .input-group .predicted *, .threadInfo a, .threadInfo label, .communityPortletList strong, .browser-folders *, .popover-content .submenu li a { color:var(--dkf-slate-600)!important; }

/* Azul claro foro */
#forumBox .panel:nth-child(even) .forumIcon { background-color:var(--dkf-blue-muted); }

/* Azul oscuro logotipo */
.container-login, #chat_channels, .panel-primary>.panel-heading, .btn-primary, #forumBox .panel:nth-child(odd) .forumIcon, .tab-buttons button.active { background-color:var(--dkf-primary-dark)!important; }
#forumList .panel-title, .nav-tabs li a:hover, .tab-buttons button:not(.active):hover * { color:var(--dkf-primary-dark)!important; }
.page-layouts.active, .page-layouts.active *, .file_upload:hover, .panel-primary, .panel-primary>.panel-heading { border-color:var(--dkf-primary-dark)!important; }

/* Azul Border menú comunidades */
.nav-tabs > li.active > a, #community_fav .btn-primary, #community_fav .btn:hover { border-color:var(--dkf-primary) !important; }
#meUser.active, #allUser.active, .iconRefresh .fas, .fas.filter-heading-icon,  th[data-sorted="true"] [data-sort-handler] span, .gridMoreMenu :checked ~ label span,
.sidebar-nav li:not(.sidebar-brand) .item-caret:hover a, .sidebar-nav li:not(.sidebar-brand).active .item-caret a, .sidebar-nav li.active > a,
.sidebar-nav li.active > .item-caret > a, .sidebar-nav > li:not(:first-child):hover > a, .sidebar-nav > li:not(:first-child):hover > .item-caret > a,
.sidebar-nav li.active > .item-caret > a > span,
/* :not(.admin-menu span.fa-fw): el glifo de los tiles del menu admin
   (manageSystem/view.jsp) va blanco sobre fondo primary; sin el carve-out
   este primary!important lo dejaba azul-sobre-azul (invisible) al activar. */
.sidebar-nav li.active > a > span:not(.admin-menu span.fa-fw),
.nav-tabs > li.active > a, #main-menu li.active a > span:last-child { color:var(--dkf-tab-color-active, var(--dkf-primary))!important; }
.checkData, .fieldActionsWrapper, input:checked + .slider, .contextTitle, .panel-title .label { background-color:var(--dkf-primary)!important; }
.input-group-text { transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
/* El foco y el hover eran la misma regla: con el teclado no habia forma de
   saber en que campo estabas, porque pasar el raton por encima pintaba
   exactamente lo mismo. Ahora el hover insinua y el foco manda.
   El !important lo arrastra la regla original: hay un barrido global de bordes
   (".form-control:not(:focus):not(:hover), ..." mas abajo) que tambien lo lleva
   y si no, gana el. */
.form-control:hover { border-color:var(--dkf-primary-light)!important; }   /* prioridad heredada de la regla original: el barrido global de bordes tambien la lleva */
.form-control:focus { border-color:var(--dkf-primary)!important; box-shadow:0 0 0 3px var(--dkf-primary-tint)!important; }   /* prioridad en las dos: el barrido global de bordes y la regla que apaga la sombra de todos los campos la llevan tambien */
.input-group:has(.form-control:focus) .form-control,
.input-group:has(.form-control:hover) .form-control,
.input-group:has(.form-control:focus) .input-group-text,
.input-group:has(.form-control:hover) .input-group-text { border-color:var(--dkf-primary)!important; }

/*#main-menu li.active, */.grid .filters .label:hover, .grid .filters .label.active { background-color:rgba(30,55,153,0.1)!important; box-shadow: none; }



/* Gris oscuro labels */
form label, label.control-label, strong.control-label, .form label { color:var(--dkf-gray-900); }

/*.sidebar-nav li:not(.sidebar-brand) .item-caret:hover a, .sidebar-nav li:not(.sidebar-brand).active .item-caret a, .sidebar-nav li.active > a,
.sidebar-nav li.active > .item-caret > a, .sidebar-nav > li:not(:first-child):hover > a, .sidebar-nav > li:not(:first-child):hover > .item-caret > a,*/



/* Azul claro fondo de foros y repositorio */
#forumList .widget-color-3, .folders { background-color:var(--dkf-bg-hover)!important; }

/* Azul claro HOVER menu */

.table-hover>tbody>tr:hover, .table-hover>tbody>tr.checked { box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.3); }
#meUser, #allUser { color:var(--dkf-primary-tint); }

/* Azul claro HOVER barra */
#organizationMenu { color:var(--dkf-blue-muted)!important; }

/* Highlight — ambar de marca (--dkf-accent) en vez del neon #fff82c */
.fieldActionsWrapper > .btn-group > a:hover, .fieldActionsWrapper > a:hover, .fieldActionsWrapper .big-action:hover { color: var(--dkf-accent) !important; }

/* Rojo Error */
.has-error .form-control, .has-error .owncheckbox { border-color:var(--dkf-danger-text)!important; }

/* Estructura */
#body_principal { font-size:14px; line-height:17px; }
#header { padding:0; }
#header-upper-menu, #header-upper-bar { float:left; }
#header-upper-menu > a { position:relative; z-index:1; }
.navbar-nav .dropdown-menu { top:55px; padding:0 10px; position:absolute!important; }
#header-user-roles .dropdown-menu { top:0; }
#comunity-menu { left: 0; right:auto; }
#user-menu { right:0; left:auto; }
#header-upper-menu .dropdown-menu a { font-size:15px; }
#header-upper-menu .dropdown-menu a .label { vertical-align: middle; padding-bottom:2px; }
#header-upper-menu .dropdown-menu a span { margin-right:2px; }
#header-upper-menu { width:250px; padding:0 13px; }
#header-upper-menu a { font-size:17px; margin-top:14px; }
#header-upper-bar { width:100%; }
#header-upper-bar h2 { text-transform:none; font-weight:bold; font-size:25px; }
#header-upper-bar .navbar-nav > li { float:left; }
#header-upper-bar .navbar-left { padding: 10px 0 0 26px; }
#header-upper-bar .navbar-right { margin: 0 36px; border:none; }
#header-upper-bar .navbar-right > li { margin-top:10px; }
#header-upper-bar .dropdown-toggle::after { border:none!important; }
#header-upper-bar .rolesMenu { top:18calendarTypepx; left: 18px; transform:translateX(-100%); font-size:12px; }
#header-upper-bar .rolesMenu li { padding: 4px; }
#header-upper-bar .rolesMenu li, #header-upper-bar .rolesMenu span, #header-upper-bar .rolesMenu div { white-space:nowrap; }
#header-upper-bar .rolesMenu span, #header-upper-bar .rolesMenu img { display:inline-block; }
#header-upper-bar .rolesMenu img { margin-right: 3px; margin-top: -3px; }
#header-upper-bar .rolesMenu span { line-height:13px; }
#header-searcher-input { margin-top: -8px; }
.header-with-image { width:100%!important; position: relative; }
.header-with-image .freemiumAddOrgIcon { background-color: var(--dkf-white); right: 5px; top:5px; padding: 4px; border-radius: 50%; }
.header-with-image .freemiumAddOrgIcon > i { float:left; font-weight:900; }
.header-with-image a img { max-width:100%; max-height: 80px; }
.headerRoles { margin-top: -4px; }
.headerRoles img { max-width:18px; margin-left:-3px; }
.navbar { border:none; }
.hidden, .hide { display:none; }
.form-control { font-size:14px; }
.dropdown-menu li:not(.divider) a { padding-top: 5px; padding-bottom:5px; }
#user-exit-destroy { padding-bottom:10px; }
.navbar, #header-upper-bar { z-index:1064; height:80px!important; max-height:80px!important; }
#header .navbar-right #comunityMenu:hover, #header .navbar-right .open #comunityMenu { color: var(--dkf-blue-muted); }
#comunityMenu { padding-bottom: 10px; }
.sidebar-nav li:not(.sidebar-brand) .item-caret:hover a, .sidebar-nav li:not(.sidebar-brand).active .item-caret a, .sidebar-nav li.active > a, .sidebar-nav li.active > .item-caret > a, .sidebar-nav > li:not(:first-child):hover > a, .sidebar-nav > li:not(:first-child):hover > .item-caret > a { font-weight:normal; }
.menu-collapsed-hover a > span:first-child { margin-left: 3px; }
#sidebar-wrapper { z-index:1; border:none; width:48px; box-shadow: 0 0 50px 0 rgba(44,68,158,0.2); }
#sidebar-wrapper:not(.toggled) #main-menu > ul > li { margin-left:-5px; }
#menuSearch { width: calc(100% - 10px); }
/* Buscador de menu: boton limpiar (X), item seleccionado por teclado y estado vacio. */
#menuSearch .input-group { position:relative; }
.menu-search-clear {
    position:absolute; right:6px; top:50%; transform:translateY(-50%); z-index:5;
    border:0; background:transparent; color:var(--dkf-slate-400); cursor:pointer;
    width:24px; height:24px; line-height:1; border-radius:6px; padding:0;
    display:none; align-items:center; justify-content:center;
}
.menu-search-clear:hover { color:var(--dkf-slate-600); background:var(--dkf-bg-hover); }
#menuSearch.has-query .menu-search-clear { display:flex; }
#menuSearch.has-query .form-control { padding-right:30px; }
#main-menu > ul > li.menu-search-sel { background:var(--dkf-primary-tint); border-radius:6px; }
#main-menu > ul > li.menu-search-sel > a { color:var(--dkf-link-active); }
.menu-search-empty { display:none; list-style:none; padding:10px 14px; margin:4px 6px;
    color:var(--dkf-slate-400); font-style:italic; font-size:0.85rem; }
.menu-search-empty:before { content:"\f002"; font-family:"Font Awesome 6 Pro"; font-weight:300; margin-right:8px; }
#toggleMenuHandler.no-transition { transition: none!important; }
/* Botón plegar/desplegar el menú: disco a caballo del borde del rail. Colapsado el rail
   mide 48px (regla global de #sidebar-wrapper), no 40 → left:48px centra el disco sobre
   el borde igual que left:250px lo hace con el menú expandido. */
#toggleMenuHandler { position: fixed; top: 80px; left: 48px; transform: translateY(50%) translateX(-50%); border-radius: var(--dkf-radius-round); width: 30px; height: 30px; color:var(--dkf-gray-700); background-color:var(--dkf-white); border:1px solid var(--dkf-border-light); box-shadow: var(--dkf-shadow-card); z-index: 1; transition: left var(--dkf-transition-slow), background-color var(--dkf-transition-fast), border-color var(--dkf-transition-fast); }
.toggled #toggleMenuHandler { left: 250px; }
#toggleMenuHandler > span { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%) }
#toggleMenuHandler:hover, #toggleMenuHandler:focus-visible { background-color:var(--dkf-primary-tint); border-color:var(--dkf-primary-light); }
#toggleMenuHandler:hover > span, #toggleMenuHandler:focus-visible > span { color:var(--dkf-primary); }
/* El bloque genérico de :focus-visible (a11y) fija border-radius sm; este botón es circular */
#toggleMenuHandler:focus-visible { border-radius: var(--dkf-radius-round); }
.popover-toggled-menu { left: 40px!important; }
.sidebar-nav li, .menu-collapsed-hover { white-space:nowrap; }
.menu-collapsed-hover { line-height:45px; }
#main-menu::-webkit-scrollbar-track, #chat_channels::-webkit-scrollbar-track, .workflowTimeline::-webkit-scrollbar-track, .lightProcessHTML > .panel > .panel-body::-webkit-scrollbar-track, body::-webkit-scrollbar-track, [data-lateral-opened="1"] fieldset::-webkit-scrollbar-track, .doubleScroll-scroll-wrapper::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar-track, .processIndexListScrollBar::-webkit-scrollbar-track, .smallScroll::-webkit-scrollbar-track { border-radius: 4px; background-color: transparent; }
#main-menu::-webkit-scrollbar, #chat_channels::-webkit-scrollbar, .workflowTimeline::-webkit-scrollbar, .lightProcessHTML > .panel > .panel-body::-webkit-scrollbar, body::-webkit-scrollbar, [data-lateral-opened="1"] fieldset::-webkit-scrollbar, .doubleScroll-scroll-wrapper::-webkit-scrollbar, .table-responsive::-webkit-scrollbar, .processIndexListScrollBar::-webkit-scrollbar, .smallScroll::-webkit-scrollbar { width: 5px; height: 5px; background-color: transparent; }
.doubleScroll-scroll-wrapper::-webkit-scrollbar, .table-responsive::-webkit-scrollbar, .processIndexListScrollBar::-webkit-scrollbar { height: 7px; }
.doubleScrollFixed { z-index:1061; position:sticky; top:0; height:10px!important; }
#main-menu::-webkit-scrollbar-thumb, #chat_channels::-webkit-scrollbar-thumb, .workflowTimeline::-webkit-scrollbar-thumb, .lightProcessHTML > .panel > .panel-body::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, [data-lateral-opened="1"] fieldset::-webkit-scrollbar-thumb, .doubleScroll-scroll-wrapper::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb, .processIndexListScrollBar::-webkit-scrollbar-thumb, .smallScroll::-webkit-scrollbar-thumb, #community_menu_search::-webkit-scrollbar-thumb { border-radius: 4px!important; }
.translatedInput::-webkit-scrollbar-thumb { border-radius: 4px!important; }
.nav-user { padding-left:20px; }
.nav-user > div:last-child { margin-right:0; }
#page-content-wrapper.toggled { margin-left:250px; width:calc(100% - 250px); }
.portlet:not(.lightProcessIcon) { margin:15px; width:calc(100% - 20px); }
.portlet:not(.lightProcessIcon) .portlet:not(.lightProcessIcon) { margin:0; }
.portlet:not(.lightProcessIcon) .title { /*border:none;*/ float:left; width:100%; text-transform:uppercase; height:auto; line-height:normal; }
.portlet:not(.lightProcessIcon) .title > i { float:left; margin: 3px; }
.portlet:not(.lightProcessIcon) .title h3 { margin-bottom:0; position:static; font-size:16px; line-height:22px; text-shadow:none; float:left; display:inline; }
.portlet:not(.lightProcessIcon) .title .toolbar *, .portlet:not(.lightProcessIcon) .title .fa { font-size:11px!important; }
.portlet:not(.lightProcessIcon) .title .fa, .portlet:not(.lightProcessIcon) .title .fal { margin:0 7px; position:relative; }
.portlet:not(.lightProcessIcon) .title .toolbarIconsWrapper > a .fa:after, .portlet:not(.lightProcessIcon) .title .toolbarIconsWrapper > a .fal:after, .portlet:not(.lightProcessIcon) .title .toolbarIconsWrapper > .btn-group > a .fal:after { content:' '; position:absolute; border:1px solid; border-radius:50%; width:23px; height:23px; top:50%; left:50%; transform:translate(-50%, -50%); }
.toolbarButtonsWrapper { float: left; margin-right: 5px; }
.toolbarButtonsWrapper .label { text-transform: none; border:1px solid transparent; margin-right:1px; }
.toolbarButtonsWrapper .label:last-child { margin-right: 0; }
.toolbarButtonsWrapper .label:hover { filter: brightness(1.03); border:1px solid; }
.toolbarIconsWrapper { float: left; margin-top:4px; max-height: 26px; }
.toolbarIconsWrapper .btn-group { margin-left: 3px; }
/* ============================================================
   User menu dropdown (#user-menu) — flex-based redesign.
   Style contract: docs/ux/dropdown-menu-bestpractices.md
   ============================================================ */
#user-menu {
    min-width: 268px; max-width: 304px;
    padding: 6px;
    border: 1px solid var(--dkf-border-light);
    border-radius: var(--dkf-radius);
    box-shadow: var(--dkf-shadow-lg);
}

/* --- Context blocks (non-interactive): identity + organization --- */
#user-show-profile-info, #user-show-organization {
    display: flex; align-items: center; gap: 10px;
    width: 100%; float: none; border: 0; margin: 0;
    padding: 10px 12px;
    border-radius: var(--dkf-radius-sm);
    background: var(--dkf-bg-section);
}
#user-show-profile-info { margin-bottom: 4px; }
#user-show-organization { margin-bottom: 6px; }
#user-show-profile-info img {
    flex: 0 0 auto; float: none; margin: 0;
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
}
#user-show-profile-info > div {
    display: flex; flex-direction: column; min-width: 0;
    float: none; margin: 0; width: auto;
}
#user-show-profile-info > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#user-show-profile-info > div > span:first-child { font-weight: 600; color: var(--dkf-gray-800); }
#user-show-profile-info > div > span:last-child { font-size: 12px; color: var(--dkf-gray-500); padding: 0; }
#user-show-organization > span {
    display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
    font-weight: 600; color: var(--dkf-gray-700);
}
#user-show-organization > span > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#user-show-organization .btn { flex: 0 0 auto; margin: 0 0 0 auto; }

/* --- Interactive rows --- */
#user-menu > li:not(.divider):not(#user-show-profile-info):not(#user-show-organization) > a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: var(--dkf-radius-sm);
    color: var(--dkf-gray-700);
    transition: background var(--dkf-transition-fast), color var(--dkf-transition-fast);
}
#user-menu > li > a > span:first-child {
    flex: 0 0 18px; width: 18px; text-align: center;
    font-size: 15px; color: var(--dkf-gray-500);
}
#user-menu > li:not(.divider) > a:hover, #user-menu > li:not(.divider) > a:focus {
    background: var(--dkf-bg-hover); color: var(--dkf-primary);
}
#user-menu > li:not(.divider) > a:hover > span:first-child,
#user-menu > li:not(.divider) > a:focus > span:first-child { color: var(--dkf-primary); }
#user-menu .dropdown-divider { margin: 6px 4px; border-color: var(--dkf-border-light); }

/* --- Session group: logout (red icon) + secondary "clear cookies" --- */
#user-exit > a > span:first-child { color: var(--dkf-danger); }
#user-exit-destroy { padding-bottom: 4px; }
#user-exit-destroy > a.user-exit-secondary { padding-top: 4px; padding-bottom: 6px; font-size: 12px; color: var(--dkf-gray-500); }
#user-exit-destroy > a.user-exit-secondary > span:first-child { font-size: 13px; }

/* ============================================================
   Alerts dropdown (#haveAlertsWrapper) — bell menu, pending tasks.
   Style contract: docs/ux/dropdown-menu-bestpractices.md
   ============================================================ */
#haveAlertsWrapper {
    min-width: 288px; max-width: 360px;
    padding: 6px;
    border: 1px solid var(--dkf-border-light);
    border-radius: var(--dkf-radius);
    box-shadow: var(--dkf-shadow-lg);
}
/* Non-interactive header: title + total badge */
#haveAlertsWrapper .myAlert-head {
    display: flex; align-items: center; gap: 8px;
    margin: 0; padding: 8px 12px 7px;
    font-size: 13px; font-weight: 600; color: var(--dkf-gray-800);
}
#haveAlertsWrapper .myAlert-head > span:first-child { color: var(--dkf-primary); font-size: 14px; }
#haveAlertsWrapper .myAlert-head-title { flex: 1 1 auto; min-width: 0; }
#haveAlertsWrapper .myAlert-total {
    flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; line-height: 1;
    color: var(--dkf-white); background: var(--dkf-primary); border-radius: 10px;
}
#haveAlertsWrapper .myAlert-divider { height: 1px; margin: 2px 8px 4px; padding: 0; background: var(--dkf-border-light); }
/* Interactive rows (flex) — also covers loading / empty / error rows */
#haveAlertsWrapper > li > a {
    display: flex !important; align-items: center; gap: 11px;
    padding: 9px 12px !important; border-radius: var(--dkf-radius-sm);
    color: var(--dkf-gray-700);
    transition: background var(--dkf-transition-fast), color var(--dkf-transition-fast);
}
#haveAlertsWrapper .myAlertElement > a:hover,
#haveAlertsWrapper .myAlertElement > a:focus { background: var(--dkf-bg-hover); color: var(--dkf-primary); }
#haveAlertsWrapper .myAlert-icon { flex: 0 0 18px; width: 18px; text-align: center; font-size: 15px; color: var(--dkf-gray-500); }
#haveAlertsWrapper .myAlertElement > a:hover .myAlert-icon,
#haveAlertsWrapper .myAlertElement > a:focus .myAlert-icon { color: var(--dkf-primary); }
#haveAlertsWrapper .myAlert-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#haveAlertsWrapper .myAlert-count {
    position: static; flex: 0 0 auto; margin-left: auto;
    min-width: 24px; height: 21px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; line-height: 1;
    color: var(--dkf-primary); background: var(--dkf-primary-tint); border-radius: 11px;
}
#haveAlertsWrapper .myAlertElement > a:hover .myAlert-count,
#haveAlertsWrapper .myAlertElement > a:focus .myAlert-count { background: var(--dkf-white); }
#haveAlertsWrapper .myAlert-empty { color: var(--dkf-gray-500); }

.portlet:not(.lightProcessIcon) .title .toolbar button { margin-top:-5px; margin-right:5px; padding-top:2px; margin-bottom:-2px; }
.portlet:not(.lightProcessIcon) .content, .portlet:not(.lightProcessIcon) .title, .openProcessSidebar { margin-top:5px; padding:20px 15px!important; background-color:var(--dkf-white); box-shadow: 0 0 5px 0 rgba(0,0,0,0.10); }
.openProcessSidebar { border-radius:4px; }
.portlet:not(.lightProcessIcon) .title { border-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.portlet:not(.lightProcessIcon) .content { padding-top:10px!important; margin-top:0; border-radius: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }
#main-menu li { /*padding:0 3px;*/ position: relative; }
#main-menu li.in-page-config { display:none; }

.toggled #main-menu li > a { display: flex; width:100%; }
.toggled #main-menu li > a > span:first-child { display: inline-block; /*margin-right: 5px;*/ }
.toggled #main-menu li > a > span:not(:first-child) { display: inline-block; width: calc(100% - 20px); margin-top: 9px; text-overflow: ellipsis; overflow: hidden; }
.toggled #menu-brand { display:flex!important; } /* !important: vence al d-md-block (utilidad BS5, display:block!important) del <li> para activar el layout flex */
#menu-brand * { color:var(--dkf-gray-500)!important; margin:0; padding:0; }
/* Footer de marca al pie del sidebar expandido: logo a la izquierda, version + info a la derecha */
#menu-brand { display:none; position:fixed!important; bottom:0; width:250px; margin-left:-16px!important; /* compensa el p-3 (16px) de #main-menu para ocupar los 250px completos */ padding:10px 16px!important; align-items:center; justify-content:space-between; border-top:1px solid var(--dkf-border); }
#menu-brand .float-start, #menu-brand .float-end { float:none!important; } /* flex gobierna el layout; anula los float-* (BS5) del JSP */
#menu-brand img { display:block; opacity:.85; transition:opacity .15s ease; }
#menu-brand:hover img { opacity:1; }
#menu-brand p { line-height:1; }
#menu-brand p span { font-size:11px; letter-spacing:.02em; }
#menu-brand p a { margin-left:6px; transition:color .15s ease; }
#menu-brand p a:hover, #menu-brand p a:hover span { color:var(--dkf-primary)!important; } /* el icono info se tinta de primario al pasar el raton */
#user-menu-desplegable strong { padding:10px 10px 15px; float:left; }
#page-content-wrapper.movil { margin-left:0!important; width:100%; }
#page-content-wrapper.movil .portlet:not(.lightProcessIcon) { width:100%; margin:0; }
#menu-edit { display:none; }
.toggled #menu-edit { display:block; }
#menu-search-icon.highlight { color:var(--dkf-bg-highlight); background-color:transparent!important; }
#header-nav-searcher { display: none; margin:8px 0 0; border:none; background-color:transparent; color:var(--dkf-white); border-radius:0; padding-left:0!important; padding-right:0!important; width:200px; float:left; background-color:var(--dkf-bg-header); padding: 4px 4px 4px 19px!important; margin-left: -23px; margin-top: 12px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
.fa-spin { animation-duration: 0.5s!important; }
.spin-fix { width: 1em; }
label.predicted { font-weight:normal!important; }
#wrapper:not(.toggled) .menu-element:not(.menu-collapsed-hover) > a > span:last-child, #wrapper:not(.toggled) .header-with-image { opacity:0; }
.panel-with-buttons > .row { margin-left:-15px!important; margin-right:-15px!important; }
.nav-user img { height: 50px; border-radius: 50%; margin-top: -6px; }
#organizationMenu { line-height:20px!important; }
.nav-user a { font-size:14px!important; }
.nav-user a strong { white-space: nowrap; }
.nav-user { border-left:1px solid var(--dkf-white); margin-left:10px; padding-left:13px; }
.nav-user > div:first-child { margin:13px 10px 0 0; }
.nav-user > div.hasRoles { margin-top:2px; }
#header-user-roles { margin-top:5px; float:right; }
#header-user-roles > div { margin-top:-6px; float:right; }
#header-user-roles > div button { border-radius:50%; width:16px; height:16px; padding: 2px 3px!important; width:17px; height:18px; }
#header-user-roles .dropdown-menu { padding:7px; min-width:90px; }
#header-user-roles .dropdown-menu li { float:left; }
#header-upper-bar .hasRoles .user-avatar { width:18px; height:18px; margin-left:-3px; }
#header-upper-bar .hasRoles .user-avatar:first-child { margin-left:0; }
.user-name:hover { font-weight:normal!important; }
#menu-edit button { width:100%; }
.content-grey { background-color:transparent!important; box-shadow: none!important; }
.content.content-grey { padding:10px 0 0!important; }
.flexgrid-filter-dropdown input { border:1px solid!important; }
#header-upper-menu .input-group-text { background-color:transparent; }
#header-upper-menu .form-control { border-left:none; }
#sidebar-wrapper { overflow:hidden; }
.maybe-toggled.toggled #sidebar-wrapper { overflow:visible; }
.maybe-toggled:not(.toggled) #menu-brand { display:none!important; }
#wrapper:not(.toggled) #menuSearch { display:none; }
/* ---- Rail contraido (switchButtonMenu -> #wrapper sin .toggled) ----
   El markup actual de navigationMenu.jsp es li > span.btn-toggle > a > span(icono) + span.menu-title;
   la regla historica que ocultaba el titulo apuntaba a .menu-element, que ya no existe, asi que
   al contraer el texto seguia pintado (recortado: "OC", "Acc"...) y el <ul> seguia midiendo 250px
   dentro de los 48px del rail, dejando el menu desplazable en horizontal. Aqui el rail se ajusta a
   su ancho real y cada item queda reducido a su icono centrado; el nombre lo da el popover del
   .btn-toggle (data-bs-trigger=hover). Verificado con MainMenuCollapsedProbeTest. */
#wrapper:not(.toggled) #main-menu.sidebar-nav { width:48px; }
#wrapper:not(.toggled) #main-menu > ul > li { margin-left:0; }
#wrapper:not(.toggled) #main-menu li ul li { margin-left:0; }
#wrapper:not(.toggled) #main-menu .btn-toggle { justify-content:center; padding-left:0!important; padding-right:0!important; margin-left:0; } /* !important: la capa moderna fija padding 8px 10px con !important */
#wrapper:not(.toggled) #main-menu .btn-toggle > a { width:auto; margin-left:0; padding:0; display:flex; justify-content:center; overflow:visible; } /* padding:0 anula el 0 10px 0 0 de .sidebar-nav li a, que descentraba el icono 5px */
#wrapper:not(.toggled) #main-menu .btn-toggle > a > span:first-child { margin:0; }
#wrapper:not(.toggled) #main-menu .menu-title,
#wrapper:not(.toggled) #main-menu .menu-after-element,
#wrapper:not(.toggled) #main-menu .haveRoles,
#wrapper:not(.toggled) #main-menu .page-role { display:none; }
/* Pagina sin icono: el span de icono va vacio y sin clase; se pinta un icono generico para que el item no desaparezca del rail */
#wrapper:not(.toggled) #main-menu .btn-toggle > a > span:first-child:not([class])::before { font-family:"Font Awesome 6 Pro"; font-weight:300; content:"\f15c"; font-size:15px; }
/* Grupo (li.menuGroup): sin espacio para su rotulo; queda como separador fino entre bloques */
#wrapper:not(.toggled) #main-menu li.menuGroup > .btn-toggle { display:none!important; } /* !important: #main-menu .btn-toggle es display:inline-flex!important */
#wrapper:not(.toggled) #main-menu li.menuGroup { border-top:1px solid var(--dkf-border-light); margin:6px 6px 4px; }
#header-searcher { float:left; width:250px; }
#header-searcher a { float:left!important; font-weight:bold; margin:5px 0 0 0; padding-left:0!important; }
#header-searcher a > span { position:relative; z-index:2; background-color:var(--dkf-gray-700); border-radius: 50%; color:var(--dkf-white)!important; padding: 8px; font-size: 12px!important; }
#header-searcher, #header-upper-bar .navbar-right { height:60px; }
#header-searcher-wrapper { position:relative; }
#header-searcher-wrapper .dropdown-menu { left:67px; top:67%; }
#header-searcher-wrapper .dropdown-menu:not(.predicting) { opacity: 0; }
#header-upper-bar { position:relative; }
#header-upper-bar > ul { width: 100%; position:absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
#header-upper-bar > ul > li.nav-icons  { margin-top: 10px; margin-left: 5px; }
#header-upper-bar .navbar-right .nav-icons { margin:12px 10px 0; }
#header-upper-bar .dropdown-menu { margin:5px 4px 0 0; }
#header-upper-bar #comunity-menu { margin: 0 30px 5px 30px; }
#header-upper-bar #user-menu { margin: 0 -5px 6px -5px; }
#comunity-name label { font-size:12px; margin-bottom:0; }
.gridSelector .input-group-text { border:1px solid var(--dkf-border-light)!important; border-left:none!important; }
.tablesorter-default .header, .tablesorter-default .tablesorter-header, .flexgrid thead th { padding:0!important; }
label:not(.checkbox):not(.label):not(.checkbox-inline), label:not(.checkbox):not(.label):not(.checkbox-inline) { font-weight:bold; }

/* Light Process */
#lightProcessWrapper { position:fixed; bottom:10px; right:10px; z-index:11; display:flex;  transition: all 0.5s ease; }
#lightProcessWrapper .tooltip-inner { min-width:100px; }
.lightProcessOpened { width:400px; height:100%; background-color:var(--dkf-white); border:1px solid; border-radius:4px; padding:10px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); }
.lightProcessIcon { margin:auto 2px 0; float:left; }
.lightProcessIcon:last-child { margin:auto 0 0; }
.lightProcessIcon .lightProcessHTML { display:none; }
.lightProcessOpened .lightProcessButtonIcon { display:none; }
.lightProcessOpened .lightProcessHTML { display:block; }
.lightProcessHTML > .panel { border-bottom:none!important; }
.lightProcessHTML > .panel > .panel-body { height:345px; overflow:auto; overflow-x:hidden; margin:10px 0; padding:0; }
.lightProcessHTML > .panel > .panel-body .bootstrap > form > fieldset > .row { margin-right:0; margin-left:0; }
.lightProcessHTML > .panel > .panel-body .bootstrap > form > fieldset > .row > div[class*="col-md"]{ padding-left:2px; padding-right:5px; }
.lightProcessHTML > .panel > .panel-heading { padding:0 0 5px!important; }
.lightProcessHTML > .panel > .panel-heading > .panel-title { line-height:20px; font-size:16px!important; }
.lightProcessHTML > .panel > .panel-heading > .panel-title span { width:calc(100% - 20px); display:inline-block; }
.lightProcessOpened .hideMobile { display:none; }

/* Tooltips */
.tooltip.top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--dkf-white)!important; }
.tooltip.top-left .tooltip-arrow { border-top-color: var(--dkf-white)!important; }
.tooltip.top-right .tooltip-arrow { border-top-color: var(--dkf-white)!important; }
.tooltip.left .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-left .tooltip-arrow::before { border-left-color: var(--dkf-white)!important; }
.tooltip.right .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-right .tooltip-arrow::before { border-right-color: var(--dkf-white)!important; }
.tooltip.bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--dkf-white)!important; }
.tooltip.bottom-right .tooltip-arrow { border-bottom-color: var(--dkf-white)!important; }
.tooltip.bottom-left .tooltip-arrow { border-bottom-color: var(--dkf-white)!important; }
.tooltip-inner { background-color: var(--dkf-white)!important; color:var(--dkf-gray-900)!important; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); }

/* Dokuflex help bar */
#dokuflex-help a { position:fixed; z-index:1060; bottom:20px; right:20px; padding:10px 20px; border:1px solid #3d56c2; background-color: var(--dkf-primary-hover); border-radius:50%; width:60px; height:60px; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); }
#dokuflex-help a:hover, #dokuflex-help a.active { background-color: #48b400; border-color: #398d00; }
#dokuflex-help i { font-size:30px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
#dokuflex-help * { color:var(--dkf-white); }
#dokuflex-help-bar { position:fixed; z-index:1064; top:0; right:-310px; width:300px; height:calc(100% - 100px); padding:0 13px; overflow-y:auto; background-color:var(--dkf-white); box-shadow: -4px 0px 5px 0px rgba(0,0,0,0.4); border-bottom-left-radius: 10px; }
#dokuflex-help-bar.toggled { transition:right .4s ease; right:0; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); }
#dokuflex-help-bar h1 { font-size:17px!important; margin-top:14px; text-transform: uppercase; font-weight:bold; }
#dokuflex-help-bar > p { margin:20px 0 10px; }
#dokuflex-help-bar > a { position:absolute; top:17px; right:10px; }
#dokuflex-help-bar > div { float:left; width:calc(100% - 10px); margin:10px 5px; padding:15px; border-radius:10px; }
#dokuflex-help-bar > div strong { display:flex; align-items:center; gap:10px; font-size:17px; line-height:21px; margin-bottom:10px; float:left; width:100%; }
#dokuflex-help-bar > div strong > i { flex:0 0 auto; font-size:20px; }
#dokuflex-help-bar > div .btn { width:100%; margin-top:10px; }
#dokuflex-help-bar > #helpBarBack { display:none; float:right; margin-top:10px; text-align:left; text-decoration:none; }
#dokuflex-help-bar.helpBarFocused > #helpBarBack { display:block; }
#dokuflex-help-bar.helpBarFocused > div:not(.helpBarActive) { display:none; }

/* Buscador de iconos */
.searchIconList { float:left; width:100%; overflow:auto; }
.searchIconList > div { cursor:pointer; display: flex; justify-content: center; align-items: center; float:left; width:calc(20% - 10px); padding:30px 10px; margin:5px; text-align:center; }
.searchIconList > div span:first-child { font-size:30px; margin-bottom:10px; }
.searchIconList > div p { margin:0; }
.selectFaIconSearcher { cursor:pointer; color:inherit; border:1px solid; border-radius: var(--dkf-radius); width:100%; padding:11px 12px; float:left; }
.selectFaIconSearcher > div { width:calc(100% - 40px); float:left; }
.selectFaIconWrapper .input-group-text { float: right; margin: -12px -13px; width: 40px; height: 41px; padding: 11px; border-radius: var(--dkf-radius); border-top-left-radius:0; border-bottom-left-radius:0; }
.form-group:has(.selectFaIconWrapper) button { margin-bottom:3px; margin-top:-3px; }

/* Dureza Password */
.passwordStrength { max-width:250px; }
.passwordStrength > div { padding: 0 0 20px; margin-top: -10px; float: left; width: 100%; }
.passwordStrength > div > span { margin-bottom:5px; font-style: italic; text-align:left; float:left; width:100%; }
.passwordStrength > div > div { border:1px solid; border-right:none; width:20%; float:left; height:10px; }
.passwordStrength > div > div:last-child { border-right:1px solid; }
.passwordStrength > div > div.active { background-color:var(--dkf-success); }

/* Paneles */
.panel { border:none; border-radius:8px; box-shadow: var(--dkf-shadow-panel); background-color:inherit; }
.panel .panel-heading { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.panel.panel-collapsed .panel-heading { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.panel-heading:not(.panel-heading-background) { background-color:var(--dkf-white); color:var(--dkf-gray-900)!important; padding: 12px 15px 10px;  }
.panel-heading:not(.panel-heading-background).whiteLetter, .panel-heading:not(.panel-heading-background).whiteLetter a { color:var(--dkf-white)!important; }
/* Paneles de proceso (dokuflex.js panelHeadingExtras: panel, file, flexgrid, datos relacionados, lista de usuarios,
   usuario externo, firma, proceso programado, mapa;
   vista previa del disenador .buttonIcon): icono en el azul del tema
   salvo color propio (style inline desde el popup) o cabecera oscura, y descripcion opcional bajo el titulo,
   como los paneles de secureTransfer (.st-panel-desc) */
.panel > .panel-heading:not(.whiteLetter):not(.process_text_white) > .panel-with-icon,
.panel > .panel-heading:not(.whiteLetter):not(.process_text_white) > .buttonIcon:not(.panel-no-icon) { color:var(--dkf-primary); }
.panel > .panel-heading > .panel-desc { margin:4px 0 0; font-size:0.85em; font-weight:normal; line-height:1.4; color:var(--dkf-gray-600); }
.panel > .panel-heading.whiteLetter > .panel-desc, .panel > .panel-heading.process_text_white > .panel-desc { color:inherit; opacity:0.85; }
.panel-no-bottom { border-bottom:none; }
.panel-primary > .panel-heading, .panel-primary > .panel-heading a { color:var(--dkf-white)!important; }
.panel-success > .panel-heading { background-color:var(--dkf-alert-success-bg); }
.panel-danger > .panel-heading { background-color:var(--dkf-alert-danger-bg); }
.panel-warning > .panel-heading { background-color:var(--dkf-alert-warning-border); color:var(--dkf-gray-900)!important; }
span.panel-primary { color:var(--dkf-white); }
span.panel-warning { color:var(--dkf-gray-900); }
.portletForm .panel:not(.without-caret) .panel-heading { cursor:pointer; position:relative; }
/* Feedback de hover en cabeceras colapsables (se excluyen las que traen color del layout via style inline y la toolbar de summernote) */
.portletForm .panel:not(.without-caret) > .panel-heading:not(.panel-heading-background):not(.note-toolbar):not([style*="background"]) { transition: background-color var(--dkf-transition-fast); }
.portletForm .panel:not(.without-caret) > .panel-heading:not(.panel-heading-background):not(.note-toolbar):not([style*="background"]):hover { background-color:var(--dkf-gray-50); }
/* Panel blanco (panel-default sin color propio) en formularios de proceso: linea bajo la cabecera para separarla del
   cuerpo, como la cabecera gris del tema moderno (fieldset .panel-primary) y los paneles de secureTransfer.
   Colapsado no la lleva: la cabecera es todo el panel y la linea quedaria bajo las esquinas redondeadas. */
.portletForm .panel.panel-default > .panel-heading:not(.panel-heading-background):not(.note-toolbar):not([style*="background"]) { border-bottom:1px solid var(--dkf-border-card); }
.portletForm .panel.panel-default.panel-collapsed > .panel-heading:not(.panel-heading-background):not([style*="background"]) { border-bottom-color:transparent; }
.panel-body .panel:last-child { margin-bottom:0 }
/* Contenedor sin marco ("panel-block" en el diseñador): columna con sus propias filas junto a otro panel */
.panel.panel-block { border:none; box-shadow:none; background-color:transparent; margin-bottom:0; }
.panel.panel-block > .panel-body { padding:0; }

/* Menú comunidades — override block deliberately removed during the redesign.
   The base styles now live around line 859 (search for "#comunity-menu").
   The old !important rules (border-radius:0, .icons{display:none},
   list-group max-width:400px) actively fought the new layout and the
   accessibility-friendly always-visible action icons. Do NOT re-add them.
   If you need to tweak something, edit the canonical block above. */
#comunity-new { width:100%; padding:12px; border-radius:0; }
#comunity-menu .list-group .fas.fa-star { color:#e0d800; }

#community_menu_search { margin: 5px 0 0; }
#community_menu_search > div { border:none; margin: 1px 8px; }
#community_menu_search > div.active, #community_menu_search > div:hover { font-weight:bold; color: var(--dkf-black); background-color:rgba(30,55,153,0.1)!important; border-radius: 8px !important; }
#community_menu_search > div:hover { font-weight:normal; }
#community_menu_search > div.active { font-weight:bold!important; }
#community_menu_search > div.active span, #community_menu_search > div:hover span { color: var(--dkf-black); }


/* Checkbox y Radios */
label.checkbox { padding-bottom:0!important; line-height: 14px!important; }
#body_login label.checkbox { line-height: inherit!important; }
.checkbox { margin:0 0 5px 0!important; display: block; position: relative; padding-left: 15px; cursor: pointer; user-select: none; }
.checkbox:not(.radio-visible):not([class*="sn-checkbox"]) input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkbox[class*="sn-checkbox"], .checkbox[class*="sn-checkbox"] label { padding-left: 0; }
.checkbox[class*="sn-checkbox"] input { margin: 10px 7px 0 0!important; }
.checkbox .owncheckbox, .checkbox .ownradio { position: absolute; top: 0; left: 0; height: 12px; width: 12px; border:1px solid;  background-color:var(--dkf-white); }
.checkbox:has(input[type="checkbox"][disabled]) .owncheckbox { background-color: var(--dkf-bg-section)!important; }
.checkbox:has(input[type="radio"][disabled]) .ownradio { background-color: var(--dkf-bg-section)!important; }
.checkbox.disabled .owncheckbox, .checkbox.disabled .ownradio { background-color: var(--dkf-gray-100); }
.text-center .checkbox .owncheckbox, .text-center .checkbox .ownradio { left:calc(50% - 6px); }
.checkbox .ownradio { border-radius:50%; }
.owncheckbox:after, .ownradio:after { content: ""; position: absolute; display: none; }
.checkbox input:checked ~ .owncheckbox:after, .checkbox input:checked ~ .ownradio:after { display: block; }
.checkbox .owncheckbox:after { left: 4px; top: 1px; width: 3px; height: 7px; border: solid black; border-width: 0 1px 1px 0; transform: rotate(45deg); }
.checkbox .ownradio:after { border:1px solid; width:6px; height:6px; background-color:var(--dkf-black); border-radius:50%; margin:2px; }
/* Interruptor: opcion "Mostrar como interruptor" del checkbox del AppBuilder (misma estructura label > input ~ span.owncheckbox) */
.checkbox.checkbox-switch { padding-left: 42px; min-height: 18px; }
.checkbox.checkbox-switch .owncheckbox { width: 34px; height: 18px; border-radius: 9px; border-color: var(--dkf-gray-400); background-color: var(--dkf-gray-300); transition: background-color .2s, border-color .2s; }
.checkbox.checkbox-switch .owncheckbox:after { display: block; left: 2px; top: 2px; width: 12px; height: 12px; border: 0; border-radius: 50%; background-color: var(--dkf-white); transform: none; transition: left .2s; }
.checkbox.checkbox-switch input:checked ~ .owncheckbox { background-color: var(--dkf-primary); border-color: var(--dkf-primary); }
.checkbox.checkbox-switch input:checked ~ .owncheckbox:after { left: 18px; }
.checkbox.checkbox-switch input[disabled] ~ .owncheckbox { opacity: .6; }
.checkbox.checkbox-switch .text { line-height: 18px; }
/* Consentimiento RGPD (componente consent del AppBuilder) */
.consent-field { margin: 2px 0 8px; }
.consent-field .consent-link { margin-left: 4px; text-decoration: underline; }
.switch-with-text { cursor:pointer; padding:8px 10px; float:left; border:1px solid var(--dkf-gray-300); border-radius: 5px; white-space:nowrap; }
.switch-with-text > span { font-size:14px; float:left; margin-top:1px; }
.switch-with-text > input { margin-top:0!important; float:left; margin-right: 5px; }
.switch-with-text .checkbox { margin: 0!important; padding-left: 18px; }

/* Login */
#form-login .checkbox .owncheckbox { top:4px; }
.container-login { padding:0!important; max-width:1200px!important; border-radius:10px!important; }
.container-login > .row { text-align:center; margin:0; background-color:transparent!important; }
.container-login > .row > div:first-child { padding:30px!important; position:relative; }
.container-login > .row > div:last-child { padding:30px 30px!important; background-color:var(--dkf-white)!important; border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
.container-login h1 { color: var(--dkf-slate-400); font-size:20px; padding:0 45px; }
.container-login .dokuflex-logo { margin:10px 0; }
#form-login input[type="radio"], #form-login input[type="checkbox"] { position:absolute!important; margin-left:-20px!important; }
.social { width:60%; color: var(--dkf-gray-300); text-align:center; border-bottom: 1px solid var(--dkf-gray-300); line-height:0.1em; margin:30px auto 20px; }
.social span { background:var(--dkf-white); padding:0 10px; }
.social-links { display:inline-block; padding:0; margin:0 auto; }
.social-links li { float:left; }
.social-links .btn { border:none!important; border-radius:50%; width:30px; height:30px; outline:none!important; }
#connect-button button { background-color: var(--dkf-info) !important; }
#connect-button button:hover, #connect-button button:focus { opacity: 0.9; }
#connect-facebook { background-color:var(--dkf-facebook)!important; }
#connect-twitter { background-color:#2799ed!important; }
#connect-google { background-color: #186dee !important; }
#connect-google:hover, #connect-google:focus { opacity: 0.9; }
.registerOrg .connect-microsoft-wrapper > a { display:flex; }
#connect-microsoft:hover, #connect-microsoft:focus { opacity: 0.9; }
#userLangRegister { margin-left: 5px; float:left!important; }
/* Boton Google */
/* Escondido el botón hasta que funcione */
.social-links .google { margin-right:10px; }
.social-links .google, .social-links .microsoft { box-shadow: 0 2px 4px 0 rgba(0,0,0,.25); border-radius: 5px; }
.social-links .google > div, .social-links .microsoft > div { float:left; }
.social-links .google > a, .social-links .microsoft > a { float:left; color:inherit; margin-top:9px; padding-right:5px; }
.connect-microsoft-wrapper { box-shadow:none!important; }
.abcRioButton { border-radius:50%!important; width: 30px!important; height:30px!important; box-shadow: none!important; }
.abcRioButtonIcon { padding:6px!important; }
.loginShowPassword > div { padding:0!important; }
.loginShowPassword > div > a { float:left; padding:10px 20px; }

/* Dokuflex Logo */
.dokuflex-logo-org { max-width:100%; max-height:200px; }
.dokuflex-logo-layer > a { display:inline-block; margin: 0 auto; }
.dokuflex-logo-brand span { font-weight:bold; }
.dokuflex-logo-layer img { float:left; }
.dokuflex-logo-layer-footer img { margin: 0 0 0 10px; }
.dokuflex-logo-layer-footer img:last-child { margin-top: 3px; }
.container-login .dokuflex-logo-text { float:left; margin:30px 0 0 12px; }
#menu-brand .pull-left { margin-top:2px; }
#menu-brand .pull-left img { display:inline-block; margin-top:-2px; }
#menu-brand .pull-left span { display:inline-block; }
#menu-brand .pull-right { font-size:12px; margin-top:2px; }

/* Tamaño letra diferente a 14 */
.nav-user a, th { font-size:12px; }


form label, label.control-label, strong.control-label, .form label, .card-text, .card .card-number { font-size:14px!important; }
.card-text { font-size:13px!important; }
/* :not(:focus) anadido: esta regla mataba la sombra de TODOS los campos con
   marca de prioridad, incluida la del campo enfocado, asi que el anillo de
   foco no habia forma de pintarlo. Fuera del foco se comporta igual que antes. */
.form-control:not(:focus), #html5-qrcode-select-camera { box-shadow: none!important; }
.select2-results__option { font-size:14px; }

/* Tablas */
thead th, .listDocumentsSwapTable .tablesorter-default th:not(.checkTH).tablesorter-header { vertical-align:top!important; color:var(--dkf-white); padding:5px 3px!important; }
thead th[data-refresh]:first-child { padding:7px 6px 6px 6px!important; }
thead th[data-refresh] .dropdown-select { margin:0 0 0 3px!important; }
thead th[data-refresh] .owncheckbox { margin:5px 0 0!important; }
th .form-control::placeholder { text-transform: uppercase; }
th .form-control, th label, .form th label, th button { font-size:11px!important; font-weight:bold!important; }
.table-bordered>thead>tr>td, .table-bordered>thead>tr>th { border:none; }
thead button > span, thead .btn > span, thead th button > .fal { color:var(--dkf-gray-600)!important; }
thead:not(.controlTimeQuadrant):not(.controlTimeReport) .form-control, thead .form-control[readonly], .filter-heading .input-group .predicted { min-width:90px!important; min-height:30px!important; border:none; }
.flexgrid-filter-dropdown .form-control { border:1px solid; }
thead:not(.controlTimeQuadrant):not(.controlTimeReport) .form-control:not(.highlight), thead .form-control[readonly] { background-color:var(--dkf-white); }
.table .input-group-text:not(.round) { padding:4px 2px!important; }
table thead.controlTimeQuadrant td
table thead.controlTimeQuadrant tr > th:first-child > * { margin-top: 15px; }
table thead.controlTimeQuadrant tr > th:first-child .userSelected { padding:2px 4px!important; }
table thead.controlTimeQuadrant .input-group-text:not(.round), table thead.controlTimeReport .input-group-text:not(.round), .controlTime .quadrantMonthlyFilter .input-group-text:not(.round) { padding:4px 7px!important; }
.table .input-group-text.round { padding:4px 6px 4px 0!important; }
thead:not(.controlTimeQuadrant):not(.controlTimeReport) .input-group-text.round { border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important; }
.filter-heading .btn { border-radius:10px; background-color:var(--dkf-white)!important; border-color:var(--dkf-white)!important; box-shadow:none!important; }
.filter-heading .btn-group { top: -2px; }
.filter-heading [data-type="flexgrid"] .btn { border-radius:5px; margin-top:2px; padding:7px!important; }
thead:not(.controlTimeQuadrant):not(.controlTimeReport) .input-group .form-control { border-right:none!important; border-top-left-radius: 5px!important; border-bottom-left-radius: 5px!important; }
thead:not(.controlTimeQuadrant):not(.controlTimeReport) .input-group-text { background-color:var(--dkf-white); border-left:none; border-right:none; }
thead th label, thead th button, tbody tr th label, tbody tr th button { margin-bottom:0!important; padding:8px 4px!important; }
thead th[data-sortedby] label, tbody tr th[data-sortedby] label { padding-right:20px !important; }
thead th label:not(.predicted), thead th button, tbody tr th label, tbody tr th button { text-transform:uppercase; }
thead th label.checkbox { padding:9px 9px 0 4px!important; }
.filter-heading-multiple { width:100%; }
.filter-heading-multiple:not(:first-of-type) { margin-top:1px; }
.filter-heading-multiple:not(:first-of-type) .input-group .predicted { padding-top:6px!important; }
.filter-heading-multiple > .input-group:not(:first-child) { width:100%; }
thead .popover { max-width:none!important; }
thead .popover-content { padding:4px!important; }
.filter-heading .form-control, .filter-heading .form-control option:first-child, .table .form-control { font-weight:normal; /*text-transform:uppercase!important;*/ }
.table:not(.table-bordered)>tbody>tr>td, .table:not(.table-bordered)>tbody>tr>th, .table:not(.table-bordered)>tfoot>tr>td, .table:not(.table-bordered)>tfoot>tr>th, .table:not(.table-bordered)>thead>tr>td, .table:not(.table-bordered)>thead>tr>th { border:none; }
thead .popover-content .input-group .form-control, thead .popover-content .form-control { border-radius:0!important; }
thead .popover-content .input-group-text { border-right:1px solid; }
.flexgrid-filter-dropdown > div { padding-left:20px; padding-right:20px; }
thead .dropdown-menu { margin:0!important; padding:0!important; }
thead .dropdown > button { width:100%; text-align:left; }
thead .dropdown > button .caret { float:right; margin-top:7px; }
.filter-heading { position:relative; }
.filter-heading label:not(.predicted) { cursor:pointer; position:absolute; overflow:hidden; width:calc(100% - 28px); top:8px; left:7px; z-index:6; transition: .2s; padding:4px 4px 0 4px!important; }
.filter-heading .input-group label:not(.predicted) { padding:0!important; margin:0!important; }
.filter-heading.focused label:not(.predicted) { top:-5px; left:7px; transition: .2s; background-color:var(--dkf-white); width:auto!important; }
.filter-heading.focused .input-group .form-control { transition: .2s; border:1px solid; }
.filter-heading.focused .popover select.form-control, .filter-heading.focused .filter-heading-multiple:not(:first-of-type) .input-group select.form-control, .filter-heading.focused .filter-heading-multiple:not(:first-of-type) .input-group input { padding-top:2px!important; }
.filter-heading .input-group-text { border:none!important; }
.filter-heading:not([data-sorted]) .input-group-text, .filter-heading[data-sorted="false"] .input-group-text, th.tablesorter-headerUnSorted .tablesorter-icon, .flexgrid th:not([data-sortableth])::after { visibility: hidden; }
.filter-heading:hover .input-group-text, .filter-heading.focused .input-group-text, th.tablesorter-header:hover .tablesorter-icon, .flexgrid th:hover::after  { visibility: visible; }
.filter-heading.focused .input-group-text, .select2-container.highlight .select2-selection { border-top:1px solid!important; border-bottom:1px solid!important; }
.select2-container.highlight .select2-selection { border:1px solid!important; border-right:none!important; }
.filter-heading .select2-container--default .select2-selection--single { border-top-right-radius:0!important; border-bottom-right-radius:0!important; }
.filter-heading.focused .input-group-text:last-child { border-right-width:1px!important; border-right-style:solid!important; }
.filter-heading.filter-active .alert-info:not(.alert-blue) { border:1px solid; border-right:none!important; border-radius: 4px 0px 0px 4px; }
.filter-heading.filter-active [data-type], .filter-heading.filter-active .input-group-text, .filter-heading.filter-active .alert-info:not(.alert-blue), .filter-heading.focused [data-type="flexgrid"] button, .filter-heading.focused .select2-container--default .select2-selection--single { border-color:var(--dkf-primary)!important; }
tbody tr td label.checkbox { margin-bottom:0!important; }
.table-condensed>tbody>tr>td:not(.checkData):not(.equalPadding):not(.checkDataInTable):not(.actions) { padding:6px 5px 4px!important;}
.table-condensed>tbody>tr>td:not(.checkData):not(.checkDataInTable):not(.actions) { border-left:none!important; }
.flexgrid>.table-condensed>tbody>tr>td, .gridSelector>tbody>tr>td { padding-top:4px!important; }

.filter-heading .input-group .predicted { padding:6px 0 0 8px!important; border-radius: 10px 0 0 10px; border-style:solid!important; border-width: 1px !important; border-right:none!important; }
.filter-heading .dateRange { min-width:50%!important; width:50%; }
.filter-heading .dateRange:first-child { border-right:1px solid!important; }
.filter-heading .dateRange:not(:first-child) { border-radius:0!important; }
.table-filters-checkbox { margin:-5px!important; }
.table-filters-checkbox ul { margin:0!important; }
.table-filters-checkbox ul li { margin: 2px 0; padding:0 0 0 4px; }
.table-filters-checkbox ul li:last-child { margin-bottom: 7px; }
.table-filters-checkbox ul li, .table-filters-checkbox ul li a { float:left; width:100%; }
.table-filters-checkbox ul li:hover { background-color: var(--dkf-gray-50); }
.checkboxesTable { position:relative; }
.checkTH { width:14px!important; min-width:0!important; padding:0!important; }
.checkTH label.checkbox { margin: 14px 0 0 7px!important; height:12px; }
.checkData { border:none; width:6px!important; position:absolute; padding:0!important; left:11px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.pre-table .input-group { margin-bottom:5px!important; }
.table_td_max_height { max-height:80px; overflow:auto; }
.filter-heading-icon { position:absolute; top:13px; right:20px; z-index:4; background-color:var(--dkf-white); padding: 1px 3px 1px 4px; }
.table-sorter-flexgrid th { position:relative; }
.table-sorter-flexgrid th:after { font-family:Font Awesome\ 5 Pro, Font Awesome\ 5 Brands, Font Awesome\ 5 Free, Font Awesome\ 5 Solids, Helvetica; font-weight:300; content:'\f0dc'; position:absolute; top:6px; right:5px; z-index:1; }
.table-sorter-flexgrid[data-sortabledir="asc"] [data-sortableTH]:after { content:'\f0de'; font-weight:bold; }
.table-sorter-flexgrid[data-sortabledir="desc"] [data-sortableTH]:after { content:'\f0dd'; font-weight:bold; }
.gridFloating { position:absolute; top:0; left:0; z-index:var(--dkf-z-overlay); background-color:var(--dkf-white); width:100%; min-height:100%;}
/* Se elimina el ARROW de los selects de las cabeceras de listado para sólo tener 1 icono al final y que el diseño permita colocar embudo (cuando filtran) siempre en la misma posición */
.filter-heading select { appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; }
.tableChecks { position:absolute; top:42px; left:-7px; /*background-color:var(--dkf-primary);*/ width:5px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.relationsDocuments .tableChecks { top:32px; }
/* La tarjeta del grid moderno (body:not(.ownTheme) .grid .table-responsive) tiene borde de 1px que el top no cuenta: la franja caia 1px por debajo de su fila */
body:not(.ownTheme) .grid .tableChecksWrapper > .tableChecks { translate:0 -1px; }
.tableChecks tr, .tableChecks td { background-color:var(--dkf-primary); }
.tableChecks tr:first-child { overflow: hidden; }
.tableChecks tr td {
	border-top-left-radius: 10px!important;
	border-bottom-left-radius: 10px!important;
}
.tableChecks tr:hover td, .tableChecks.open tr td { position:relative; }
.tableChecks.open tr { opacity:1!important; }
.tableChecks tr:hover .checkbox, .tableChecks.open tr .checkbox { display:block; position:absolute; left: -16px; top:0; height:100%; min-width:20px; background-color:var(--dkf-primary); border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.tableChecks tr:hover .owncheckbox, .tableChecks.open tr .owncheckbox { top: calc(50% - 6px); left: calc(50% - 3px); }
.table-empty-editable-field { float:left;min-width:100px;min-height:20px; }
tfoot.table-spinner>tr>td, tfoot.table-spinner>tr { border:none!important; }

/* Checks in table */
.checkInTH { padding:9px!important; font-size:15px; cursor:pointer; }
.checkDataInTable { border-left:none!important; border-right:none!important; width:30px!important; padding:4px!important; }
.checkDataInTable .checkbox { padding-left:0!important; }
.checkDataInTable .owncheckbox { width:14px; height:14px; top:4px; left: 2px; }
.tableChecks .checkDataInTable .checkbox { display:none; }
.tableChecks .checkDataInTable .owncheckbox { width:12px; height:12px; }
.tableChecks .checkbox .owncheckbox, .tableChecks .checkbox .ownradio { top: 0; }
.checkDataInTable .owncheckbox:after { width:4px; height:8px; left:4px; top:1px; }
.tableChecks .owncheckbox:after { left:3px; top:0; }


#browser-files .grid { padding-left:5px; }
#browser-files .checkData:not(.open) { left:6px; }
#browser-files td:not(.checkDataInTable) { border-left:none!important; }
.checkData .checkbox { opacity:0; margin-top:5px!important; }
.checkData.open { left:-8px; width:24px!important; padding:5px 5px 4px!important; transition: left .2s ease, width .2s ease; }
.checkData.open .checkbox { opacity:1; transition: opacity .5s ease; }

.modal-open .modal { overflow: hidden; }

.modal-body .doubleScroll-scroll-wrapper { top:-18px; }
.modal-body .doubleScroll-scroll-wrapper, .modal-body .table-responsive { margin:0 10px; }
.modal-body .checkData { left:19px!important; }
.modal-body .checkData.open { left:2px!important; }

.fix .checkData { left:-1px; }
.fix .checkTH label { display:none; }
.checkboxTd { position:absolute!important; border:1px solid; }
.grid-main-filters { border-bottom:1px solid; display:block; float:left; width: 100%; }
.grid-main-filters .separador, .grid-bottom-filters .separador { height:50px; padding:15px 15px; border-right:none!important; float:left; }

.grid-main-filters .separador.nopadding, .grid-bottom-filters .separador.nopadding { padding-top:11px; }
.grid-main-filters .separador-display-table, .grid-bottom-filters .separador-display-table { display:table; padding-bottom:10px; }
.grid-main-filters .separador:first-child, .grid-bottom-filters .separador:first-child { border-left:none; }
.grid-main-filters .separador .icon, .iconRefresh .icon, .iconUsers .icon, .grid-bottom-filters .separador .icon { font-size:20px; padding: 0 10px; }
.grid-main-filters .separador .input-group-text { width:auto!important; }
.grid-main-filters .iconUsers, .grid-bottom-filters .iconUsers { display:inline-block; }
.grid-main-filters .iconUsers .icon, .grid-bottom-filters .iconUsers .icon { float:left; }
.grid-main-filters .fa-users, .grid-bottom-filters .fa-users { font-size:27px; line-height:19px; }
.table-filters-checkbox .unmarkAll { display:none; }
.filters-popup .modal-body > .row > .clearfix { border-bottom:1px solid; margin:0 0 15px; }
.filters-popup .modal-body > .row > .clearfix:last-child { border:none; margin:0; }
.filters-popup .modal-body > .row *[class*=col-] { padding-right:20px; padding-left:20px; }
.multi-data [class*=col-]:has(.filters-popup-cond) { position: relative; padding-left:40px; }
.filters-popup-cond { width:20px; line-height:13px; border-right:1px solid; height:calc(100% - 15px); float:left; position:absolute; left:-15px; }
.filters-popup-cond span { position:absolute; top:calc(50% - 11px); background-color:var(--dkf-white); padding:5px 0; }
.filters-popup-cond span.and { left:calc(100% - 13px); }
.filters-popup-cond span.or { left:calc(100% - 9px); }
.filters-popup-cond-and { float:left; border-right:1px solid; height:40px; padding-right:10px; margin-right:10px; }
.filters-popup-cond-and .and { float:left; margin-top:14px; }
.filters-popup strong { float:left; margin-top:14px; max-width: calc(100% - 50px); white-space: nowrap; overflow: hidden; text-overflow:ellipsis;  }
td.actions { text-align:right!important; border:none!important; position:sticky; right:5px; width:0!important; background-color:transparent!important; padding:6px 0 0 0!important; float:left; }
td.actions.opened { z-index:1; }
.table-condensed>tbody>tr>td:not(.checkData):not(.checkDataInTable):not(.actions).fixHeadersFirstTd { padding-left:9px!important; }
[data-checksOpened].table-condensed>tbody>tr>td:not(.checkData):not(.actions).fixHeadersFirstTd { padding-left:27px!important; }
.fieldActions { position:relative; }
.fieldActions > a { font-size:30px; padding:5px; opacity: 0; }
.fieldActionsWrapper { display:none; position:absolute; right:2px; top:calc(50% - 20px); padding:5px; border-radius:var(--dkf-radius-sm); box-shadow:var(--dkf-shadow-md); }
.fieldActionsWrapper > .btn-group { display:inline-flex; align-items:center; }
.fieldActionsWrapper .dropdown-submenu > a { padding: 3px 10px !important; }
.fieldActionsWrapper .dropdown-submenu .dropdown-menu {	top: 0; left: 0; transform: translateX(-100%); margin-top: -1px; }
.master-data .fieldActionsWrapper { padding:3px!important; }
.master-data .fieldActionsWrapper { top:calc(50% - 13px); }
.master-data .fieldActionsWrapper > .btn-group > a, .master-data .fieldActionsWrapper > a, .master-data .fieldActionsWrapper .big-action { font-size:15px!important; padding:0 3px; }
.master-data .fieldActions > a { font-size:18px; padding:2px; }
.master-data .panel-body > .row { clear:both; }
.fieldActionsWrapper > .btn-group > a, .fieldActionsWrapper > a, .fieldActionsWrapper .big-action { padding:0 4px; font-size:18px; display:inline-flex; align-items:center; transition:color var(--dkf-transition-fast); }
/* ============================================================
   Menu de acciones de fila (.fieldActionsWrapper .dropdown-menu):
   mismo chrome que el dropdown generico #user-menu — tarjeta con
   sombra, columna de icono fija (18px), hover con tokens y accion
   destructiva en rojo. Ver docs/ux/dropdown-menu-bestpractices.md. */
.fieldActionsWrapper .dropdown-menu {
	padding:6px; min-width:210px;
	border:1px solid var(--dkf-border-light);
	border-radius:var(--dkf-radius);
	box-shadow:var(--dkf-shadow-lg);
}
.fieldActionsWrapper .dropdown-menu > li > a {
	display:flex; align-items:center; gap:11px;
	padding:8px 12px; border-radius:var(--dkf-radius-sm);
	color:var(--dkf-gray-700); white-space:nowrap;
	transition:background var(--dkf-transition-fast), color var(--dkf-transition-fast);
}
.fieldActionsWrapper .dropdown-menu > li > a:not(.text-danger) > span:first-child {
	flex:0 0 18px; width:18px; text-align:center; font-size:15px; color:var(--dkf-gray-500);
}
.fieldActionsWrapper .dropdown-menu > li > a:not(.text-danger):hover,
.fieldActionsWrapper .dropdown-menu > li > a:not(.text-danger):focus {
	background:var(--dkf-bg-hover); color:var(--dkf-primary);
}
.fieldActionsWrapper .dropdown-menu > li > a:not(.text-danger):hover > span:first-child,
.fieldActionsWrapper .dropdown-menu > li > a:not(.text-danger):focus > span:first-child { color:var(--dkf-primary); }
/* Accion destructiva: rojo del sistema, no el rojo de Bootstrap.
   !important para ganar a la utilidad .text-danger de BS. */
.fieldActionsWrapper .dropdown-menu > li > a.text-danger { color:var(--dkf-danger-dark)!important; }
/* icono del destructivo tambien en rojo (gana a la utilidad .text-danger de BS) */
.fieldActionsWrapper .dropdown-menu > li > a.text-danger > span:first-child { flex:0 0 18px; width:18px; text-align:center; font-size:15px; color:var(--dkf-danger-dark)!important; }
.fieldActionsWrapper .dropdown-menu > li > a.text-danger:hover,
.fieldActionsWrapper .dropdown-menu > li > a.text-danger:focus { background:var(--dkf-bg-hover); }
.fieldActionsWrapper .dropdown-menu .divider,
.fieldActionsWrapper .dropdown-menu .dropdown-divider { margin:5px 4px; border-color:var(--dkf-border-light); background:var(--dkf-border-light); }
.list-check-options { display:none; }
.grid-bottom-filters .exportButtons { padding-top:10px!important; }
.separadorUsers { width:10%; }
.separadorActions { width:17%; }
.separadorProcess { width:29%; }
.separadorFullText { width:29%; }

/* Hover Icons listado */
.iconRefresh a:hover > span, .separador a:hover, #allUser:hover, .gridMoreMenu label:hover span { color:var(--dkf-primary)!important; }
#meUser.active:hover, #allUser.active:hover { color:#566cc3!important; }

/* Pagination */
.separadorPag { float:right; margin: 17px 13px 10px 0; white-space: nowrap; display: flex; }
.separadorPag * { text-transform:uppercase; float:left; display:inline-block; margin:auto 5px; font-size:11px!important; }
.separadorPag span {  margin-top:4px; }
.separadorPag a { margin-top:6px; }
.separadorPag .form-control { max-width:48px; text-align:center; padding:3px 3px!important; }
.separadorPag select.form-control {
	padding-right:16px!important;
}
select.form-control {
	background-color: var(--bs-body-bg);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C%21--%21Font%20Awesome%20Free%206.7.2%20by%20@fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M201.4%20374.6c12.5%2012.5%2032.8%2012.5%2045.3%200l160-160c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L224%20306.7%2086.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l160%20160z%22/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center right;
	background-size: 16px 12px;
	padding-right:16px!important;
	padding-left: 10px!important;
}
.separadorPag select { margin-right:10px!important; }
.separadorPag input { width:30px; margin-right:0!important; }
.separadorPag .label-num-reg { color:var(--dkf-black)!important; font-weight:bold; margin-left:10px; }
.targetPagination { float:right; }

.listPagPrev:not(.disabled), .listPagNext:not(.disabled) { cursor:pointer; }
.listPagPrev.disabled, .listPagNext.disabled { cursor:no-drop; }
.tablesorter-header { outline:none; }
.tablesorter-icon { float:right; margin:9px 5px 0; }
.actions .tablesorter-header-inner { display:none; }

@media (max-width: 1292px) {
	.grid-main-filters .separador .icon, .grid-bottom-filters .separador .icon { padding:0 5px; }
}
@media (max-width: 1022px) {
	.grid-main-filters .separador, .grid-bottom-filters .separador { padding: 15px 10px; }
}
@media (max-width: 1058px) {
	.grid-main-filters .separador .icon, .grid-bottom-filters .separador .icon { font-size:16px; }
	.grid-main-filters .fa-users, .grid-bottom-filters .fa-users { font-size:22px; line-height:16px; }
}

@media (max-width: 677px) {
	.grid-main-filters .separador .icon, .grid-bottom-filters .separador .icon { font-size:16px; }
	.grid-main-filters .fa-users, .grid-bottom-filters .fa-users { font-size:22px; line-height:16px; }
}

/* Componente Archivos */
.file-uploaded .file-cover, .file-uploaded .file-cover .link, .file-uploading { float:left; width:100%; }
.file-uploaded .file-cover { height:150px; background-position: center; border:1px solid; background-size:cover; background-repeat:no-repeat; position:relative; }
.file-uploaded .file-cover-complete-images { height:auto; }
.file-button-bottom, .file-button-top, .file-button-move { background-color:rgba(255, 255, 255, 0.8); border-radius:4px; cursor:pointer; color:var(--dkf-gray-900)!important; }
.file-button-move { cursor:move }
.file-uploaded .file-cover > .btn-group { bottom:5px; right:5px; position:absolute; display:none; }
.file-uploaded .file-cover > .btn-group .btn { border:1px solid var(--dkf-gray-600); }
.file-uploaded .file-cover:hover > .btn-group { display:block; }
.file-uploading { border:none !important; }
.file-uploading .fa-spin { font-size:30px; margin-bottom:5px; }
.file-uploading > div { text-align:center; position:absolute; left:0; top:0; width: 100%; height: 100%; }
.file-icon .file-uploading > div { height: calc(100% + 5px); }
.file-icon { font-size:130px; max-width:50px; float:left; position:relative; }
.file-icon.fa-circle-play { left:calc(50% - 65px) }
.file-icon-wrapper { float:left; position:relative; width:100%; margin-bottom:5px; }
.file-icon-options { position:absolute; bottom:5px; right:5px; }
.file-icon-info { float:left; margin:15px 0 0 10px; width:calc(100% - 60px); overflow: hidden; }
.file-icon-info > span { width:100%; float:left; }
.file-icon-info > span:first-child { text-overflow: ellipsis; white-space: nowrap; overflow:hidden; line-height:14px; }
.file-icon-info > span:last-child { color:var(--dkf-gray-500); margin-top:10px; }
#popover_percent, .file-uploading .fa-spin { color:var(--dkf-white); }
.popover-content #popover_percent { color:var(--dkf-gray-900); }
.formUploadListFiles img { width:100%; height:auto; border:1px solid var(--dkf-gray-200)!important; }
.formUploadListFiles .file-name { font-size:14px; margin:5px 0; text-overflow: ellipsis; overflow:hidden; white-space:nowrap; padding:3px 0; }
.formUploadListFiles .file-icon img { width:100%; border:none!important; margin-top:7px; }
.formUploadListFiles.threadDocuments .file-icon img { margin-top:12px; }
.formUploadListFiles .uploadImages { margin-bottom:10px; }
.isImagePreview .file-uploaded .file-cover { width:auto; height:auto; }
.isImagePreview form { margin-bottom:0!important; }
.file-icon #popover_percent { font-size:13px; color:var(--dkf-white); }
.panel-title .fileFolderSelector { margin-left:10px; font-size:12px; }
[data-isfile="0"] .file-uploading { height:150px; position:relative; }
[data-isfile="0"] .fa-spin { font-size:45px!important }
[data-isfile="0"] .file-uploading .dokuLoader { height: 20px; width: 20px; left:calc(50% - 10px); top:calc(50% - 10px); }
[data-isfile="0"] .file-uploading #popover_percent { position:absolute; top:50%; left:calc(50% - 16px); }
[data-isfile="1"] .file-uploading .dokuLoader { position:absolute; top:calc(50% - 12px); left:calc(50% - 10px); }

/* Botones */
button, .btn { /*text-transform: uppercase;*/ }
button:not(.btn-xs), .btn:not(.btn-xs) { font-size:13px; }
.flexgrid-filter button { height:30px!important; }
.btn-group-xs > .btn, .btn-xs {	padding: 1px 5px; font-size: 12px; line-height: 1.5; }

/* Pestañas */
.tab-content { border:none; padding:30px 15px; }
.tabs-left { display:flex; }
.tabs-left .tab-content { padding-top:0!important; }
.tabs-left .nav-tabs { flex-direction: column!important }
.tabs-left .nav-tabs li a { white-space: nowrap; }
/* Un contenedor puede cambiar el aspecto de sus pestanas via custom properties
   (--dkf-tab-bg, --dkf-tab-bg-active, --dkf-tab-color, --dkf-tab-color-active,
   --dkf-tab-radius, --dkf-tab-underline-width, --dkf-tab-font-size) sin anadir
   marcas de prioridad nuevas; ejemplo: .freemium-catalog-hub (pildoras del catalogo freemium). */
.nav-tabs > li { margin-bottom:0!important; }
.nav-tabs > li > a { background-color:var(--dkf-tab-bg, transparent)!important; border:none!important; border-bottom: var(--dkf-tab-underline-width, 4px) solid var(--dkf-tab-underline, transparent)!important; font-weight:normal!important; box-shadow:none!important; font-size:var(--dkf-tab-font-size, 15px)!important; margin:0!important; padding: 10px 15px; display: block; transition: color var(--dkf-transition-fast), border-bottom-color var(--dkf-transition-fast); }
.nav-tabs > li.active > a { background-color:var(--dkf-tab-bg-active, transparent)!important; border:none!important; border-bottom: var(--dkf-tab-underline-width, 4px) solid!important; font-weight:normal!important; }
/* Affordance de hover: subrayado gris previo al azul de activa (via custom property para no sumar !important) */
.nav-tabs > li:not(.active) > a:hover { --dkf-tab-underline: var(--dkf-gray-200); }
/* Foco visible para navegación por teclado (a11y) */
.nav-tabs > li > a:focus-visible { outline:2px solid var(--dkf-primary); outline-offset:-3px; border-radius:var(--dkf-radius-sm); }
.tab-buttons { float:right!important; }
.tab-buttons button { margin-top:7px; background-color:inherit; border:none; padding:2px 4px; line-height:normal; border-radius:0; }
.tab-buttons button * { font-size:20px; color:var(--dkf-gray-300); line-height:normal; }
.tab-buttons button:active { box-shadow:none!important; }
.tab-buttons button.active * { color:var(--dkf-white); }
.tab-buttons button:focus { outline:none!important; }

/* Componente Countdown */
.countdown { border:1px solid; border-radius:10px; padding:10px; float:left; width:100%; background-color:var(--dkf-white); }
.countdown label { margin: 5px 5px 0 2px; width:100%; float:left; }
.countdown > i { float:left; font-size:25px; margin:3px 5px 0 0; }
.countdown > p { float:left; margin-top:10px; font-size:30px; }
.countdown .btn { float:right; }

/* Componente Gráficos */
.graph_layer { margin:0; border:1px solid; border-radius:4px; padding:10px; }
.graph_layer label { text-align:left!important; text-transform: uppercase; font-weight:bold; }
.graph_dataset { border:1px solid; border-radius:10px; margin-bottom:15px!important; }
.graph_dataset:last-child { margin-bottom:0; }
.graph_dataset_remove { float:right; margin:0 15px 15px; }
.graph_new_dataset_link { width:100%; border:1px dashed; padding:20px; float:left; font-size:20px; text-align:center; margin: 10px 0 20px 0; cursor:pointer; }
.equal-height-graphLayer { margin-top:10px; }

/* Componente Card */
.card { width:100%; float:left; min-height:100px; position:relative; margin-bottom:15px; padding:0 15px; border:1px solid; border-radius:10px; cursor:pointer; overflow:hidden; box-shadow: 0px 3px 5px -3px rgba(0,0,0,0.30); }

.card > div:not(.card_box_top_left):not(.card_box_bottom_right) { position:relative; z-index:1; }
.card-icon-wrapper { padding:0; }
.card-text-wrapper { position:relative; }
.card .fa-spinner.fa-spin { font-size:14px; }
.card-icon { padding:15px 0; float:left; width:100%; font-size:45px; text-align:center; }
.card-text { padding-top:15px; padding-bottom:15px; line-height:18px; text-transform: uppercase; /*word-break: break-all;*/ }
.normal-break.card-text { word-break: normal; }

/* max(): en tarjetas muy estrechas calc(100% - 40px) baja de un dígito y break-all parte el número letra a letra */
.card .card-number { font-size:35px!important; font-weight:normal!important; margin-top:10px; width: max(calc(100% - 40px), 65%); word-break: break-all; line-height: 32px; }
.card .card-number.no-icon { width: 100%; }
.card:not(.card-document) .panel-body { cursor:pointer; }
.card-document .panel-body { position:relative; }
.card-document .card-actions { position:absolute; right:5px; bottom:5px; }
.card-circle, .card-circle-1, .card-circle-2, .card-circle-3 { border-top-left-radius: 100%; width:50px; height:50px; position:absolute; bottom:-5px; right:-5px; }
.card-circle-1 { opacity: 0.3 }
.card-circle-2 { opacity: 0.5; bottom:-15px; right:-15px; border-top-left-radius: 85%; }
.card-circle-3 { opacity: 0.7; bottom:-25px; right:-25px; border-top-left-radius: 70%; }
.card:hover .card_box_top_left, .card:hover .card_box_bottom_right { width:40%; height:40%; border-color:var(--dkf-link); }
.card_box_top_left, .card_box_bottom_right { width:0; height:0; position:absolute; transition: all 0.2s ease; z-index:0; }
.card_box_top_left { border-top:1px solid transparent; border-left:1px solid transparent; top:0; left:0; border-top-left-radius: 10px; }
.card_box_bottom_right { border-bottom:1px solid transparent; border-right:1px solid transparent; bottom:0; right:0; border-bottom-right-radius: 10px; }
.form_group .card_box_bottom_right { bottom:15px!important; }
.card-content { cursor: pointer; padding: 20px; width: 100%; float:left; position:relative; }
/* max(): con menos de 58px de contenido el calc daba width:0 y el título caía en vertical, letra a letra */
.card-content label { text-transform:uppercase; font-weight: 400!important; width: max(calc(100% - 58px), 55%); /*word-break: break-all;*/ line-height: 15px; }
.card-content label.no-icon { width: 100%; }
.card-content .card-icon { position:absolute; top: 7px; right: 20px; width:auto; text-align: inherit; max-width:50px; }
.card-content p:not(.card-number) { float:left; width: 100%; font-weight: 100!important; }

/* FileUpload */
.file_upload { position:relative; overflow: hidden; }
.file_upload input { border:none; left:0; right:auto; width:100%; height:100%!important; position:absolute; top:0; margin:0; opacity:0; cursor: pointer; }
.file_upload iframe, .file_upload button { display:none; }

/* Foro */
#forumList .panel { border:none!important; }



#forumBox > div:not(.table-responsive):not(.doubleScrollFixed) { margin:20px 0; }
#forumBox > div:first-child { margin-top:0; }
 .widget-box-2 > div > div.forumIcon { padding-top:25px!important; }
.forumIcon { width:100px; height:100px; text-align:center; }
.forumIcon > span { display:inline-block; color:var(--dkf-white); }
.forumLetter { font-size:60px!important; color:var(--dkf-white); text-transform:uppercase; padding-top:17px!important; }
.threadInfo { margin:10px 0 10px 20px!important; }
.threadInfo > a { font-size:16px; font-weight:bold; }
.forum_last_thread { font-style: italic!important; font-weight:bold; }
#forumThreadList .file-icon-info { overflow:visible; }
#forumThreadList .file-icon-info > span { margin-bottom:5px; }

/* Page Layouts */
.page-layout-wrapper { float:left; width:100px; margin: 0 20px; }
.page-layouts { border:4px solid; width:100px; height:100px; margin:0 auto 10px; cursor:pointer; }
.page-layouts > div { display:none; height:100%; float:left; border-right:2px solid; }
#page-layout2 .pl-1 { display:block; width:50%; }
#page-layout3 .pl-1 { display:block; width:30%; }
#page-layout4 .pl-1 { display:block; width:70%; }
#page-layout7 .pl-1 { display:block; width:33%; }
#page-layout7 .pl-2 { display:block; width:33%; }
#page-layout8 .pl-1 { display:block; width:75%; }
#page-layout8 .pl-2 { display:block; width:25%; border-right:none; }
#page-layout9 .pl-1 { display:block; width:25%; }
#page-layout9 .pl-2 { display:block; width:75%; border-right:none; }
/* Layouts 10-15: franja superior comun */
#page-layout10 .pl-1, #page-layout11 .pl-1, #page-layout12 .pl-1, #page-layout13 .pl-1, #page-layout14 .pl-1, #page-layout15 .pl-1 { display:block; width:100%; height:30%; border-right:none; border-bottom:2px solid; }
#page-layout10 .pl-2 { display:block; width:50%; height:70%; }
#page-layout11 .pl-2 { display:block; width:30%; height:70%; }
#page-layout11 .pl-3 { display:block; width:70%; height:70%; border-right:none; }
#page-layout12 .pl-2 { display:block; width:70%; height:70%; }
#page-layout13 .pl-2 { display:block; width:50%; height:40%; }
/* Layouts 13-15: franja inferior comun */
#page-layout13 .pl-3, #page-layout14 .pl-3, #page-layout15 .pl-3 { display:block; width:100%; height:30%; border-right:none; border-top:2px solid; }
#page-layout14 .pl-2 { display:block; width:30%; height:40%; }
#page-layout15 .pl-2 { display:block; width:70%; height:40%; }

/* ProgressBar */
.file_upload { position:relative; }
.file_upload .progressBar { position:absolute; bottom:0; left:0; width:0; height:5px; background-color:rgba(0, 255, 0, 1); }
.file_upload .progressPercent { position:absolute; bottom:2px; right:5px; font-size:13px; }

/* Progress bar circle */
.progress-circle { width: 70px; height: 70px; line-height: 70px; background: none; margin: 0 auto; box-shadow: none; position: relative; }
.progress-circle:after{ content: ""; width: 100%; height: 100%; border-radius: 50%; border: 5px solid var(--dkf-white); position: absolute; top: 0; left: 0; }
.progress-circle > span { width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1; }
.progress-circle .progress-circle-left{ left: 0; }
.progress-circle .progress-circle-bar{ width: 100%; height: 100%; background: none; border: 5px solid; position: absolute; top: 0; }
.progress-circle .progress-circle-left .progress-circle-bar{ left: 100%; border-top-right-radius: 80px; border-bottom-right-radius: 80px; border-left: 0; -webkit-transform-origin: center left; transform-origin: center left; }
.progress-circle .progress-circle-right { right: 0; }
.progress-circle .progress-circle-right .progress-circle-bar{ left: -100%; border-top-left-radius: 80px; border-bottom-left-radius: 80px; border-right: 0; -webkit-transform-origin: center right; transform-origin: center right; transform: rotate(0deg); }
.progress-circle .progress-circle-value{ width: 90%; height: 90%; border-radius: 50%; font-size: 15px; line-height: 65px; text-align: center; position: absolute; top: 5%; left: 5%; }
.progress-circle .progress-circle-bar{ border-color: var(--dkf-success); }
.progress-circle .progress-circle-left .progress-circle-bar{ transform: rotate(0deg); }
.progress-circle .progress-circle-disabled { position:absolute; left: 0; width: 70px; height: 70px; border-radius:50%; border: 5px solid; }

/* Paleta de colores */
.color1 { background-color: #eca400; }
.color2 { background-color: #006992; }
.color3 { background-color: #27476e; }
.color4 { background-color: #001d4a; }
.color5 { background-color: #ff7d00; }
.color6 { background-color: #78290f; }
.color7 { background-color: #15616d; }
.color8 { background-color: #bf1363; }
.color9 { background-color: #0e79b2; }
.color10 { background-color: var(--dkf-primary-hover); }
.color11 { background-color: #f39237; }
.color12 { background-color: #c32f27; }
.color13 { background-color: #004b23; }
.color14 { background-color: #800f2f; }
.color15 { background-color: #084c61; }
.color16 { background-color: #323031; }
.color17 { background-color: #5a189a; }
.color18 { background-color: #ef476f; }
.color19 { background-color: #d68c45; }
.color20 { background-color: #011627; }
.color21 { background-color: #ad2831; }
.color22 { background-color: #593d3b; }
.color23 { background-color: #72b01d; }
.color24 { background-color: #5a7825; }
.color25 { background-color: #445c19; }

/* Repositorio */
.content.fileManager > .row { padding:0 15px!important; }
#currentFolderName { margin-top:10px!important; }
#currentFolderName li { margin-left: 10px; }
#currentFolderName li:not(:first-child) { margin-top:1px; }
#currentFolderName li:not(:first-child):before { font-family: "Font Awesome 6 Pro"; content:'\f105'; }
#currentFolderName li:not(:first-child) a { margin-left:10px; }
.browser-folders * { font-size:14px!important; }
.folders, .files { padding:0!important; }
.files { padding-left:5px!important; }
.browser-folders .subtree ul { padding-left: 5px; }
.browser-folders ul { margin:7px; }
#repoModesButtons .file_upload { cursor:pointer; width:auto!important; padding:0 4px!important; margin:6px 5px 0 0!important; }
#repoModesButtons .file_upload:hover { cursor:pointer!important; }
#repoModesButtons .file_upload div { font-size:13px; line-height:26px; }
.itemGallery { position:relative; z-index:11; height:auto!important; border:none!important; width:100%!important; padding:0!important; max-height: 82px; overflow:auto; }
.itemGallery .check { position:absolute; padding:1px !important; }
.itemGallery .file-icon-options { bottom:0; right:0; }
.itemIconRepository { float:left; width:16%; }
.process_box.box_gallery { float:left; width:100%; }
.box_gallery .titulo { overflow:hidden; text-overflow: ellipsis; white-space: nowrap; width:100%; float:left; }
.box_gallery .detalles { width:calc(84% - 30px); float:left; margin:0 0 0 10px!important; }
.box_gallery { border-radius:6px; }
.folder-color { color:#ffda6b; }
#browser-files .folder-color { margin-right: 5px; margin-left:2px; font-size:18px; }
.document-viewer-edit-google-drive { display:none; }

/* Mis comunidades */
.communityPortletList { margin:15px 0; background-color:var(--dkf-white); height:60px; border-radius: 30px; clear:both; box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); }
.communityPortletList:first-child { margin-top:0!important; }
.communityPortletList .avatar img { width:50px; height:50px; margin:5px; }
.communityPortletList strong { font-size:16px!important; }
.community-icons { float:right; font-size:25px; position:relative; z-index:1; }
.community-icons > * { margin:18px 5px; }
.community-icons > *:last-child { margin-right:20px!important; }
.community-name, .community-description { float:left; margin-left:10px!important; }
.community-name { margin:15px 0 5px; }
.community-name.community-nodesc { margin-top:22px; }

/* Widgets */
.widget-box-2 { box-shadow: 0 0 2px 0 rgba(0,0,0,0.5); }
.process_box { padding:10px; position:relative; margin:10px auto; box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.2); }
.process_box hr { width:50px; }
.process_box .widget-labels  { padding:0!important; position:absolute; top: 5px; left:10px; }
.process_box .widget-labels * { font-size:11px; }
.card_bow_wrapper { position:relative; }
.card_bow_wrapper .widget-options { float:right; position:absolute; top:20px; right:25px; z-index:2; }
.card_bow_wrapper .widget-options a { margin-left:5px; }
.card_bow_wrapper .widget-options i { font-size:20px; }
.process_box .widget-description { padding: 0 10px; }
.process_box .widget-description p { margin:5px 0 0; display:inline-block; }
.process_box:hover .process_box_top_left, .process_box:hover .process_box_bottom_right, .hoverBorderEffect:hover .process_box_top_left, .hoverBorderEffect:hover .process_box_bottom_right { width:40%; height:40%; border-color:var(--dkf-link); }
.process_box_top_left, .process_box_bottom_right { width:0; height:0; position:absolute; transition: all 0.2s ease; }
.process_box_top_left { border-top:1px solid transparent; border-left:1px solid transparent; top:0; left:0; border-top-left-radius: 6px; }
.process_box_bottom_right { border-bottom:1px solid transparent; border-right:1px solid transparent; bottom:0; right:0; border-bottom-right-radius: 6px; }
.ticket_description { margin-top:5px; line-height:13px; }


.blackLetter { color:var(--dkf-gray-900)!important; }
.whiteLetter { color:var(--dkf-white)!important; }

/* Tarjetas */
.card-icon { border-radius:0; }
/* white-space normal: con nowrap el "vs. periodo anterior" se recortaba en tarjetas estrechas en vez de bajar de linea */
.cardPreviousPeriod { float:left; white-space: normal; width:100%; }
.cardPreviousPeriod span, .cardPreviousPeriod p { float:left; }
.cardPreviousPeriod p { width: auto!important; color:darkgrey; margin: 2px 0 0 5px!important; }
.cardPreviousPeriod .label { font-size:13px; }

/* Paneles */
.panel-title { font-size:18px!important; }
.panel-title .fal:not(.panel-icon):not(.fa-spin), .panel-title .fas:not(.panel-icon):not(.fa-spin), .panel-icon-collapse { font-size:17px!important; line-height:12px!important; }
.panel-title .panel-icon { font-size:14px!important; }

.btn-gray *, .btn-group > .btn-gray { color:var(--dkf-gray-800)!important; }

/* Preferencias de usuario */
#sidebarRight-wrapper.toggled { transition:right .4s ease; right:0; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); }
#sidebarRight-wrapper h1 { font-size:17px!important; margin-top:14px; text-transform: uppercase; font-weight:bold; }
#sidebarRight-wrapper { overflow-y:auto; overflow-x:hidden; max-height:100%; position:fixed; z-index:1064; top:0; right:-310px; width:300px; padding:0 13px; background-color:var(--dkf-white); box-shadow: -4px 0px 5px 0px rgba(0,0,0,0.4); border-bottom-left-radius: 10px; }
#sidebarRight-wrapper > a { position:absolute; top:17px; right:10px; }
#sidebarRight-wrapper [data-zoom] { outline:0!important; }

/* Shortcuts */
.mleft5 { margin-left:5px!important; }
.mleft10 { margin-left:10px!important; }
.mright5 { margin-right:5px!important; }
.mright10 { margin-right:10px!important; }
.mtop10 { margin-top:10px!important; }
.mbottom0 { margin-bottom:0!important; }
.mbottom10 { margin-bottom:10px!important; }
.mbottom20 { margin-bottom:20px!important; }
.mtop20 { margin-top:20px!important; }
.mtop30 { margin-top:30px!important; }
.mtop40 { margin-top:40px!important; }
.nowrap { white-space:nowrap!important; }
.overflow-x-hidden { overflow-x: hidden!important; }

/* checkSwitch */
.checkboxSwitch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 20px;
}
.checkboxSwitch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.checkboxSlider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--dkf-gray-300);
	transition: .4s;
}
.checkboxSlider:before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 3px;
	bottom: 3px;
	background-color: var(--dkf-white);
	transition: .4s;
}
input:checked + .checkboxSlider:before {
	transform: translateX(20px);
}
.checkboxSlider.round {
	border-radius: 20px;
}
input:checked + .checkboxSlider {
	background-color: #2196F3;
}
.checkboxSlider.round:before {
	border-radius: 50%;
}

.checkboxSwitch.checkboxSwitchSmall {
	width: 20px;
	height: 10px;
}
.checkboxSwitch.checkboxSwitchSmall .slider:before {
	height: 8px;
	width: 8px;
	left: 1px;
	bottom: 1px;
}
.checkboxSwitchSmall input:checked + .slider:before {
	transform: translateX(10px);
}
.checkboxSwitchSmall .checkboxSlider.round {
	border-radius: 10px;
}
/* !checkSwitch */

/* Acciones versión movil 800px */
@media (max-width: 800px) {

	.hideMobile { display:none!important; }

	/* Menú superior y lateral */



	/* El rail lateral (#sidebar-wrapper) mide 48px (regla global), no 40 */
	#page-content-wrapper { width: calc(100% - 48px)!important; margin-left: 48px!important; }
	#sidebar-wrapper { z-index:3; }

	/* Quitar espaciados en pestañas */
		.tab-content { padding-left:0!important; padding-right:0!important; }
	/* Todos los botones en su versión pequeña */
		.btn, .wfButtonsCss button, .actionsOnDesigner .btn { padding:1px 5px!important; font-size:12px!important; line-height:1.5!important; border-radius:3px; }
	/* Espaciados de debajo de inputs minificados */
		form input[type="text"], form input[type="number"], form input[type="password"], form textarea, form select, .filters-popup .form-control { margin-bottom:5px!important; }
		form .input-group input, form .input-group select { margin-bottom:0!important; }
	/* Paneles */
		.panel-heading .fa-circle { display:none; }
		.panel-title { font-size:16px!important; }
		.button-on-heading { margin:0 0 11px 0!important; }
		.button-on-heading .btn { margin-right:0!important; }
	/* Botones WF */
		.wfButtonsCss { position:static; padding: 15px; }
		.wfButtonsCss button, .actionsOnDesigner .btn { margin-bottom:5px; }

	/* Tablas en modo mobil */
		.grid .table-responsive,
		.gridSelector .table-responsive {
			padding: 10px;
			border: none;
			background-color: var(--dkf-bg-section); /* Fondo ligero para que las tarjetas resalten */
		}
		.grid .table-responsive tr,
		.gridSelector .table-responsive tr {
			background: var(--dkf-white);
			border: none;
			position: relative;
			margin-bottom: 20px; /* Más espacio entre tarjetas */
			border-radius: 12px; /* Esquinas más redondeadas */
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra suave para dar profundidad */
			overflow: hidden;
			display: block;
			width: 100%;
			float: left;
		}
		.grid .table-responsive td,
		.gridSelector .table-responsive td {
			border: none;
			border-bottom: 1px solid var(--dkf-bg-header) !important;
			padding: 12px 15px;
			display: block;
			width: 100%;
			text-align: left !important; /* Forzamos alineación a la izquierda */
			min-height: 45px;
		}
		.grid .table-responsive td:last-child,
		.gridSelector .table-responsive td:last-child {
			border-bottom: none !important;
		}
		.grid .table-responsive td:not(.actions):not(.table-no-result):before,
		.gridSelector .table-responsive td:not(.actions):not(.table-no-result):before {
			content: attr(data-th);
			display: block; /* Ponemos la etiqueta encima del valor */
			font-size: 11px;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			color: var(--dkf-slate-400); /* Color gris suave para la etiqueta */
			font-weight: 700;
			margin-bottom: 4px;
		}
		.grid .table-responsive td, .gridSelector .table-responsive td {
			font-size: 14px;
			color: #32325d; /* Color oscuro profesional */
			font-weight: 500;
		}
		.grid .table-responsive td[style*="text-align:center"] {
			text-align: left !important;
		}
		.grid .table-responsive .actions,
		.gridSelector .table-responsive .actions {
			width: auto !important;
			position: absolute;
			top: 10px;
			right: 10px;
			display: block; /* Siempre visible en móvil para accesibilidad */
			background: transparent;
		}
		.grid .table-responsive td span,
		.gridSelector .table-responsive td span {
			display: inline-block;
			padding: 4px 8px;
			border-radius: 6px;
			background: var(--dkf-gray-100);
			font-size: 12px;
		}
		.grid .table-responsive thead,
		.gridSelector .table-responsive thead {
			display: none;
		}
		/* Paginación: con float:right + nowrap desbordaba por la izquierda y la
		   etiqueta "por página" quedaba oculta tras el sidebar; pasa a fila
		   completa bajo los iconos y envuelve si no cabe */
		.separadorPag { float:left; clear:both; width:100%; margin:12px 0 0; flex-wrap:wrap; justify-content:center; white-space:normal; row-gap:6px; }
		.tableChecks { top:10px; }
		.checkboxOptions > div { margin-bottom: 5px; margin-top:5px; }
		.checkboxNumberWrapper { width:100%; }
		.checkboxNumber  { font-size:23px; }
		tfoot.aggregationsFoot { display:none; }

	/* Popup de firmar contrato */
		#signCertificate button, #uploadCertificate button, #signtUser button { width:100%; margin: 0 0 10px 0; float:left; }

	#body_login #loginBtn { width:100%; padding:10px!important; }

	/* QR Reader and Generator */
	.qrReader > button, .qrCreator > button { padding: 6px 10px !important; }
	.qrReaderElement #html5-qrcode-select-camera { max-width: 100%; margin-left: 0!important; }

	td .fieldActions { top:2px!important; }

}

.ownThemeWrapper ul { float:left; width:100%; border-radius:6px; overflow: hidden; cursor: pointer; border:1px solid var(--dkf-border-light); }
.ownThemeWrapper li { float:left; width:16.66%; min-height:50px; border-left:1px solid var(--dkf-border-light); }
.ownThemeWrapper li:first-child { border-left:none; }
.ownThemeWrapper .ownradio { margin:5px; }

.ownThemeWrapper .default li:nth-child(1){ background-color: #f1f1f1; }
.ownThemeWrapper .default li:nth-child(2){ background-color: var(--dkf-white); }
.ownThemeWrapper .default li:nth-child(3){ background-color: var(--dkf-white); }
.ownThemeWrapper .default li:nth-child(4){ background-color: #f7f7f7; }
.ownThemeWrapper .default li:nth-child(5){ background-color: var(--dkf-gray-50); }
.ownThemeWrapper .default li:nth-child(6){ background-color: var(--dkf-primary); }

.ownThemeWrapper .white_2 li:nth-child(1){ background-color: #f8edeb; }
.ownThemeWrapper .white_2 li:nth-child(2){ background-color: #f8f4f4; }
.ownThemeWrapper .white_2 li:nth-child(3){ background-color: var(--dkf-white); }
.ownThemeWrapper .white_2 li:nth-child(4){ background-color: #f7f7f7; }
.ownThemeWrapper .white_2 li:nth-child(5){ background-color: #d8e2dc; }
.ownThemeWrapper .white_2 li:nth-child(6){ background-color: #fec89a; }

.ownThemeWrapper .white_3 li:nth-child(1){ background-color: #eddcd2; }
.ownThemeWrapper .white_3 li:nth-child(2){ background-color: #efe8e4; }
.ownThemeWrapper .white_3 li:nth-child(3){ background-color: #fff1e6; }
.ownThemeWrapper .white_3 li:nth-child(4){ background-color: #d0c5bd; }
.ownThemeWrapper .white_3 li:nth-child(5){ background-color: #edede8; }
.ownThemeWrapper .white_3 li:nth-child(6){ background-color: #ff9263; }

.ownThemeWrapper .night li:nth-child(1){ background-color: #18191d; }
.ownThemeWrapper .night li:nth-child(2){ background-color: #33393f; }
.ownThemeWrapper .night li:nth-child(3){ background-color: #3d444b; }
.ownThemeWrapper .night li:nth-child(4){ background-color: #656565; }
.ownThemeWrapper .night li:nth-child(5){ background-color: #4e555d; }
.ownThemeWrapper .night li:nth-child(6){ background-color: #00c594; }

.ownThemeWrapper .night_2 li:nth-child(1){ background-color: #260701; }
.ownThemeWrapper .night_2 li:nth-child(2){ background-color: #2f0e07; }
.ownThemeWrapper .night_2 li:nth-child(3){ background-color: #38160d; }
.ownThemeWrapper .night_2 li:nth-child(4){ background-color: #411d13; }
.ownThemeWrapper .night_2 li:nth-child(5){ background-color: #454d55; }
.ownThemeWrapper .night_2 li:nth-child(6){ background-color: #774936; }

.ownThemeWrapper .night_3 li:nth-child(1){ background-color: #090103; }
.ownThemeWrapper .night_3 li:nth-child(2){ background-color: #210710; }
.ownThemeWrapper .night_3 li:nth-child(3){ background-color: #3c222b; }
.ownThemeWrapper .night_3 li:nth-child(4){ background-color: #69545a; }
.ownThemeWrapper .night_3 li:nth-child(5){ background-color: #3e464a; }
.ownThemeWrapper .night_3 li:nth-child(6){ background-color: #39590c; }

/* OWN THEME */

	.ownTheme .card,
	.ownTheme .table>:not(caption)>*>* {
		background-color:inherit;
		color:inherit;
	}

	.ownTheme select.form-control {
		background-image: var(--caret-icon);
	}

	.ownTheme .table-bordered>tbody>tr:first-child>td { border-top-width:0!important; }
	.ownTheme .filter-heading.focused .input-group-text:last-child { border-right-width:0!important; border-right-style:none!important; }
	.ownTheme thead .input-group, .ownTheme .filter-heading.focused .select2, .ownTheme .cke_chrome { border-radius: 5px!important; }
	.ownTheme .cke_button, .ownTheme .cke_combo_button { border-radius:4px; margin:0 1px; }
	.ownTheme .cke_toolbar_separator { display:none; }
	.ownTheme .cke_combo_on a.cke_combo_button, .ownTheme .cke_combo_off a.cke_combo_button:hover, .ownTheme .cke_combo_off a.cke_combo_button:focus, .ownTheme .cke_combo_off a.cke_combo_button:active { margin:0 1px!important; border:0; padding:1px!important; }
	.ownTheme .cke_toolgroup a.cke_button:last-child:after, .ownTheme .cke_toolgroup a.cke_button.cke_button_disabled:hover:last-child:after, .ownTheme .cke_combo:after { border:none; }

	/* Fondo oscuro de Fondo web */
	body.ownTheme, .ownTheme .sidebar-nav .nav-header, .ownTheme .node-line li:first-child, .ownTheme .kanban-group > div, .ownTheme #dokuflex-help-bar > div, .ownTheme .timings_list, .ownTheme .summernoteManualMentions, .ownTheme .gridMoreMenu .menu-item a, .ownTheme .popover-header {
		background-color: var(--theme-background-web) !important;
	}
	.ownTheme .bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after, .ownTheme .bs-popover-bottom>.popover-arrow::after {
		border-bottom-color:var(--theme-background-web)!important;
	}

	/* Fondo porlets / Fondo menú lateral */
	.ownTheme .portlet:not(.lightProcessIcon) .content, .ownTheme .portlet:not(.lightProcessIcon) .title, .ownTheme #sidebar-wrapper, .ownTheme #toggleMenuHandler, .ownTheme #menu-horizontal-dom, .ownTheme #main-menu-arrow-left, .ownTheme #main-menu-arrow-right, .ownTheme .navbar, .ownTheme #menu-brand, .ownTheme thead, .ownTheme .tablesorter-header,
	.ownTheme .panel.panel-default, .ownTheme .panel-default > .panel-heading:not(.panel-heading-background):not([style*=background-color]), /*.ownTheme fieldset .panel,*/ .ownTheme .dropdown-menu, .ownTheme .list-group-item, .ownTheme .modal-content,
	.ownTheme .select2-container--default .select2-search--dropdown .select2-search__field, .ownTheme .filters-popup-cond span, .ownTheme .filters-popup-cond-and span, .ownTheme #timmingsInfo .headerCalendar .headerElement.empty,
	.ownTheme .headerElement, .ownTheme div[data-group] .rowCalendar, .ownTheme div[data-group] .rowCalendar > div:not(.tooltip):first-of-type, .ownTheme .date-picker-wrapper .month-wrapper,
	.ownTheme .popover, .ownTheme .select2-container--default .select2-selection--multiple .select2-selection__choice, .ownTheme .gridFloating, .ownTheme .introjs-tooltip,
	.ownTheme #sidebarRight-wrapper, .ownTheme #dokuflex-help-bar, .ownTheme .checkboxBar, .ownTheme .filter-heading.focused label:not(.userSelected):not(.cmmSelected) span, .ownTheme .openProcessSidebar, .ownTheme #affectedWfSidebar,
	.ownTheme .workflowTimeline ul li .info:after, .ownTheme .modal-icon, .ownTheme #block_page_body, .ownTheme .wizardWfRow .wizardPanelOptions span {
		background-color:var(--theme-background-portlet)!important;
	}
	.ownTheme .popover.top>.arrow:after { border-top-color:var(--theme-background-portlet)!important; }
	.ownTheme .popover.bottom>.arrow:after { border-bottom-color:var(--theme-background-portlet)!important; }
	.ownTheme .popover.left>.arrow:after { border-left-color:var(--theme-background-portlet)!important; }
	.ownTheme .popover.right>.arrow:after { border-right-color:var(--theme-background-portlet)!important; }
	.ownTheme .processBreadcrumb:not(:last-child).active:not(.actual) .processBreadcrumbInfo:not(.processBreadcrumbCard):after {
		background-color:var(--theme-background-portlet)!important; /* flecha clip-path: fondo, no border-left */
	}
	.ownTheme #comunity-dropdown .dropdown-menu:after, .ownTheme .nav-icons > .dropdown-menu:after, .ownTheme #comunity-dropdown .dropdown-menu:after, .ownTheme #user-menu-desplegable .dropdown-menu:after
	{
		border-bottom-color:var(--theme-background-portlet)!important;
	}

	/* Color blanco letra */
	body.ownTheme, .ownTheme .nav-tabs a:hover, .ownTheme .filter-heading.focused .highlight, .ownTheme #newLayoutWrapper ul li:hover, .ownTheme #newLayoutWrapper ul li.active, .ownTheme .table-hover>tbody>tr:hover,
	.ownTheme #header-upper-menu a:not(.btn), .ownTheme #comunityMenu, .ownTheme #organizationMenu, .ownTheme .nav-user a,
	.ownTheme .menu-collapsed-hover a > span:last-child, .ownTheme #header-upper-bar h2, .ownTheme #header-nav-searcher, .ownTheme thead .form-control, .ownTheme thead .fa, .ownTheme thead .fal, .ownTheme thead .fas,
	.ownTheme thead label, .ownTheme .filter-heading .btn, .ownTheme .filter-heading .btn span, .ownTheme .filter-heading label, .ownTheme thead th label, .ownTheme thead th, .ownTheme .table-filters-checkbox ul li a, .ownTheme .sidebar-nav li > a, .ownTheme .fa-spinner.fa-spin, .ownTheme .filter-heading.focused .form-control, .ownTheme .filter-heading .input-group .predicted, .ownTheme .filter-heading .input-group .predicted *, .ownTheme .threadInfo a, .ownTheme .threadInfo label, .ownTheme .communityPortletList strong, .ownTheme .browser-folders *, .ownTheme .sidebar-nav li a, .ownTheme .menu-collapsed-hover a,
	.ownTheme .sidebar-nav li:not(.sidebar-brand).active .item-caret a, .ownTheme .sidebar-nav li.active > a, .ownTheme .form-control, .ownTheme #html5-qrcode-select-camera, .ownTheme .filter-heading .select2, .ownTheme .select2-container--default .select2-selection--single .select2-selection__rendered, .ownTheme .separadorPag .label-num-reg, .ownTheme .table-spinner .fa-spin, .ownTheme .fa-spin-small,
	.ownTheme form label:not(.has-error > label):not(.blackLetter):not(.whiteLetter):not([for*="menu-toggler"]), .ownTheme label:not(.has-error > label).control-label, .ownTheme .form label, /*.ownTheme .panel-heading:not(.panel-heading-background),*/ .ownTheme .alert-info, .ownTheme a.link:visited,
	.ownTheme .dropdown-menu>li>a, .ownTheme .fa-layer a, .ownTheme .fa-layer a span, .ownTheme #target .controlIcons a, .ownTheme #target .controlIcons a span, .ownTheme #forumList .panel-title,
	.ownTheme .chosen-container-active .chosen-choices li.search-field input[type=text], .ownTheme .chosen-container .chosen-results, .ownTheme .ui-state-hover, .ownTheme .ui-widget-content .ui-state-hover, .ownTheme .ui-widget-header .ui-state-hover, .ownTheme .ui-state-focus, .ownTheme .ui-widget-content .ui-state-focus, .ownTheme .ui-widget-header .ui-state-focus, .ownTheme .ui-button:hover, .ownTheme .ui-button:focus,
	.ownTheme .suggestionsResult > a:hover span, .ownTheme .ui-datepicker-title select, .ownTheme .verde, .ownTheme .field, .ownTheme .CodeMirror-line,
	.ownTheme .portlet:not(.lightProcessIcon) .title *:not(.tooltip-inner):not(button):not(button > span):not(.label):not(.label > span), .ownTheme .header-filter, .ownTheme #forumList .threadEdit a, .ownTheme #forumList .threadEdit a.fa-star, .ownTheme .separadorPag span, .ownTheme .separadorPag a, .ownTheme .separador a, .ownTheme .process_box .widget-description *,
	.ownTheme .targetDynamicList > ul > li label, .ownTheme .widget-box-2 a, .ownTheme .tree .tree-item, .ownTheme .tree .tree-folder .tree-folder-header, .ownTheme UL.jqueryFileTree A, .ownTheme #components .component, .ownTheme .form-horizontal#temp, .ownTheme #components .component-left .component-desc p, .ownTheme .form-horizontal#temp .component-desc p,
	.ownTheme #components .component-left, .ownTheme .form-horizontal#temp, .ownTheme #columns_list li a, .ownTheme .suggestionsResult a span.searchheading, .ownTheme .suggestionsResult a span,
	.ownTheme #sidebarRight-wrapper > a, .ownTheme #dokuflex-help-bar > a, .ownTheme .checkboxOptions > div, .ownTheme .processBreadcrumbInfo .processBreadcrumbCard strong, .ownTheme .processBreadcrumbInfo .processBreadcrumbCard span, .ownTheme .card-number:not(.whiteLetter):not([style]),
	.ownTheme .ui-tooltip-content, .ownTheme .autocomplete_fieldsname, .ownTheme .autocomplete_fieldsname a, .ownTheme .selectFaIConSearcher a, .ownTheme .timings_list, .ownTheme #file_uploadJsonNewProcess .text, .ownTheme .popover-content .submenu li a, .ownTheme .grid .filters .label,
	.ownTheme .panel-default > .panel-heading:not(.panel-heading-background):not([style*=background-color]), .ownTheme span.panel-default, .ownTheme .modal-content, .ownTheme #block_page_message p, .ownTheme .card, .ownTheme .big-panel, .ownTheme .list-group-item, .ownTheme #user-menu, .ownTheme #header-upper-bar .rolesMenu span
	{
		color: var(--theme-letter) !important;
	}
	/* Can't join to above selectors */
	.ownTheme ::placeholder { color: var(--theme-letter) !important; }

	.ownTheme .input-group-text, .ownTheme .input-group-text *, .ownTheme #comunity-menu .list-group a:not(.active), .ownTheme .widget-box-2 *, .ownTheme .divCalendar .calendarTopRow .navButtons i, .ownTheme .suggestionsResult > a, .ownTheme .date-picker-wrapper .month-wrapper table .day.toMonth.valid,
	.ownTheme .ui-state-default, .ownTheme .ui-widget-content .ui-state-default, .ownTheme .ui-widget-header .ui-state-default, .ownTheme .ui-button, .ownTheme html .ui-button.ui-state-disabled:hover, .ownTheme html .ui-button.ui-state-disabled:active, .ownTheme #menu-edit button, .ownTheme #block_page_message,
	.ownTheme .chosen-container-single .chosen-single, .ownTheme .portlet:not(.lightProcessIcon) a:not(.btn):hover, .ownTheme a.link:not(.btn):hover, .ownTheme .node-line li:first-child, .ownTheme .publicInboxText strong, .ownTheme .widget-item > label > a, .ownTheme #listComments .showMore, .ownTheme .listComments .showMore {
		color:var(--theme-letter);
	}
	.ownTheme .modal-footer .btn-light, .ownTheme .cke_button, .ownTheme .cke_reset_all, .cke_reset_all *, .ownTheme .cke_top.cke_reset_all a, .ownTheme .cke_reset_all textarea,
	.ownTheme a.cke_button_disabled:hover, .ownTheme a.cke_button_disabled:focus, .ownTheme a.cke_button_disabled:active, .ownTheme .cke_combo_on a.cke_combo_button, .ownTheme .cke_combo_off a.cke_combo_button:hover,
	.ownTheme .cke_combo_off a.cke_combo_button:focus, .ownTheme .cke_combo_off a.cke_combo_button:active, .ownTheme .addComponentLink, .ownTheme .sp-cancel {
		background-color:var(--theme-letter);
	}
	.ownTheme .panel { box-shadow: 0px 0px 4px 0px rgba(var(--theme-letter-rgb), 0.2); }

	/* Transparencias y omisión de borde */
	.ownTheme .filter-heading.focused label:not(.predicted), .ownTheme #header-nav-searcher, .ownTheme .alert-info:not(.alert-blue), [data-isFile="1"] .file-icon-wrapper:hover, .ownTheme .filter-heading .select2-container--default .select2-selection--single, .ownTheme #forumList .widget-color-3, .ownTheme .folders,
	.ownTheme #forumList .panel, .ownTheme .headerCalendar, .ownTheme #cardsInfoSheets .card-empty, .ownTheme .date-picker-wrapper table .caption .next:hover, .ownTheme .date-picker-wrapper table .caption .prev:hover, .ownTheme .well, .ownTheme #workflowDesignerLayer,
	.ownTheme .node-cloned .node-box, .ownTheme .filter-heading-icon, .ownTheme .tour-elements .highlight,
	.ownTheme .nav .open>a, .ownTheme .nav .open>a:focus, .ownTheme .nav .open>a:hover {
		background-color:transparent!important;
	}
	.ownTheme .panel, .ownTheme .panel-footer, .ownTheme .suggestionsResult > a, .ownTheme #block_page_content h1, .ownTheme #block_page_message, .ownTheme .filter-field {
		background-color:transparent;
	}
	.ownTheme .table-spinner td, .ownTheme .tree .tree-item, .ownTheme .tree .tree-folder {
		border:none!important;
	}

	/* Border inputs */
	.ownTheme .form-control, .ownTheme #user-show-profile-info, .ownTheme #user-show-organization, .ownTheme #html5-qrcode-select-camera, .ownTheme .suggestionsResult, .ownTheme .sp-colorize, .ownTheme .form-control:not(:focus):not(:hover), .ownTheme #html5-qrcode-select-camera:not(:focus), .ownTheme #newLayoutWrapper img,
	.ownTheme #header-searcher, .ownTheme #header-upper-bar .navbar-right, .ownTheme .nav-user, .ownTheme #header-nav-searcher, .ownTheme .grid-main-filters, .ownTheme .card,
	.ownTheme .cke_chrome, .ownTheme .list-group-item, .ownTheme .panel-default>.panel-heading, .ownTheme .widget-box-2, .ownTheme .predicted, .ownTheme .switch-with-text, .ownTheme .select2-container--default .select2-selection--single,
	.ownTheme .select2-dropdown, .ownTheme #listComments > div, .ownTheme .listComments > div, .ownTheme .panel-danger>.panel-heading, .ownTheme .panel-danger, .ownTheme .panel-default, .ownTheme .file-uploaded .file-cover,
	.ownTheme .workflowTimeline ul li .info, .ownTheme .countdown, .ownTheme .select2-container--default .select2-search--dropdown .select2-search__field,
	.ownTheme .select2-container--default .select2-selection--multiple, .ownTheme .select2-container--default.select2-container--focus .select2-selection--multiple, .ownTheme #target .component:not(.affected-wf-mandatory),
	.ownTheme .controlIcons, .ownTheme .fa-layer, .ownTheme .chosen-container-multi .chosen-choices, .ownTheme .chosen-container .chosen-drop, .ownTheme .process_box_lucene, .ownTheme .ui-widget.ui-widget-content,
	.ownTheme hr, .ownTheme .modal-header, .ownTheme .modal-footer, .ownTheme .popover-title, .ownTheme .filter-field, .ownTheme .well, .ownTheme #components .component, .ownTheme .form-horizontal#temp, .ownTheme .timeline > li > .timeline-panel,
	.ownTheme .chosen-container-single .chosen-single, .ownTheme .suggestionsResult img, .ownTheme #listComments .user img, .ownTheme .listComments .user img, .ownTheme #summaryConditionsListFields li a, .ownTheme .codeMirrorProcessBuilder .CodeMirror,
	.ownTheme .flexgrid .table-condensed>tbody>tr>td[data-td-flexgrid-checkbox], .ownTheme .invoiceLine .advancedInvoiceLineWrapper, .ownTheme .autocomplete_fieldsname, .ownTheme .showHistoryLayoutAdvice, .ownTheme #affectedWfList li,
	.ownTheme .portlet:not(.lightProcessIcon) .title .fa:after, .ownTheme .portlet:not(.lightProcessIcon) .title .fal:after, .ownTheme .portlet:not(.lightProcessIcon) .title, .ownTheme .selectFaIconSearcher, .ownTheme .kanban-element .panel-body > div,
	.ownTheme .designerTopButtons > div:first-child, .ownTheme #target .sortable, .ownTheme #file_uploadJsonNewProcess .file_upload, .ownTheme #header #main-menu > li, .ownTheme #header .haveSubMenu .submenu, .ownTheme .popover-content .submenu li,
	.ownTheme [data-multi-values-name="dynamicDesignForm"] .multi-form, .ownTheme #header-shortcuts-wrapper, .ownTheme .header-searcher-wrapper, .ownTheme .qrReader, .ownTheme .qrCreator, .ownTheme .qrCreatorResultWrapper img, .ownTheme .grid .filters .label,
	.ownTheme [data-multi-values-name="createPersonalFieldsForm"]  > .multi-data > .multi-form:not(:first-child), .ownTheme .select2-container--default .select2-selection--multiple, .ownTheme .employeesList ul li, .ownTheme .employeesList ul li > div:last-child > div,
	.ownTheme div[data-caltype="weeks"] th, .ownTheme div[data-caltype="weeks"] td > div, .ownTheme .shiftOnDaysWrapper .listShiftOnDays > ul > li, .ownTheme .shiftsLegend > ul > li, .ownTheme .shiftOnShiftPerDay > li, .ownTheme .signingsPerDayHeader,
	.ownTheme .qrSigningWrapper .generatedQrCode, .ownTheme .filter-field:has(.showOnMultiFilter:not(.d-none)) > .row:before, .ownTheme .filter-field:not(:first-child):before, .ownTheme .controlTimeReportTable tbody tr td span, .ownTheme .nav-control-time .button-signing-time,
	.owhTheme #modal-designer-conditions .col-no-set-value.conditions-with-nexus > .condition-ors, .ownTheme #signingReportDetail .commentsList li, .ownTheme .relationsDocuments ul li, .ownTheme .tableWeekQuadrant .day-cell, .ownTheme .controlTime .quadrantWeek .moreEmployees,
	.owhTheme .flexgrid table tbody tr td .form-control, .owhTheme .flexgrid table tbody tr td:not(:last-child), .ownTheme .flexgrid[data-vertical] table tbody tr td:last-child, .owhTheme .flexgrid table tbody tr, .ownTheme .wizardImportV2 ul li,
	.ownTheme .table-bordered>tbody>tr>td, .ownTheme .table-bordered>tbody>tr>th, .ownTheme .table-bordered>tfoot, .ownTheme .table-bordered>tfoot>tr>td, .ownTheme .table-bordered>tfoot>tr>th,
	.ownTheme .table-bordered>thead>tr>td, .ownTheme .table-bordered>thead>tr>th, .ownTheme .table-bordered>tbody>tr,
	.ownTheme .documentVersions li:not(:last-child), .ownTheme .processBreadcrumb .processBreadcrumbInfo, .ownTheme .graph_layer {
		border-color:var(--theme-border-inputs)!important;
	}
	.ownTheme .date-picker-wrapper, .ownTheme .ui-datepicker-title select {
		border-color:var(--theme-border-inputs);
	}
	.ownTheme .timeline > li > .timeline-panel:before {
		border-left-color:var(--theme-border-inputs)!important;
		border-right-color:var(--theme-border-inputs)!important;
	}

	.ownTheme .signature_layer, .ownTheme div[data-group], .ownTheme .processSelectedLayer {
		background-color:var(--theme-border-inputs)!important;
	}

	/* Fondo de inputs / Hover de menú lateral */
	.ownTheme .form-control, .ownTheme #html5-qrcode-select-camera, .ownTheme .menu-collapsed-hover, .ownTheme thead .form-control:not(.highlight), .ownTheme thead .form-control[readonly], .ownTheme thead .input-group-text, .ownTheme thead .input-group, .ownTheme .filter-heading.focused .highlight, .ownTheme .filter-heading .input-group, .ownTheme .table-striped>tbody>tr:nth-of-type(odd), .ownTheme .signingsPerDayBody > div:nth-of-type(odd), .ownTheme .tableWeekQuadrantBody > div:nth-of-type(odd), .ownTheme #affectedWfList li:not(.highlight):nth-of-type(even), .ownTheme #header-upper-menu .input-group-text, .ownTheme .checkData, .ownTheme .fieldActionsWrapper,
	.ownTheme .cke_top, .ownTheme .cke_reset_all, .ownTheme .dropdown-menu>li>a:focus, .ownTheme .dropdown-menu>li>a:hover, .ownTheme .select2-container--default .select2-results__option[aria-selected=true],
	.ownTheme .filter-heading .btn, .ownTheme .componentIcons, .ownTheme .select2-container--default .select2-selection--multiple, .ownTheme .chosen-container-multi .chosen-choices, .ownTheme .chosen-container .chosen-drop, .ownTheme .sp-container,
	.ownTheme .signature_layer canvas, .ownTheme .progress, .ownTheme #timmingsInfo div[data-group] header .headerText, .ownTheme div[data-group] .rowCalendar.totalCounts > div:not(.tooltip), .ownTheme .aggregateField,
	.ownTheme .ui-widget-content, .ownTheme .cke_autocomplete_panel, .ownTheme .cke_autocomplete_selected, .ownTheme .cke_autocomplete_panel > li:hover, .ownTheme .communityPortletList, .ownTheme .suggestionsResult, .ownTheme .ui-widget-header, .ownTheme .ui-datepicker-title select, .ownTheme .CodeMirror,
	.ownTheme .targetDynamicList ul li, .ownTheme .popover-title, .ownTheme #menu-edit button, .ownTheme #components .component, .ownTheme .form-horizontal#temp, .ownTheme .workflowColHeader, .ownTheme .timeline > li > .timeline-panel,
	.ownTheme .chosen-container-single .chosen-single, .ownTheme option:checked, .ownTheme #columns_list li, .ownTheme .autocomplete_fieldsname, .ownTheme .selectFaIconSearcher, .ownTheme .grid .filters .label, .ownTheme .controlTimeUser .tableWeekQuadrantBody div[data-date]:not([data-totals]) > div:first-child > div:first-child > span {
		background-color:var(--theme-background-inputs)!important;
	}
	.ownTheme .widget-box-2, .ownTheme .select2-dropdown, .ownTheme .select2-container--default .select2-selection--single, .ownTheme #timmingsInfo .headerUser .headerElement.empty, .ownTheme #timmingsInfo .headerUser > div, .ownTheme .process_box_lucene,
	.ownTheme .date-picker-wrapper, .ownTheme .node-box {
		background-color:var(--theme-background-inputs);
	}
	.ownTheme .processSelectedLayer ul li {
		background:var(--theme-background-inputs);
	}
	.ownTheme .darkLetter {
		color:var(--theme-background-inputs)!important;
	}
	.ownTheme .timeline > li > .timeline-panel:after {
		border-left-color:var(--theme-background-inputs)!important;
		border-right-color:var(--theme-background-inputs)!important;
	}

	/* Fondo de inputs desactivados */
	.ownTheme .form-control[disabled], .ownTheme .form-control[readonly], .ownTheme fieldset[disabled] .form-control, .ownTheme thead.well, .ownTheme .like-table-header, .ownTheme .form-readonly .checkbox .owncheckbox, .ownTheme .form-readonly .checkbox .ownradio {
		background-color:var(--theme-background-inputs-disabled)!important;
		border-color:var(--theme-background-inputs-disabled)!important;
	}
	.ownTheme .wizardSteps li.disabled, .ownTheme .wizardSteps li.disabled::after {
		background-color:var(--theme-background-inputs-disabled)!important;
	}

	/* Letra de inputs desactivados */
	.ownTheme .form-control[disabled], .ownTheme .form-control[readonly], .ownTheme fieldset[disabled] .form-control, .ownTheme thead.well, .ownTheme .like-table-header, .ownTheme .form-readonly .checkbox .owncheckbox, .ownTheme .form-readonly .checkbox .ownradio {
		color:var(--theme-letter-disabled)!important;
	}

	/* Verde chillón resaltado highlight */
	.ownTheme #meUser.active, .ownTheme #allUser.active, .ownTheme .iconRefresh .fas, .ownTheme .fas.filter-heading-icon, .ownTheme th[data-sorted="true"] [data-sort-handler] span, .ownTheme #header-upper-menu .input-group-text, .ownTheme #meUser.active:hover, .ownTheme #allUser.active:hover,
	.ownTheme .nav-tabs .active > a, .ownTheme .cm-s-default .cm-keyword, .ownTheme #header .nav .fas:hover, .ownTheme #dropDownAlerts.shake-bell span, .ownTheme .checkboxOptions > div:hover *, /*.ownTheme .autocomplete_fieldsname a:hover,*/
	.ownTheme .portletForm .processIndexList li.active, .ownTheme .gridMoreMenu :checked ~ label span, .ownTheme .iconRefresh a:hover > span, .ownTheme .separador a:hover, .ownTheme #allUser:hover, .ownTheme .gridMoreMenu label:hover span,
	.ownTheme .sidebar-nav li:not(.sidebar-brand) .item-caret:hover a,
	.ownTheme .sidebar-nav li:not(.sidebar-brand).active .item-caret a,
	.ownTheme .sidebar-nav li.active > a,
	.ownTheme .sidebar-nav li.active > .item-caret > a,
	.ownTheme .sidebar-nav > li:not(:first-child):hover > a,
	.ownTheme .sidebar-nav > li:not(:first-child):hover > .item-caret > a,
	.ownTheme .sidebar-nav li.active > .item-caret > a > span,
	/* :not(.admin-menu span.fa-fw): mismo carve-out que la regla primary de
	   .sidebar-nav — el glifo del tile admin activo va blanco (manageSystem/view.jsp) */
	.ownTheme .sidebar-nav li.active > a > span:not(.admin-menu span.fa-fw),
	.ownTheme #main-menu li.active a > span:not(.admin-menu span.fa-fw),
	.ownTheme #community_menu_search > div.active,
	.ownTheme #community_menu_search > div.active span,
	.ownTheme #community_menu_search > div:hover,
	.ownTheme #community_menu_search > div:hover span,
	.ownTheme #header .nav .fas:hover,
	.ownTheme #header .nav .fal:hover,
	.ownTheme #header .nav .fa:hover,
	.ownTheme #header .nav .fa-thin:hover,
	.ownTheme #header .nav .fa-solid:hover,
	.ownTheme #header .nav .fa-duotone:hover,
	.ownTheme #header .nav .fa-brands:hover,
	.ownTheme .sidebar-nav li.active a > span:last-child, .ownTheme .sidebar-nav > li:not(:first-child):not(.nav-header):not(#menu-brand):not(.noHover):hover a > span:last-child,
	.ownTheme .modal-header [data-bs-dismiss="modal"]::before, .ownTheme #block_close_button::before {
		color:var(--theme-hightlight)!important;
	}
	.ownTheme .table-hover>tbody>tr:hover,
	.ownTheme #target .component:not([data-bgcolor]):hover, .ownTheme #target .component:not([data-bgcolor]):hover .panel:not(.kanban-element), .ownTheme #target .dkf-container > .clearfix .fa-layer,
	.ownTheme .targetDynamicList .fa-layer, .ownTheme #target .controlIcons, .ownTheme .headerUser .headerElement, .ownTheme .calendar .calendar-header table th:hover,
	.ownTheme .date-picker-wrapper .month-wrapper table .day.real-today, .ownTheme .highlight, .ownTheme .summernoteManualMentions .active, .ownTheme .summernoteManualMentions a:hover, .ownTheme #newLayoutWrapper ul li:hover, .ownTheme #newLayoutWrapper ul li.active, .ownTheme .filter-heading:not(.filter-active) .alert-info:not(.alert-blue), .ownTheme #userCommentPredict label:hover,
	.ownTheme .checkboxNumberWrapper, .ownTheme .tableChecks tr, .ownTheme .tableChecks td, .ownTheme .tableChecks tr:hover .checkbox, .ownTheme .tableChecks.open tr .checkbox, .ownTheme .wizardSteps li.active, .ownTheme .wizardSteps li.active::after, .ownTheme input:checked + .slider, .ownTheme .contextTitle,
	.ownTheme .panel-title .label
	{
		background-color:var(--theme-hightlight)!important;
	}
	.ownTheme #main-menu li.active, .ownTheme #community_menu_search > div.active, .ownTheme #community_menu_search > div:hover {
		background-color:var(--theme-hightlight-opacity)!important;
	}
	.ownTheme .filter-heading.focused .highlight, .ownTheme .filter-heading.focused .form-control,
	.ownTheme .filter-heading.filter-active [data-type],
	.ownTheme .filter-heading.focused:not(.filter-active) .input-group-text:last-child,
	.ownTheme .filter-heading.focused:not(.filter-active) .input-group-text,
	.ownTheme .filter-heading.focused .select2-container.highlight .select2-selection,
	.ownTheme .nav-tabs > li.active > a, .ownTheme .tour-elements .highlight, .ownTheme .ui-datepicker-calendar .ui-state-hover, .ownTheme .ui-state-active,
	.ownTheme .form-control.sourceTranslationText, .ownTheme .portletForm .processIndexList li.active,
	.ownTheme .filter-heading.filter-active .alert-info:not(.alert-blue),
	.ownTheme .nav-tabs > li.active > a,
	.ownTheme .form-control:focus,
	.ownTheme .form-control:hover,
	.ownTheme #community_menu_search_input .form-control:hover,
	.ownTheme #community_menu_search_input .form-control:focus,
	.ownTheme .input-group:has(.form-control:focus) .form-control,
	.ownTheme .input-group:has(.form-control:hover) .form-control,
	.ownTheme .input-group:has(.form-control:focus) .input-group-text,
	.ownTheme .input-group:has(.form-control:hover) .input-group-text
	{
		border-color:var(--theme-hightlight)!important;
	}
	.ownTheme .previously-opened {
		outline: 2px solid var(--theme-hightlight);
		outline-offset: -1px;
	}
	.ownTheme ::selection {
		background: var(--theme-hightlight);
	}
	.ownTheme .ui-state-highlight:not(.doku-toast-notification), .ownTheme .ui-widget-content .ui-state-highlight:not(.doku-toast-notification), .ownTheme .ui-widget-header .ui-state-highlight:not(.doku-toast-notification), .ownTheme .ui-state-active, .ownTheme .ui-widget-content .ui-state-active, .ownTheme .ui-widget-header .ui-state-active, .ownTheme a.ui-button:active, .ownTheme .ui-button:active, .ownTheme .ui-button.ui-state-active:hover { background:var(--theme-hightlight)!important; }
	.ownTheme .highlight, .ownTheme .filter-heading:not(.filter-active) .alert-info:not(.alert-blue), .ownTheme #userCommentPredict label:hover { background-color:var(--theme-hightlight)!important; }
	.ownTheme .fieldActionsWrapper > .btn-group > a:hover, .ownTheme .fieldActionsWrapper > a:hover, .ownTheme .fieldActionsWrapper .big-action:hover { color:var(--theme-hightlight)!important; }
	.ownTheme #menu-search-icon.highlight { color:var(--theme-hightlight); }
	.ownTheme #timmingsInfo .multipleSelect, .ownTheme #selector-create-tour-left, .ownTheme #selector-create-tour-right , .ownTheme #selector-create-tour-top, .ownTheme #selector-create-tour-bottom { background-color:var(--theme-hightlight)!important; }
	.ownTheme .compareLine { background-color:var(--theme-hightlight); }
	.ownTheme #annotationsLayer { background-color:var(--theme-hightlight); border-color: var(--theme-hightlight); }
	.ownTheme .node-box:not(.node-disabled):not(.node-jump):not(.node-cloned):hover { background-color:var(--theme-hightlight); }
	.ownTheme #target .sorting-target, .ownTheme .targetDynamicList [data-sorttarget] { background-color:var(--theme-hightlight); }
	.ownTheme .cardactive { background:var(--theme-hightlight)!important; }
	.ownTheme .list-rounded .active { background-color:var(--theme-hightlight)!important; }

	.ownTheme .input-group .form-control:first-child:focus,
	.ownTheme .input-group .form-control:first-child:hover {
		border-right-color:var(--theme-border-inputs) !important;
	}

	/* Resaltado listados hover / Hover componentes administración */
	.ownTheme .table-hover>tbody>tr:hover,
	.ownTheme #target .component:not([data-bgcolor]):hover, .ownTheme #target .component:not([data-bgcolor]):hover .panel:not(.kanban-element), .ownTheme #target .dkf-container > .clearfix .fa-layer,
	.ownTheme .targetDynamicList .fa-layer, .ownTheme #target .controlIcons, .ownTheme .tree .tree-folder .tree-folder-header:hover,
	.ownTheme .tree .tree-folder .selected, .ownTheme UL.jqueryFileTree A:hover, .ownTheme UL.jqueryFileTree A.active,
	.ownTheme .node-box:not(.node-disabled):not(.node-jump):not(.node-cloned):hover, .ownTheme .table-filters-checkbox ul li:hover {
		background-color: var(--theme-list-hover)!important;
	}

	/* Borde de pestañas / Input group addons */
	.ownTheme .nav-tabs > li > a, .ownTheme .nav-tabs, .ownTheme .process_box_lucene:hover {
		border-color:var(--theme-border-tabs)!important;
	}
	.ownTheme .portlet:not(.lightProcessIcon) .grid-main-filters a, .ownTheme .date-picker-wrapper .month-wrapper table .day.real-today, .ownTheme .gridMoreMenu .menu-item a, .ownTheme .gridMoreMenu label:not(:hover) {
		color:var(--theme-border-tabs)!important;
	}
	.ownTheme .input-group-text, .ownTheme #community_fav .btn, .ownTheme .sp-colorize {
		background-color:var(--theme-border-tabs);
	}
	.ownTheme #timmingsInfo .headerAgreement .headerElement.empty, .ownTheme #timmingsInfo .headerAgreement > div, .ownTheme #timmingsInfo .headerAgreement > div .headerElement {
		background-color:var(--theme-border-tabs)!important;
	}

	/* Botones */
	.ownTheme .btn-success, .ownTheme .badge-success {
		background-color: var(--theme-button-success);
		border-color: var(--theme-button-success);
	}
	.ownTheme .btn-light {
		background-color: var(--theme-button-default);
		border-color: var(--theme-button-default);
	}

	.ownTheme .btn-light, .ownTheme .input-group-text, .ownTheme #community_fav .btn { border-color:transparent!important; }
	.ownTheme a.btn-light:hover, .ownTheme a.btn-light:hover *, .ownTheme .modal-footer .btn-light { color:var(--theme-button-font-hover)!important; }
	.ownTheme .btn-primary { border-color:var(--theme-button-primary-border)!important; }
	.ownTheme .btn-primary:not(.btn-nobutton):hover { border-color:var(--theme-button-primary-border-hover)!important; }
	.ownTheme .cm-s-default .cm-string { color:var(--theme-cm-string)!important; }
	.ownTheme .previously-opened td { border-top:none!important; border-bottom:none!important; }
	.ownTheme .previously-opened + tr td { border-top:none!important; }

	/* Color Error label */
	.ownTheme .form-group.has-error label, .ownTheme .has-error .form-control, .ownTheme .has-error label.control-label, .ownTheme .has-error strong.control-label, .ownTheme .form .has-error label { color: var(--dkf-danger-text)!important; }
	.ownTheme .has-error .form-control, .ownTheme .has-error .owncheckbox { border-color:var(--dkf-danger-text)!important; }

	.ownTheme #timmingsInfo div[data-group]:not([data-subgroup]) > header .headerText, .ownTheme div[data-group]:not([data-subgroup]) > header .rowCalendar.totalCounts > div:not(.tooltip){
		background-color:var(--theme-background-pink)!important;
		color:var(--dkf-gray-900);
	}

/* OWN THEME */


/*  MODAL CHARTS */
	.charts_inside .row_box{border-radius: 2px;padding: 5px;}
	.charts_inside .row_title{font-weight: 300;color: darkgrey;text-align: center;text-transform: uppercase;margin:6px 0px;}
	.charts_inside .row_chart{cursor: pointer;padding: 2px 3px;margin: -3px 0px;border-bottom: 2px solid whitesmoke;border-radius: 5px;}
	.charts_inside .row_chart_active{background-color: rgba(65, 105, 225,1);color: white !important;}
	.charts_inside .row_chart:last-child{border-bottom: none;}
	.charts_inside .row_name{padding-top: 8px;}
	.charts_inside .row_totals{padding: 3px 6px 3px 0px;text-align: right;}
	.charts_inside .row_name .progress{margin:2px 0 0 0;width: 100%;height: 8px;}
	.charts_inside .row_total1{padding-top: 6px;font-size: 1.2em;font-weight: lighter;}
	.charts_inside .row_total2{margin-top: 0px;font-weight: bold;}
/*  MODAL CHARTS */

@media print {
	#followUpProcessWrapper > .row > div { width: 100% !important; }
	#followUpProcessWrapper .alert {
		white-space: normal;
	}
	#followUpProcessWrapper h4 {
		overflow: visible;
		text-overflow: unset;
	}
}

/* ==============================================
   Destructive actions — text-danger
   ----------------------------------------------
   Bootstrap's `.dropdown-item` and FontAwesome's family classes both
   set `color`, and they ship AFTER the utility `.text-danger` in the
   cascade — so a `<a class="dropdown-item text-danger"><i class="fa
   fa-xmark"></i> Quitar</a>` ended up rendering with the default
   neutral grey/blue link colour, even though the markup said it was
   destructive.
   These rules force a real red on the anchor, on its child icon
   (<i> / <span> with FA classes) AND on hover, both for dropdown
   items and bare links. !important is necessary here — we are
   explicitly fighting third-party CSS that uses the same specificity.
   ============================================== */
.text-danger,
.text-danger > i,
.text-danger > span,
a.text-danger,
a.text-danger > i,
a.text-danger > span {
    color: var(--bs-danger, var(--dkf-bs-danger)) !important;
}
a.dropdown-item.text-danger,
a.dropdown-item.text-danger > i,
a.dropdown-item.text-danger > span {
    color: var(--bs-danger, var(--dkf-bs-danger)) !important;
}
a.dropdown-item.text-danger:hover,
a.dropdown-item.text-danger:focus,
a.dropdown-item.text-danger:hover > i,
a.dropdown-item.text-danger:hover > span,
a.dropdown-item.text-danger:focus > i,
a.dropdown-item.text-danger:focus > span {
    color: var(--dkf-white) !important;
    background-color: var(--bs-danger, var(--dkf-bs-danger)) !important;
}

/* ==============================================
   Document context menu (file thumbnails + forum attachments)
   ----------------------------------------------
   Polished design for the dropdowns rendered by dokuflex.upload.js
   (file-thumbnail menu, around line 755) and dokuflex.forum.js
   (attachment menu): header with file icon + truncated filename,
   fixed-width icon column, logical groups separated by dividers,
   destructive items in red, lock items in amber.

   Scoped via :has() on EITHER `li.dropDownShowDocument` (the full
   upload menu) OR `li.dropDownDownloadDocument` (the lighter forum
   menu, which has no "view document" item). Both share the same
   "Descargar" item, so this keeps the two menus visually unified
   while leaving every other dropdown in the app untouched.
   ============================================== */
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) {
    min-width: 256px;
    padding: 0 0 6px;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--dkf-slate-900);
    background: var(--dkf-white);
    border: 1px solid var(--dkf-border-light);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10),
                0 2px 6px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
/* Header — subtle gray bar. Fights the project-wide
   `.contextTitle { background-color: var(--dkf-primary)!important }` rule. */
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.contextTitle {
    background: linear-gradient(180deg, var(--dkf-gray-25), var(--dkf-bg-hover)) !important;
    color: var(--dkf-slate-900) !important;
    font-weight: 600;
    padding: 10px 14px 10px 38px !important;
    margin: 0 !important;
    position: relative;
    border-bottom: 1px solid var(--dkf-border-light);
}
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.contextTitle::before {
    content: "\f15b"; /* fa-file */
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--dkf-slate-600);
}
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.contextTitle > span {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 0.85rem;
}

/* Items — flex row, fixed icon column, smooth hover. */
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: var(--dkf-slate-800);
    text-decoration: none;
    transition: background-color 0.12s ease-in-out, color 0.12s ease-in-out;
    font-weight: 500;
}
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li > a > i,
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li > a > span:first-child {
    flex: 0 0 18px;
    text-align: center;
    font-size: 14px;
    color: var(--dkf-slate-500);
    margin: 0;
}
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li > a:hover {
    background-color: var(--dkf-bg-hover);
    color: var(--dkf-slate-900);
}
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li > a:hover > i,
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li > a:hover > span:first-child {
    color: var(--dkf-slate-800);
}

/* Divider above the "transferencia" group (Download / Compare).
   :not(:first-child) so the forum menu — where Download is the first item,
   with no contextTitle header above it — doesn't get a stray top border. */
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.dropDownDownloadDocument:not(:first-child),
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.dropDownPublicLinkDocument
{
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--dkf-bg-hover);
}

/* Lock / Unlock — subtle amber accent on the icon to flag a state change. */
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.dropDownLockDocument > a > i {
    color: var(--dkf-kpi-orange-dark);
}

/* Destructive items — red text + icon, red bg on hover. !important wins
   against the base item rule (color:#1e293b on the anchor). */
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.dropDownRemoveDocument > a,
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.dropDownUnlinkDocument > a,
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.dropDownRemoveDocument > a > i,
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.dropDownUnlinkDocument > a > i {
    color: var(--dkf-bs-danger) !important;
}
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.dropDownRemoveDocument > a:hover,
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.dropDownUnlinkDocument > a:hover,
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.dropDownRemoveDocument > a:hover > i,
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.dropDownUnlinkDocument > a:hover > i {
    background-color: var(--dkf-bs-danger) !important;
    color: var(--dkf-white) !important;
}
.dropdown-menu:is(:has(li.dropDownShowDocument), :has(li.dropDownDownloadDocument)) > li.dropDownUnlinkDocument {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--dkf-alert-danger-bg);
}
/* Flatpickr month-only mode — hides the day grid so the user picks via month/year header.
   Activated by onlyMonth fields in scheduler / control-time / processes. */
.flatpickr-calendar.flatpickr-month-only .flatpickr-days,
.flatpickr-calendar.flatpickr-month-only .flatpickr-weekdaycontainer { display: none; }

/* ============================================================================
   Flatpickr — DokuFlex theme override
   ----------------------------------------------------------------------------
   Aligns the picker with the dokuflex palette (primary #1e3799) and Bootstrap 5
   sizing so date inputs feel like first-class form controls. Variables come
   from .css :root, so a tenant that overrides --dkf-primary inherits the change.
   ============================================================================ */
.flatpickr-calendar {
	border: 1px solid var(--dkf-slate-200);
	border-radius: 10px;
	box-shadow: 0 10px 30px -8px rgba(30, 55, 153, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
	font-family: inherit;
	width: 320px;
	padding: 4px;
}
.flatpickr-calendar.arrowTop:before { border-bottom-color: var(--dkf-slate-200); }
.flatpickr-calendar.arrowBottom:before { border-top-color: var(--dkf-slate-200); }

/* Month / year header — give it breathing room and the dokuflex primary tone. */
.flatpickr-months {
	background: var(--dkf-primary, #1e3799);
	border-radius: 9px 9px 0 0;
	padding: 6px 4px;
	margin: -4px -4px 6px;
}
.flatpickr-months .flatpickr-month {
	color: var(--dkf-white);
	fill: var(--dkf-white);
	height: 38px;
}
.flatpickr-current-month {
	font-size: 105%;
	padding: 0;
	color: var(--dkf-white);
	font-weight: 500;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year { color: var(--dkf-white); }
.flatpickr-current-month .cur-month:hover,
.flatpickr-current-month .numInputWrapper:hover { background: rgba(255, 255, 255, 0.12); }
.flatpickr-current-month input.cur-year { font-weight: 600; }
.flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--dkf-white); font-weight: 500; }
.flatpickr-current-month .flatpickr-monthDropdown-months option { color: var(--dkf-slate-800); background: var(--dkf-white); }
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: var(--dkf-white); }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: var(--dkf-white); }

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	color: var(--dkf-white);
	fill: var(--dkf-white);
	height: 38px;
	padding: 12px 14px;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	color: var(--dkf-accent, #f9aa1a);
	fill: var(--dkf-accent, #f9aa1a);
	background: rgba(255, 255, 255, 0.08);
	border-radius: 6px;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { width: 12px; height: 12px; }

/* Weekday row and day grid — softer separation and modern padding. */
.flatpickr-weekdays { height: 32px; background: transparent; }
.flatpickr-weekday {
	color: var(--dkf-slate-400);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: transparent;
}

.flatpickr-days { padding: 2px 0; }
.dayContainer { padding: 6px 4px; }

.flatpickr-day {
	border-radius: 8px;
	color: var(--dkf-slate-700);
	font-weight: 500;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
	max-width: 40px;
	height: 38px;
	line-height: 38px;
	margin: 1px 0;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
	background: var(--dkf-primary-tint);
	border-color: var(--dkf-primary-tint);
	color: var(--dkf-primary, #1e3799);
}
.flatpickr-day.today {
	border-color: var(--dkf-accent, #f9aa1a);
	color: var(--dkf-primary, #1e3799);
	font-weight: 700;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
	background: var(--dkf-accent, #f9aa1a);
	border-color: var(--dkf-accent, #f9aa1a);
	color: var(--dkf-slate-800);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus {
	background: var(--dkf-primary, #1e3799);
	border-color: var(--dkf-primary, #1e3799);
	color: var(--dkf-white);
	box-shadow: 0 2px 6px rgba(30, 55, 153, 0.35);
}
.flatpickr-day.inRange {
	background: var(--dkf-indigo-tint);
	border-color: var(--dkf-indigo-tint);
	color: var(--dkf-primary, #1e3799);
	box-shadow: none;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.nextMonthDay,
.flatpickr-day.prevMonthDay { color: var(--dkf-border-tab); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { background: transparent; cursor: not-allowed; }

/* Bootstrap form-control feel for inputs flatpickr attaches to. */
.flatpickr-input[readonly] { background-color: var(--dkf-white); }
.form-control.flatpickr-input,
.flatpickr-input.form-control { background-color: var(--dkf-white); }

/* The inline calendar (used by some portlets) gets a flush border. */
.flatpickr-calendar.inline { box-shadow: none; border-color: var(--dkf-slate-200); }

/* Time add-on row injected by dokuflex.daterange.js when data-usetime="1"
 * (flatpickr has no native time picker in range mode). */
.flatpickr-calendar .dkf-daterange-time {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 6px 4px;
	margin-top: 4px;
	border-top: 1px solid var(--dkf-slate-200);
}
.flatpickr-calendar .dkf-daterange-time label {
	margin: 0;
	font-size: 12px;
	color: var(--dkf-slate-400);
	white-space: nowrap;
}
.flatpickr-calendar .dkf-daterange-time input {
	width: 64px;
	height: 30px;
	padding: 2px 6px;
	text-align: center;
}


/* =====================================================================
 * Toast notification styles (merged from dokuflex.toast.css — Phase 14)
 * Drives DOM emitted by WebContent/html/app/resources/common/js/dokuflex.toast.js
 * Redesign jul-2026: tarjeta blanca con barra de acento por tema, icono en
 * circulo tintado, sombra en capas; tokens --dkf-* del :root.
 * KEEP IN SYNC with resources/common/css/dokuflex.toast.css (dokunew).
 * Los hooks .is-open/.is-closing + transitionend de dokuflex.toast.js
 * dependen de estas transiciones — no eliminarlas.
 * ===================================================================== */

.doku-toast {
    position: fixed;
    z-index: var(--dkf-z-toast);
    color: var(--dkf-white);
    font-size: 12px;
    pointer-events: none;  /* let clicks through except on toast bodies */
}
.doku-toast--bottom-right { right: 16px; bottom: 16px; }
.doku-toast--bottom-left  { left: 16px;  bottom: 16px; }

.doku-toast-notification {
    position: relative;
    width: 320px;
    max-width: calc(100vw - 32px);
    min-height: 52px;
    padding: 11px 12px;
    margin-top: 10px;
    background-color: var(--dkf-white);
    color: var(--dkf-slate-600);
    border: 1px solid var(--dkf-slate-200);
    border-radius: var(--dkf-radius-lg);
    box-shadow: 0 4px 12px rgba(15,23,42,.08), 0 12px 32px rgba(15,23,42,.14);
    overflow: hidden;                /* recorta la barra de acento al radius */
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px) scale(.97);
    transition: opacity 200ms ease-out, transform 240ms cubic-bezier(.21, 1.02, .73, 1);
}
.doku-toast-notification.is-open    { opacity: 1; transform: none; }
.doku-toast-notification.is-closing {
    opacity: 0;
    transform: translateY(10px) scale(.97);
    transition: opacity 160ms ease-in, transform 160ms ease-in;
}

/* Barra de acento por tema */
.doku-toast-notification::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}
.doku-toast-notification.doku-toast--success::before { background-color: var(--dkf-bs-success); }
.doku-toast-notification.doku-toast--error::before   { background-color: var(--dkf-bs-danger); }

/* Columna de icono: circulo tintado centrado en vertical */
.doku-toast-icon {
    position: absolute;
    top: 0; left: 4px;
    height: 100%; width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.doku-toast-icon i {
    position: static;                /* anula el top/left absoluto del diseño anterior */
    width: 34px; height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 50%;
}
.doku-toast--success .doku-toast-icon i { color: var(--dkf-bs-success); background-color: rgba(92,184,92,.15); }
.doku-toast--error   .doku-toast-icon i { color: var(--dkf-bs-danger);  background-color: rgba(220,53,69,.12); }

/* Texto: titulo (strong) + mensaje (p).
   !important: blinda el color frente al CSS de la pagina anfitriona en modo
   iframe (dokuflex.js writeErrorMsg iAmOnIframe monta el toast en forms ajenos). */
.doku-toast-body {
    margin: 2px 24px 2px 42px;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: break-word;
}
.doku-toast-body p { margin: 1px 0 0; }
.doku-toast-body p, .doku-toast-body { color: var(--dkf-slate-600) !important; } /* !important: blindaje modo iframe (ver comentario del bloque) */
.doku-toast-body strong { color: var(--dkf-slate-900) !important; font-weight: 600; } /* !important: blindaje modo iframe (ver comentario del bloque) */

.doku-toast-close {
    background: transparent; border: none; color: inherit;
    z-index: 99; float: right; font-weight: bold;
    font-size: 1em; cursor: pointer; padding: 0 4px;
}
/* !important en font-size/color: mismo blindaje modo iframe que .doku-toast-body */
.doku-toast-notification .doku-toast-close {
    position: absolute;
    right: 6px; top: 6px;
    float: none;
    width: 24px; height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
    font-weight: 400;
    line-height: 1;
    border-radius: 50%;
    color: var(--dkf-slate-400) !important;
    transition: background-color 150ms ease, color 150ms ease;
}
.doku-toast-notification .doku-toast-close:hover {
    background-color: rgba(15,23,42,.08);
    color: var(--dkf-slate-600) !important; /* !important: debe ganar al color base blindado de arriba */
}
.doku-toast-close:focus-visible {
    outline: 2px solid var(--dkf-focus);
    outline-offset: 2px;
}

/* Iframe mode anchor — bottom-left toast inside .has-error containers.
   Geometria original de 5px conservada: el host puede ser un contenedor pequeño. */
.has-error { position: relative; }
.has-error .doku-toast.doku-toast--bottom-left {
    left: -5px !important; /* !important heredado del diseño original: gana al left en hosts anidados */
    bottom: 5px;
    position: absolute;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    .doku-toast-icon { width: 40px; }
    .doku-toast-icon i { width: 28px; height: 28px; font-size: 14px; }
    .doku-toast-body { margin-left: 36px; }
}

/* Respeta reduced-motion: sin slide/fade; el timer de seguridad de 500ms
   en dokuflex.toast.js retira el nodo cuando transitionend no dispara. */
@media (prefers-reduced-motion: reduce) {
    .doku-toast-notification,
    .doku-toast-notification.is-open,
    .doku-toast-notification.is-closing {
        transition: none;
        transform: none;
    }
}

/* Hide on print */
@media print { .doku-toast { display: none; } }

/* ============================================================================
   UX refresh — Foros (listado de foros del portlet Forum, #forumList)
   ----------------------------------------------------------------------------
   Mejora CSS-only sobre el markup existente (dokuflex.forum.js): convierte las
   filas float-based en tarjetas modernas con jerarquia visual clara, icono-badge
   consistente, chip de contadores, avatares solapados y hover. No cambia el HTML
   ni el JS. Usa los design tokens --dkf-* del :root (no colores hardcoded).
   Patron reutilizable para otros listados (ver docs/ux).
   ============================================================================ */
#forumList #forumBox { display:flex; flex-direction:column; gap:12px; }

#forumList .panel.widget-box-2 {
    background:var(--dkf-white);
    border:1px solid var(--dkf-border-light);
    border-radius:var(--dkf-radius-lg);
    box-shadow:0 1px 2px rgba(17,28,70,.04);
    padding:14px 18px; margin:0 !important;
    transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
#forumList .panel.widget-box-2:hover {
    box-shadow:0 6px 18px rgba(17,28,70,.10);
    border-color:var(--dkf-primary-light);
    transform:translateY(-2px);
}
#forumList .panel.widget-box-2.following { border-left:3px solid var(--dkf-primary); }

/* layout flex sustituyendo los floats heredados */
#forumList .panel.widget-box-2 > div { display:flex; align-items:center; gap:16px; }
#forumList .forumIcon,
#forumList .threadInfo,
#forumList .threadEdit,
#forumList .threadUsers { float:none !important; }

/* icono-badge consistente */
#forumList .forumIcon {
    flex:0 0 auto; width:56px; height:56px; padding:0 !important;
    border-radius:var(--dkf-radius);
    background:linear-gradient(135deg,var(--dkf-primary),var(--dkf-primary-light)) !important;
    display:flex; align-items:center; justify-content:center;
}
#forumList .forumIcon > span { font-size:24px; line-height:1; color:var(--dkf-white); }
#forumList .forumIcon .forumLetter { font-weight:700; font-size:22px; text-transform:uppercase; color:var(--dkf-white); }

/* contenido */
#forumList .threadInfo { flex:1 1 auto; margin:0 !important; min-width:0; }
#forumList .threadInfo > a.parent-link { font-size:1.05rem; font-weight:700; line-height:1.3; color:var(--dkf-primary-dark); }
#forumList .threadInfo > a.parent-link:hover { color:var(--dkf-primary); text-decoration:underline; }
#forumList .threadInfo label { display:block; margin:2px 0 !important; font-size:.8rem; color:var(--dkf-gray-500); font-weight:400; }
#forumList .threadInfo label:first-of-type {
    display:inline-block; margin-top:4px !important;
    background:var(--dkf-gray-100); color:var(--dkf-slate-550);
    padding:2px 9px; border-radius:20px; font-size:.72rem; font-weight:600;
}
#forumList .threadInfo .forum_last_thread { color:var(--dkf-primary); font-weight:600; }
#forumList .threadInfo .forum_last_thread:hover { text-decoration:underline; }
#forumList .threadInfo br { display:none; }

/* avatares solapados */
#forumList .threadUsers {
    flex:0 0 auto; order:2; display:flex; align-items:center;
    position:static !important; margin:0 !important; top:auto !important; right:auto !important;
}
#forumList .threadUsers .avatar { margin-left:-10px; }
#forumList .threadUsers .avatar:first-child { margin-left:0; }
#forumList .threadUsers .avatar img.avatar-small {
    width:32px; height:32px; border-radius:50%;
    border:2px solid var(--dkf-white); box-shadow:0 0 0 1px var(--dkf-border-light);
    transition:transform .15s ease;
}
#forumList .threadUsers .avatar img.avatar-small:hover { transform:translateY(-2px) scale(1.08); position:relative; z-index:2; }

/* acciones (seguir / editar) */
#forumList .threadEdit {
    flex:0 0 auto; order:3; display:flex; gap:6px; align-items:center;
    position:static !important; margin:0 !important; min-height:auto !important;
    border-left:1px solid var(--dkf-border-light) !important; padding-left:12px !important;
}
#forumList .threadEdit a { font-size:15px !important; }
#forumList .threadEdit br { display:none; }

/* responsive */
@media (max-width:768px){
    #forumList .panel.widget-box-2 > div { flex-wrap:wrap; }
    #forumList .threadEdit { margin-left:auto !important; border-left:0 !important; padding-left:0 !important; }
}

/* preservar el comportamiento del listado de foros publico (.public_list) */
.public_list #forumList .threadUsers,
.public_list #forumList .threadEdit { display:none !important; }
.public_list #forumList .forumIcon { background:transparent !important; }


/* ============================================================
 * Planner component (calendario planificador)
 * Integrado desde el antiguo dokuflex.common/css/dokuflex.planner.css.
 * Paleta en :root con tokens namespaced --dkfpl-* (no colisionan con --dkf-*).
 * ============================================================ */
:root {
	--dkfpl-bg: var(--dkf-white);
	--dkfpl-border: var(--dkf-border-light);
	--dkfpl-border-strong: var(--dkf-border);
	--dkfpl-text: var(--dkf-slate-800);
	--dkfpl-muted: var(--dkf-gray-cool);
	--dkfpl-faint: var(--dkf-slate-400);
	--dkfpl-head-bg: var(--dkf-gray-25);
	--dkfpl-today-bg: var(--dkf-bg-hover);
	--dkfpl-today-accent: var(--dkf-kpi-blue-dark);  /* mismo valor */
	--dkfpl-now: var(--dkf-red-alert);
	--dkfpl-hover: var(--dkf-gray-50);
	--dkfpl-offhours: rgba(15, 23, 42, 0.045);
	--dkfpl-invalid: var(--dkf-red-alert-dark);
	--dkfpl-invalid-bg: var(--dkf-alert-danger-bg);
	--dkfpl-active-bg: var(--dkf-slate-900);
	--dkfpl-radius: 10px;
	--dkfpl-gutter: 64px;
	--dkfpl-on-accent: var(--dkf-white);
}

:root {
	/* Rediseno moderno ago-2026 - tokens canonicos de los bloques nuevos
	   (login, listado/grid, formulario, cabecera y menu lateral).
	   Reutilizan la escala slate existente; no introducir literales nuevos
	   en esos bloques, usar estos tokens. */
	--dkf-modern-accent: #4f6af0;             /* indigo principal: foco, activo, degradados */
	--dkf-modern-accent-2: #6d3df0;           /* violeta, fin del degradado */
	--dkf-modern-accent-hover: #5a76f2;
	--dkf-modern-accent-2-hover: #7a4cf2;
	--dkf-modern-accent-tint: var(--dkf-primary-tint);        /* fondo indigo suave (activo/hover) */
	--dkf-modern-accent-shadow: rgba(79,106,240,.35);
	--dkf-modern-accent-shadow-hover: rgba(79,106,240,.45);
	--dkf-modern-gradient: linear-gradient(135deg, #4f6af0 0%, #6d3df0 100%);
	--dkf-modern-gradient-hover: linear-gradient(135deg, #5a76f2 0%, #7a4cf2 100%);
	--dkf-modern-focus-ring: 0 0 0 3px rgba(79,106,240,.15);
	--dkf-modern-bg-soft: var(--dkf-gray-25);            /* cabeceras de tabla/panel */
	--dkf-modern-bg-hover: var(--dkf-bg-hover);           /* hover neutro (menu) */
	--dkf-modern-row-hover: #f5f8ff;          /* hover de fila */
	--dkf-modern-border: var(--dkf-slate-200);   /* #e2e8f0 bordes de campo/tabla */
	--dkf-modern-border-soft: #e6eaf0;        /* bordes de contenedor */
	--dkf-modern-line: #eef2f6;               /* separadores finos */
	--dkf-modern-text: var(--dkf-slate-900);
	--dkf-modern-text-body: var(--dkf-slate-700);          /* slate-700 */
	--dkf-modern-text-muted: var(--dkf-slate-600);
	--dkf-modern-text-faint: var(--dkf-slate-500);
	--dkf-modern-success-bg: #dcfce7;
	--dkf-modern-success-text: #15803d;
	--dkf-modern-danger-bg: var(--dkf-alert-danger-bg);
	--dkf-modern-danger-text: #b91c1c;
	--dkf-modern-done-bg: #ecfdf5;            /* paso workflow completado */
	--dkf-modern-done-text: #047857;
	--dkf-modern-dark-bg: #0b1020;            /* fondo oscuro del login */
	--dkf-modern-login-glow-1: rgba(79,106,240,.28);
	--dkf-modern-login-glow-2: rgba(109,61,240,.22);
	--dkf-modern-icon-bright: #7cc7ff;        /* iconos del panel oscuro del login */
	--dkf-modern-dark-grad-1: #011435;           /* degradado radial del panel oscuro */
	--dkf-modern-dark-grad-2: #001032;
	--dkf-modern-dark-grad-3: #000a1a;
	--dkf-modern-border-faint: rgba(15, 23, 42, 0.06);
	--dkf-modern-shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 4px 14px -4px rgba(15,23,42,0.08);
	--dkf-modern-shadow-md: 0 6px 10px -6px rgba(15,23,42,0.10), 0 16px 32px -8px rgba(15,23,42,0.16);
	--dkf-modern-shadow-panel: 0 1px 2px rgba(15,23,42,0.04), 0 6px 18px -8px rgba(15,23,42,0.08);
	--dkf-modern-shadow-btn: 0 2px 6px -2px rgba(15,23,42,.25);
	--dkf-modern-shadow-btn-hover: 0 6px 14px -4px rgba(15,23,42,.30);
	--dkf-modern-shadow-header: 0 1px 2px rgba(15,23,42,.05);
}


.divPlanner {
	border: 1px solid var(--dkfpl-border);
	border-radius: var(--dkfpl-radius);
	background: var(--dkfpl-bg);
	color: var(--dkfpl-text);
	overflow: hidden;
	font-size: 13px;
}
/* Preview de diseño en la paleta del disenador: solo visual, sin interaccion (el click lo
   gestiona el control-group para anadir el componente al formulario). */
.divPlanner.plannerPreview { pointer-events: none; }

/* -------- cabecera -------- */
.divPlanner .plannerHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--dkfpl-border);
	flex-wrap: wrap;
}
.divPlanner .plannerTitle { font-size: 17px; font-weight: 700; line-height: 1.2; }
.divPlanner .plannerCounts { font-size: 12px; color: var(--dkfpl-muted); margin-top: 2px; }
.divPlanner .plannerActions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.divPlanner .plannerViewToggle {
	display: inline-flex;
	background: var(--dkfpl-head-bg);
	border: 1px solid var(--dkfpl-border);
	border-radius: 999px;
	padding: 3px;
}
.divPlanner .plannerViewBtn {
	border: 0; background: transparent; color: var(--dkfpl-muted);
	padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.divPlanner .plannerViewBtn.active { background: var(--dkfpl-bg); color: var(--dkfpl-text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

.divPlanner .plannerNew {
	border: 1px solid var(--dkfpl-border-strong); background: var(--dkfpl-bg); color: var(--dkfpl-text);
	padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.divPlanner .plannerNew:hover { background: var(--dkfpl-hover); }

.divPlanner .plannerNav { display: inline-flex; align-items: center; gap: 6px; }
.divPlanner .plannerNav button {
	border: 1px solid var(--dkfpl-border-strong); background: var(--dkfpl-bg); color: var(--dkfpl-text);
	height: 32px; min-width: 32px; padding: 0 10px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.divPlanner .plannerNav button:hover { background: var(--dkfpl-hover); }
.divPlanner .plannerNav button.plannerToday { padding: 0 16px; }

/* -------- buscador -------- */
.divPlanner .plannerSearchWrap {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid var(--dkfpl-border-strong); border-radius: 999px; padding: 5px 12px;
	background: var(--dkfpl-bg); color: var(--dkfpl-muted);
}
.divPlanner .plannerSearchWrap .fal { font-size: 12px; }
.divPlanner .plannerSearchInput { border: 0; outline: 0; background: transparent; font-size: 12px; color: var(--dkfpl-text); width: 130px; padding: 0!important; margin-bottom:0!important; }

/* -------- drag & drop (mover cita) -------- */
/* hueco vacio de la rejilla: cursor "celda" para invitar a click-crear (las citas llevan pointer) */
.divPlanner .plannerColBody, .divPlanner .plannerMonthCell { cursor: cell; }
.divPlanner .plannerEvent { cursor: pointer; }
.divPlanner .plannerDragging { opacity: .4; }
.divPlanner .plannerDropHover { outline: 2px dashed var(--dkfpl-today-accent); outline-offset: -2px; background: var(--dkfpl-today-bg); }
/* el helper de arrastre cuelga de <body>, fuera de .divPlanner: selector suelto + tokens de :root */
.plannerDragHelper {
	/* el z-index lo fija jQuery UI inline durante el arrastre (opcion zIndex del draggable). */
	box-sizing: border-box; border-radius: 6px; padding: 3px 6px; font-size: 11px; line-height: 1.25;
	box-shadow: 0 6px 18px rgba(0,0,0,.2); opacity: .95; overflow: hidden; pointer-events: none;
}
.plannerDragHelper .plannerEventTime, .plannerDragHelper .plannerBold { font-weight: 700; }
.plannerDragHelper .plannerEventLine, .plannerDragHelper .plannerEventTime { display: block; }
.plannerDragHelper .plannerMonthDot { display: none; }
/* helper sobre una franja NO laborable: rojo, para indicar que ahi no se puede soltar la cita. */
.plannerDragHelper.plannerDragInvalid {
	background: var(--dkfpl-invalid-bg) !important; /* anula el background inline que el HTML del evento fija por JS (timedEventHtml) */
	border-left-color: var(--dkfpl-invalid) !important; /* anula el border-left inline del evento (timedEventHtml) */
	color: var(--dkfpl-invalid) !important; /* anula el color inline del evento (timedEventHtml) */
}
.plannerDragHelper.plannerDragInvalid .plannerEventTime { color: var(--dkfpl-invalid) !important; } /* anula el color inline del span de hora (timedEventHtml) */

/* -------- pestañas de grupo -------- */
.divPlanner .plannerTabs {
	display: flex; gap: 6px; padding: 8px 18px; border-bottom: 1px solid var(--dkfpl-border);
	overflow-x: auto; flex-wrap: nowrap;
}
.divPlanner .plannerTab {
	border: 1px solid var(--dkfpl-border); background: var(--dkfpl-bg); color: var(--dkfpl-muted);
	padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.divPlanner .plannerTab.active { background: var(--dkfpl-active-bg); color: var(--dkfpl-on-accent); border-color: var(--dkfpl-active-bg); }

/* -------- estados -------- */
.divPlanner .plannerLoading { padding: 48px; text-align: center; color: var(--dkfpl-faint); font-size: 22px; }
.divPlanner .plannerEmptyConfig { padding: 28px; text-align: center; color: var(--dkfpl-muted); }
.divPlanner .plannerEmptyConfig .fal { margin-right: 6px; }

/* -------- franja "todo el día" -------- */
.divPlanner .plannerAllDayRow {
	display: flex; align-items: stretch; border-bottom: 1px solid var(--dkfpl-border);
	min-height: 38px; background: var(--dkfpl-bg);
}
.divPlanner .plannerAllDayLabel {
	width: 64px; flex: 0 0 64px; padding: 8px 6px; font-size: 10px; font-weight: 700; letter-spacing: .03em;
	color: var(--dkfpl-faint); text-transform: uppercase; text-align: right; border-right: 1px solid var(--dkfpl-border);
}
.divPlanner .plannerAllDayLane { flex: 1; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.divPlanner .plannerAllDayGrid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 6px 0; }
.divPlanner .plannerAllDayBar { padding: 0 4px; }

.divPlanner .plannerChip {
	font-size: 12px; padding: 3px 8px; border-radius: 6px; cursor: pointer; line-height: 1.3;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.divPlanner .plannerChipBar { display: block; }
.divPlanner .plannerChipDates { color: var(--dkfpl-faint); font-size: 11px; margin-left: 4px; }

/* -------- rejilla horaria (día / semana) -------- */
.divPlanner .plannerGridScroll { max-height: 560px; overflow-y: auto; }
.divPlanner .plannerGrid { display: flex; position: relative; }
.divPlanner .plannerGridWeek .plannerColBody,
.divPlanner .plannerGridDay .plannerColBody { flex: 1; }

.divPlanner .plannerHourGutter { width: var(--dkfpl-gutter); flex: 0 0 var(--dkfpl-gutter); }
.divPlanner .plannerWeekBody .plannerHourGutter { width: auto; }
.divPlanner .plannerHourLabel {
	font-size: 10px; color: var(--dkfpl-faint); text-align: right; padding-right: 8px;
	box-sizing: border-box; transform: translateY(-6px);
}
.divPlanner .plannerColBody { position: relative; border-left: 1px solid var(--dkfpl-border); box-sizing: border-box; }
.divPlanner .plannerColBody.today { background: var(--dkfpl-today-bg); }
.divPlanner .plannerHourLine { border-bottom: 1px solid var(--dkfpl-border); box-sizing: border-box; }
/* banda de horas NO laborables (complemento del horario configurado): gris translucido, sin capturar clicks */
.divPlanner .plannerOffHours { position: absolute; left: 0; right: 0; pointer-events: none; background: var(--dkfpl-offhours); }

.divPlanner .plannerEventTimed {
	position: absolute; border-radius: 6px; padding: 3px 6px; box-sizing: border-box; cursor: pointer;
	overflow: hidden; font-size: 11px; line-height: 1.25; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.divPlanner .plannerEventTimed .plannerEventTime { font-weight: 700; display: block; }
.divPlanner .plannerEventTimed .plannerEventTitle { display: block; overflow: hidden; text-overflow: ellipsis; }
.divPlanner .plannerEventLine { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* manija de redimensionado (jQuery UI handles:'s') al pie de la cita: zona agarrable + grip sutil al hover */
.divPlanner .plannerEventTimed .ui-resizable-s { height: 7px; bottom: 0; cursor: ns-resize; }
.divPlanner .plannerEventTimed:hover .ui-resizable-s::after {
	content: ""; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 2px; margin-left: -9px;
	border-radius: 2px; background: rgba(0, 0, 0, 0.25);
}
.divPlanner .plannerEventTimed.plannerResizing { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.divPlanner .plannerBold { font-weight: 700; }

.divPlanner .plannerNowLine { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--dkfpl-now); z-index: 5; }
.divPlanner .plannerNowLine:before {
	content: ''; position: absolute; left: -4px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--dkfpl-now);
}

/* -------- vista semana: cabecera + todo-el-dia + cuerpo comparten el MISMO grid -------- */
/* Las tres filas usan la misma plantilla de columnas y van en el mismo .plannerGridScroll,
   asi las lineas verticales quedan alineadas (mismo ancho efectivo incluido el scrollbar). */
.divPlanner .plannerWeekHead,
.divPlanner .plannerWeekAllDay,
.divPlanner .plannerWeekBody {
	display: grid;
	grid-template-columns: var(--dkfpl-gutter) repeat(7, 1fr);
}
.divPlanner .plannerWeekStickyTop { position: sticky; top: 0; z-index: 6; background: var(--dkfpl-bg); }
.divPlanner .plannerWeekHead {
	border-bottom: 1px solid var(--dkfpl-border); background: var(--dkfpl-head-bg);
}
.divPlanner .plannerWeekAllDay {
	border-bottom: 1px solid var(--dkfpl-border); background: var(--dkfpl-bg);
	min-height: 34px; padding: 5px 0; row-gap: 4px;
}
.divPlanner .plannerWeekAllDay .plannerAllDayLabel { grid-column: 1; border-right: 0; }
.divPlanner .plannerWeekAllDay .plannerAllDayBar { padding: 0 4px; min-width: 0; }
.divPlanner .plannerWeekBody { position: relative; }
.divPlanner .plannerWeekDayHead { box-sizing: border-box; text-align: center; padding: 8px 4px; border-left: 1px solid var(--dkfpl-border); }
.divPlanner .plannerWeekDayName { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--dkfpl-muted); letter-spacing: .03em; }
.divPlanner .plannerWeekDayNum { font-size: 16px; font-weight: 600; margin-top: 2px; }
.divPlanner .plannerWeekDayHead.today .plannerWeekDayNum {
	color: var(--dkfpl-on-accent); background: var(--dkfpl-today-accent); width: 28px; height: 28px; line-height: 28px;
	border-radius: 50%; display: inline-block; margin-top: 2px;
}

/* -------- vista mes -------- */
.divPlanner .plannerMonthHead { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--dkfpl-head-bg); border-bottom: 1px solid var(--dkfpl-border); }
.divPlanner .plannerMonthHeadCell { padding: 8px 6px; text-align: center; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--dkfpl-muted); }
.divPlanner .plannerMonthGrid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(96px, auto); }
.divPlanner .plannerMonthCell { position: relative; border-right: 1px solid var(--dkfpl-border); border-bottom: 1px solid var(--dkfpl-border); padding: 4px 5px; min-height: 96px; overflow: hidden; }
/* iconos (esquina opuesta al numero del dia) para saltar a vista Diaria/Semanal de ese dia; aparecen al hover */
.divPlanner .plannerMonthActions { position: absolute; top: 3px; right: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; z-index: 1; }
.divPlanner .plannerMonthCell:hover .plannerMonthActions { opacity: 1; }
.divPlanner .plannerMonthGo { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; color: var(--dkfpl-muted); font-size: 11px; }
.divPlanner .plannerMonthGo:hover { background: var(--dkfpl-hover); color: var(--dkfpl-today-accent); }
.divPlanner .plannerMonthCell.otherMonth { background: var(--dkfpl-head-bg); }
.divPlanner .plannerMonthCell.otherMonth .plannerMonthNum { color: var(--dkfpl-faint); }
.divPlanner .plannerMonthNum { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.divPlanner .plannerMonthCell.today .plannerMonthNum {
	color: var(--dkfpl-on-accent); background: var(--dkfpl-today-accent); width: 22px; height: 22px; line-height: 22px;
	text-align: center; border-radius: 50%;
}
.divPlanner .plannerMonthChip {
	font-size: 11px; padding: 2px 5px; border-radius: 4px; background: var(--dkfpl-head-bg); margin-bottom: 3px;
	cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px;
}
.divPlanner .plannerMonthDot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.divPlanner .plannerMonthMore { font-size: 11px; color: var(--dkfpl-muted); font-weight: 600; padding: 1px 5px; }

/* Modal "elegir proceso" (planner con VARIOS procesos vinculados): un boton por proceso dentro
   del modal dinamico #plannerChooseProcessModal (por eso no cuelga de .divPlanner). */
#plannerChooseProcessModal .plannerChooseProcess { display: flex; flex-direction: column; gap: 8px; }
#plannerChooseProcessModal .plannerChooseBtn { text-align: left; border: 1px solid var(--dkfpl-border-strong); border-radius: 8px; }
#plannerChooseProcessModal .plannerChooseBtn .fal { margin-right: 6px; color: var(--dkfpl-muted); }

/* Bloques de proceso del designer del planner (pestana "Proceso relacionado" del modal).
   El fondo blanco/borde/padding los aporta la clase .well del proyecto; aqui solo el pie
   (boton "Quitar proceso" abajo a la derecha). */
#plProcessBlocks .plProcessBlockFoot {
	display: flex; align-items: center; justify-content: flex-end; margin-top: 6px;
}

@media (max-width: 640px) {
	.divPlanner { --dkfpl-gutter: 44px; }
	.divPlanner .plannerHeader { gap: 10px; }
	.divPlanner .plannerAllDayLabel { width: 44px; flex-basis: 44px; }
}

/* ============================================================================
   Listados DataGrid — pildora de ESTADO y badge de comentarios (jul-2026)
   ----------------------------------------------------------------------------
   CSS-only sobre el markup de dokuflex.grid.js:
   - ~2770: <span class="label ..." style="background-color:<config>"> — el
     color viene del config del proceso (data-driven) y NO se toca; aqui solo
     la forma: chip de una sola linea con ellipsis (antes se partia en dos
     lineas en columnas estrechas).
   - ~2561: badge de comentarios .doku-comments-badge (el 0 se atenua a gris;
     >2 warn y >5 hot via clases emitidas por el JS, antes inline orange/red).
   ============================================================================ */
.table td .label[style*="background-color"] {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	border-radius: 999px;
	padding: 3px 10px;
	font-weight: 500;
	line-height: 1.5;
}

.doku-comments-badge {
	display: inline-block;
	min-width: 24px;
	padding: 3px 8px;
	border-radius: 999px;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}
.doku-comments-badge--zero { background-color: var(--dkf-gray-100); color: var(--dkf-gray-500); }
/* los dos umbrales deben ganar al .bg-primary de Bootstrap (que fuerza su fondo) */
.doku-comments-badge--warn { background-color: var(--dkf-warning-dark) !important; }
.doku-comments-badge--hot  { background-color: var(--dkf-bs-danger) !important; }

/* ==========================================================================
   Rediseño moderno: tarjetas KPI (cardcounter) + listado (grid)
   Alcance: visor de apps. Solo tema claro (body sin .ownTheme) para no
   romper los temas night, que tienen sus propias variables.
   ========================================================================== */

/* === KPI CARDS (cardcounter) === */
body:not(.ownTheme) fieldset .card:has(> .card-content) {
	border: 1px solid var(--dkf-modern-border-faint) !important;
	border-radius: 14px !important;
	background: var(--dkf-white);
	box-shadow: var(--dkf-modern-shadow-sm) !important;
	transition: transform .16s ease, box-shadow .16s ease;
}
body:not(.ownTheme) fieldset .card:has(> .card-content):hover {
	transform: translateY(-2px);
	box-shadow: var(--dkf-modern-shadow-md) !important;
}
body:not(.ownTheme) fieldset .card:has(> .card-content):hover .card_box_top_left,
body:not(.ownTheme) fieldset .card:has(> .card-content):hover .card_box_bottom_right { width: 0; height: 0; }
body:not(.ownTheme) fieldset .card > .card-content { padding: 18px 20px; }
body:not(.ownTheme) fieldset .card > .card-content > label {
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: .06em;
	color: var(--dkf-modern-text-faint);
	line-height: 1.35;
}
body:not(.ownTheme) fieldset .card .card-number {
	font-size: 34px !important;
	font-weight: 700 !important;
	color: var(--dkf-modern-text);
	line-height: 1.1;
	margin-top: 6px;
}
body:not(.ownTheme) fieldset .card > .card-content > .card-icon {
	top: 14px;
	right: 16px;
	width: 44px;
	height: 44px;
	max-width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 20px;
	border-radius: 12px;
	/* tinte suave derivado del color del icono configurado en el builder */
	background: color-mix(in srgb, currentColor 12%, transparent);
}
body:not(.ownTheme) fieldset .cardPreviousPeriod { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body:not(.ownTheme) fieldset .cardPreviousPeriod .label {
	border-radius: 999px;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
body:not(.ownTheme) fieldset .cardPreviousPeriod .label-success { background: var(--dkf-modern-success-bg); color: var(--dkf-modern-success-text); }
body:not(.ownTheme) fieldset .cardPreviousPeriod .label-danger { background: var(--dkf-modern-danger-bg); color: var(--dkf-modern-danger-text); }
body:not(.ownTheme) fieldset .cardPreviousPeriod p { color: var(--dkf-slate-400) !important; font-size: 11px !important; margin: 0 !important; }

/* Tarjetas KPI entre 768 y 1200px de viewport: el sidebar (~250px) come el
   ancho que asume el col-md-* del builder y una fila de 4 tarjetas queda a
   ~150px por tarjeta (titulo en vertical, numero partido digito a digito).
   En esa franja las columnas de 2-3/12 con componente "visual" (tarjeta KPI,
   tarjeta documento, grafica, countdown) se reagrupan a 2 por fila; un canvas
   de Chart.js o una tarjeta a ~150px son ilegibles. Los componentes de
   formulario (inputs, selects...) NO se tocan: siguen el grid del builder.
   Aplica a todos los temas: es un fix de layout, no de estilo. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	fieldset .component-column[class*="col-md-2"]:has(.card > .card-content, .card-document, .graph_layer, .countdown),
	fieldset .component-column[class*="col-md-3"]:has(.card > .card-content, .card-document, .graph_layer, .countdown) {
		width: 50%;
	}
}

/* === GRID TOOLBAR / SEARCH / CABECERA ===
   A petición de producto (ago-2026) la toolbar, el buscador, la paginación
   ("POR PÁGINA") y la fila de cabecera del grid conservan el look LEGACY:
   no añadir aquí restyling moderno de .grid-main-filters, #fullTextSearch
   ni de .grid thead th. */

/* === GRID TABLE === */
body:not(.ownTheme) .grid .table-responsive {
	border: 1px solid var(--dkf-modern-border-soft);
	border-radius: 12px;
	overflow-x: auto;
	box-shadow: var(--dkf-modern-shadow-panel);
	background: var(--dkf-white);
}
/* :not(.nobt) — .nobt solo la lleva la tabla del componente flexgrid: un
   flexgrid anidado dentro de un .grid (formulario embebido) conserva su
   border-collapse y sus lineas propias en vez de heredar las del listado */
body:not(.ownTheme) .grid table.table:not(.nobt) { margin: 0; border-collapse: separate; border-spacing: 0; }
body:not(.ownTheme) .grid table.table:not(.nobt) > tbody > tr > td {
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
	border-bottom: 1px solid var(--dkf-modern-line) !important;
	padding: 9px 12px !important;
	font-size: 13px;
	color: var(--dkf-modern-text-body);
	vertical-align: middle;
}
body:not(.ownTheme) .grid table.table:not(.nobt) > tbody > tr:last-child > td { border-bottom: none !important; }
/* Celda de checks inline (grids admin y listados sin tabla externa .tableChecks):
   el padding 9px 12px de la regla base la ensanchaba y dejaba el checkbox
   descolgado bajo el centro de la fila; el .owncheckbox se ancla al td
   (label estatico) para centrarlo de verdad respecto a la fila. */
body:not(.ownTheme) .grid table.table:not(.nobt) > tbody > tr > td.checkDataInTable {
	/* important: empata la escalada de la regla base de esta misma seccion */
	padding: 4px !important;
	position: relative;
}
body:not(.ownTheme) .grid table.table:not(.nobt) > tbody > tr > td.checkDataInTable .checkbox { position: static; }
body:not(.ownTheme) .grid table.table:not(.nobt) > tbody > tr > td.checkDataInTable .owncheckbox {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
body:not(.ownTheme) .grid table.table-striped:not(.nobt) > tbody > tr:nth-of-type(odd) > td { background: var(--dkf-white); }
body:not(.ownTheme) .grid table.table-hover:not(.nobt) > tbody > tr:hover > td { background: var(--dkf-modern-row-hover) !important; }
body:not(.ownTheme) .grid table.table .label {
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* === GRID: carve-out legacy sobre el bloque FORM ===
   El grid vive dentro del fieldset del visor, asi que el bloque FORM
   (fieldset .form-control con border/radius !important) alcanzaba tambien a
   los filtros de cabecera y al buscador del grid: pintaba una caja bordeada
   en cada columna. Se restaura el look legacy (sin caja salvo columna
   enfocada, que la sigue mostrando como siempre). */
body:not(.ownTheme) fieldset .grid thead th:not(.focused) input.form-control,
body:not(.ownTheme) fieldset .grid thead th:not(.focused) select.form-control {
	border: none !important;
}
/* radio legacy 4px (el 8px del bloque FORM redondeaba el lado derecho del
   input y la flecha de ordenacion quedaba montada sobre el borde) */
body:not(.ownTheme) fieldset .grid thead input.form-control,
body:not(.ownTheme) fieldset .grid thead select.form-control {
	border-radius: 4px !important;
}
/* en input-group el input seguido de addon (flecha de orden) va a escuadra
   por la derecha, como hace Bootstrap, para que ambos queden unidos */
body:not(.ownTheme) fieldset .grid thead .input-group .form-control:not(:last-child) {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
body:not(.ownTheme) fieldset .grid .fullTextSearch input.form-control {
	border-radius: 4px 0 0 4px !important;
}

/* ==========================================================================
   Rediseño moderno: formulario del visor de apps (ficha de registro)
   Mismo criterio que el bloque de tarjetas/listado: solo tema claro
   (body sin .ownTheme), los temas night quedan intactos.
   ========================================================================== */

/* === FORM: secciones (paneles) === */
/* Sin overflow:hidden — recortaba dropdowns/datepickers posicionados dentro
   del panel. La cabecera y el cuerpo llevan el radio interior (12px - 1px de
   borde) para que no asomen por las esquinas. */
body:not(.ownTheme) fieldset .panel.panel-primary {
	border: 1px solid var(--dkf-modern-border-soft) !important;
	border-radius: 12px !important;
	box-shadow: var(--dkf-modern-shadow-panel);
}
body:not(.ownTheme) fieldset .panel.panel-primary > .panel-heading {
	background: var(--dkf-modern-bg-soft) !important;
	color: var(--dkf-modern-text) !important;
	border-bottom: 1px solid var(--dkf-modern-border) !important;
	border-radius: 11px 11px 0 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 12px 16px !important;
}
body:not(.ownTheme) fieldset .panel.panel-primary > .panel-heading .fa-layer,
/* el icono de cabecera (.panel-with-icon / .buttonIcon) queda fuera: va en azul del tema o con su color propio */
body:not(.ownTheme) fieldset .panel.panel-primary > .panel-heading span:not(.panel-with-icon):not(.buttonIcon) { color: var(--dkf-modern-text) !important; }
body:not(.ownTheme) fieldset .panel.panel-primary > .panel-body { padding: 20px 16px; }
body:not(.ownTheme) fieldset .panel.panel-primary > .panel-body:last-child { border-radius: 0 0 11px 11px; }

/* === FORM: campos === */
body:not(.ownTheme) fieldset .form-group > label,
body:not(.ownTheme) fieldset .component-column label.control-label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--dkf-modern-text-muted) !important;
	letter-spacing: .01em;
}
body:not(.ownTheme) fieldset input.form-control,
body:not(.ownTheme) fieldset select.form-control,
body:not(.ownTheme) fieldset textarea.form-control {
	border: 1px solid var(--dkf-modern-border) !important;
	box-shadow: none !important;
	font-size: 13.5px;
	transition: border-color .15s, box-shadow .15s;
}
/* Esquinas de 8px salvo dentro de un .input-group (o de la capa .numberFormat que pinta los numeros con separador
   encima del input real): ahi mandan las reglas de Bootstrap 5 (.input-group > :not(:last-child) / :not(:first-child),
   sin prioridad) y la generica "Number format". Con el 8px con prioridad tambien para esos campos se veia el borde
   curvo, y el anillo de foco, entre el campo y el icono del addon (2026-10-08). */
body:not(.ownTheme) fieldset input.form-control:not(.input-group > *):not(.numberFormat > *),
body:not(.ownTheme) fieldset select.form-control:not(.input-group > *),
body:not(.ownTheme) fieldset textarea.form-control:not(.input-group > *) {
	/* prioridad heredada del bloque generico de arriba (de donde se ha movido), no es nueva: gana a los radios
	   de 4px de .filter-heading y a los inline-styles de radio que ponen los plugins (chosen/select2) en el input */
	border-radius: 8px !important;
}
body:not(.ownTheme) fieldset input.form-control:focus,
body:not(.ownTheme) fieldset select.form-control:focus,
body:not(.ownTheme) fieldset textarea.form-control:focus {
	border-color: var(--dkf-modern-accent) !important;
	box-shadow: var(--dkf-modern-focus-ring) !important;
	outline: none;
}
body:not(.ownTheme) fieldset .chosen-container-single .chosen-single {
	border: 1px solid var(--dkf-modern-border) !important;
	border-radius: 8px !important;
	background: var(--dkf-white) !important;
	box-shadow: none !important;
	height: 34px;
	line-height: 32px;
}

/* === FORM: carve-out flexgrid ===
   El flexgrid pinta sus propias lineas de celda (bordes de tr/td); el estilo
   de campo del bloque FORM (borde + radio 8px forzados en cada input)
   dibujaba una caja por celda y las lineas de registro se veian dobles. */
body:not(.ownTheme) fieldset .flexgrid table tbody input.form-control,
body:not(.ownTheme) fieldset .flexgrid table tbody select.form-control,
body:not(.ownTheme) fieldset .flexgrid table tbody textarea.form-control {
	/* anula el borde/radio/sombra forzados del bloque FORM: campos */
	border: none !important; border-radius: 0 !important; box-shadow: none !important;
}
/* el anillo de foco vuelve en version inset (el ring exterior del bloque FORM
   quedaria cortado por las celdas vecinas) */
body:not(.ownTheme) fieldset .flexgrid table tbody .form-control:focus {
	/* anula el focus-ring !important del bloque FORM: campos */
	box-shadow: inset 0 0 0 1px var(--dkf-modern-accent) !important;
}
/* Lineas, cabecera, hover y footer del flexgrid alineados con el listado
   moderno (mismos tokens que el bloque GRID TABLE). */
body:not(.ownTheme) fieldset .flexgrid table tbody tr,
body:not(.ownTheme) fieldset .flexgrid table tbody tr td:not(:last-child),
body:not(.ownTheme) fieldset .flexgrid[data-vertical] table tbody tr td:last-child {
	/* anula el border-color !important del grupo "Gris suave border inputs" */
	border-color: var(--dkf-modern-line) !important;
}
/* borde izquierdo de la columna de checkbox: iba en #E0E0E0 literal */
body:not(.ownTheme) fieldset .flexgrid .table-condensed>tbody>tr>td[data-td-flexgrid-checkbox] {
	/* anula el border-left #E0E0E0 !important de la regla legacy del componente */
	border-left-color: var(--dkf-modern-line) !important;
}
body:not(.ownTheme) fieldset .flexgrid thead { background: var(--dkf-modern-bg-soft); }
body:not(.ownTheme) fieldset .flexgrid thead th { border-bottom-color: var(--dkf-modern-border); }
body:not(.ownTheme) fieldset .flexgrid tbody tr:hover > td { background-color: var(--dkf-modern-row-hover); }
body:not(.ownTheme) fieldset .flexgrid tfoot tr > td {
	background: var(--dkf-modern-bg-soft);
	border-top-color: var(--dkf-modern-border);
}
/* primera fila: los select/enlaces heredan un min-height legacy de 40px (vs
   39px del resto) que dejaba una franja blanca de 1px bajo los campos
   readonly y la linea se leia doble; se iguala al alto del resto de filas. */
body:not(.ownTheme) fieldset .flexgrid table tbody tr:first-child select.form-control,
/* anula el min-height 40px forzado legacy de tr:first-child */
body:not(.ownTheme) fieldset .flexgrid table tbody tr:first-child a { min-height: 39px !important; }

/* === FORM: breadcrumb workflow ===
   El chip visible es .processBreadcrumbInfo (tiene fondo propio);
   .active = completado, .active.actual = paso actual, .future = pendiente. */
body:not(.ownTheme) .processBreadcrumbWrapper .processBreadcrumb { border-radius: 8px !important; }
body:not(.ownTheme) .processBreadcrumbWrapper .processBreadcrumb.active:not(.actual) .processBreadcrumbInfo {
	background: var(--dkf-modern-done-bg) !important;
}
body:not(.ownTheme) .processBreadcrumbWrapper .processBreadcrumb.active:not(.actual) .breadcrumbTitle,
body:not(.ownTheme) .processBreadcrumbWrapper .processBreadcrumb.active:not(.actual) .processBreadcrumbInfo span {
	color: var(--dkf-modern-done-text) !important;
}
body:not(.ownTheme) .processBreadcrumbWrapper .processBreadcrumb.actual .processBreadcrumbInfo {
	background: var(--dkf-modern-gradient) !important;
	box-shadow: 0 4px 12px -2px var(--dkf-modern-accent-shadow-hover);
}
body:not(.ownTheme) .processBreadcrumbWrapper .processBreadcrumb.actual .breadcrumbTitle,
body:not(.ownTheme) .processBreadcrumbWrapper .processBreadcrumb.actual .processBreadcrumbInfo span,
body:not(.ownTheme) .processBreadcrumbWrapper .processBreadcrumb.actual .processBreadcrumbInfo strong {
	color: var(--dkf-white) !important;
}
/* la punta chevron del paso actual continuaba con los colores ANTIGUOS
   (borde navy --dkf-primary + relleno tint claro) y no con el gradiente
   moderno: al cruce con el paso siguiente se veia una flecha partida.
   Punta solida en el color final del gradiente (accent-2, violeta), que es
   el borde derecho de la caja — se lee como continuacion. */
body:not(.ownTheme) .processBreadcrumbWrapper .processBreadcrumb.actual .processBreadcrumbInfo:not(.processBreadcrumbCard):before,
body:not(.ownTheme) .processBreadcrumbWrapper .processBreadcrumb.actual .processBreadcrumbInfo:not(.processBreadcrumbCard):after {
	background: var(--dkf-modern-accent-2) !important;
}
/* completados: la punta interior (:after) seguia en --dkf-white y cortaba
   contra el fondo mint (--dkf-modern-done-bg) del paso */
body:not(.ownTheme) .processBreadcrumbWrapper .processBreadcrumb.active:not(.actual):not(:last-child) .processBreadcrumbInfo:not(.processBreadcrumbCard):after {
	background: var(--dkf-modern-done-bg) !important;
}

/* === FORM: botones de acción del workflow === */
body:not(.ownTheme) .wfButtons.btn {
	border-radius: 8px !important;
	font-weight: 600 !important;
	border: none !important;
	padding: 9px 18px !important;
	box-shadow: var(--dkf-modern-shadow-btn);
	transition: transform .15s ease, box-shadow .15s ease;
}
body:not(.ownTheme) .wfButtons.btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--dkf-modern-shadow-btn-hover);
}

/* ==========================================================================
   Rediseño moderno: cabecera (header) + menú lateral
   Mismo criterio: solo tema claro (body sin .ownTheme).
   ========================================================================== */

/* === CABECERA === */
body:not(.ownTheme) nav.navbar { box-shadow: var(--dkf-modern-shadow-header); }
body:not(.ownTheme) #header-upper-bar {
	background: var(--dkf-white);
	border-bottom: 1px solid var(--dkf-modern-line);
}
body:not(.ownTheme) #header-upper-bar .nav-icons > a {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	color: var(--dkf-modern-text-muted);
	transition: background .15s, color .15s;
}
body:not(.ownTheme) #header-upper-bar .nav-icons > a:hover { background: var(--dkf-modern-accent-tint); color: var(--dkf-modern-accent); }
body:not(.ownTheme) #toggleMenuHandler {
	border-radius: 8px;
	color: var(--dkf-modern-text-muted);
	transition: background .15s, color .15s;
}
body:not(.ownTheme) #toggleMenuHandler:hover { background: var(--dkf-modern-accent-tint); color: var(--dkf-modern-accent); }
body:not(.ownTheme) #header-upper-bar h2,
body:not(.ownTheme) #header-upper-bar .communityTitle { font-weight: 600; color: var(--dkf-modern-text); }

/* === MENÚ LATERAL === */
body:not(.ownTheme) #sidebar-wrapper {
	background: var(--dkf-white);
	border-right: 1px solid var(--dkf-modern-line);
	box-shadow: none;
}
body:not(.ownTheme) #menuSearch .input-group { padding: 4px 6px; }
/* icono y input forman UNA caja: el addon cierra por la izquierda y el input
   por la derecha; con borde completo en ambos se veia una costura doble */
body:not(.ownTheme) #menuSearch .input-group-text {
	border: 1px solid var(--dkf-modern-border) !important;
	border-right: none !important;
	border-radius: 8px 0 0 8px !important;
	background: var(--dkf-white) !important;
	color: var(--dkf-modern-text-faint) !important;
}
body:not(.ownTheme) #menuSearchInput.form-control {
	border: 1px solid var(--dkf-modern-border) !important;
	border-left: none !important;
	border-radius: 0 8px 8px 0 !important;
	box-shadow: none !important;
	font-size: 13px;
	height: 34px;
	padding-left: 2px !important;
}
body:not(.ownTheme) #menuSearch .input-group:focus-within { border-radius: 8px; box-shadow: var(--dkf-modern-focus-ring); }
body:not(.ownTheme) #menuSearch .input-group:focus-within .input-group-text,
body:not(.ownTheme) #menuSearch .input-group:focus-within #menuSearchInput.form-control {
	border-color: var(--dkf-modern-accent) !important;
}
body:not(.ownTheme) #menuSearchInput.form-control:focus {
	box-shadow: none !important;
	outline: none;
}
body:not(.ownTheme) #main-menu li { margin-bottom: 2px; }
body:not(.ownTheme) #main-menu .btn-toggle {
	border-radius: 8px !important;
	padding: 8px 10px !important;
	color: var(--dkf-modern-text-body);
	font-size: 13.5px;
	transition: background .15s, color .15s;
}
body:not(.ownTheme) #main-menu .btn-toggle a { color: inherit; }
body:not(.ownTheme) #main-menu .btn-toggle span.fa-fw,
body:not(.ownTheme) #main-menu .btn-toggle > span:first-child { color: var(--dkf-modern-text-faint); transition: color .15s; }
body:not(.ownTheme) #main-menu li:not(.menuGroup) .btn-toggle:hover,
body:not(.ownTheme) #main-menu li:not(.menuGroup) .btn-toggle:focus {
	background: var(--dkf-modern-bg-hover) !important;
	color: var(--dkf-modern-text);
}
body:not(.ownTheme) #main-menu li.active > .btn-toggle,
body:not(.ownTheme) #main-menu li.active > a {
	background: var(--dkf-modern-accent-tint) !important;
	color: var(--dkf-modern-accent) !important;
}
body:not(.ownTheme) #main-menu li.active .btn-toggle span.fa-fw,
body:not(.ownTheme) #main-menu li.active .btn-toggle > span:first-child { color: var(--dkf-modern-accent); }
body:not(.ownTheme) #main-menu li.active a > span:last-child { font-weight: 600; }
body:not(.ownTheme) #menu-brand { border-top: 1px solid var(--dkf-modern-line); }

/* ==========================================================================
   Rediseño moderno: calendario (divCalendar) + botones de acción del portlet
   Usa los tokens --dkf-modern-* definidos en :root.
   ========================================================================== */

/* === CALENDARIO === */
body:not(.ownTheme) .divCalendar .contentCalendar {
	border: 1px solid var(--dkf-modern-border-soft);
	border-radius: 12px;
	box-shadow: var(--dkf-modern-shadow-panel);
	background: var(--dkf-white);
	overflow: hidden;
}
body:not(.ownTheme) .divCalendar .monthDisplay {
	font-weight: 700;
	color: var(--dkf-modern-text);
	letter-spacing: -0.01em;
}
body:not(.ownTheme) .divCalendar .navButtons .btn {
	border-radius: 8px;
	color: var(--dkf-modern-text-muted);
	transition: background .15s, color .15s;
}
body:not(.ownTheme) .divCalendar .navButtons .btn:hover { background: var(--dkf-modern-accent-tint); color: var(--dkf-modern-accent); }
body:not(.ownTheme) .divCalendar .headerCalendar .headerElement {
	border-radius: 8px;
	transition: background .15s, color .15s;
	cursor: pointer;
}
body:not(.ownTheme) .divCalendar .headerCalendar .headerElement:not(.empty):hover { background: var(--dkf-modern-bg-hover); }
body:not(.ownTheme) .divCalendar .headerCalendar .headerElement > div { font-weight: 600; color: var(--dkf-modern-text-body); }
body:not(.ownTheme) .divCalendar .headerCalendar .headerElement > span { color: var(--dkf-modern-text-faint); font-size: 11px; }
body:not(.ownTheme) .divCalendar .headerCalendar .headerElement[data-today="1"] { background: var(--dkf-modern-accent-tint) !important; }
body:not(.ownTheme) .divCalendar .headerCalendar .headerElement[data-today="1"] > div,
body:not(.ownTheme) .divCalendar .headerCalendar .headerElement[data-today="1"] > span { color: var(--dkf-modern-accent) !important; }
body:not(.ownTheme) .divCalendar .calendarFilters input.form-control {
	border: 1px solid var(--dkf-modern-border) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

/* === BOTONES DE ACCIÓN DEL PORTLET (respeta el color configurado inline) === */
body:not(.ownTheme) fieldset .form-group-button .btn,
body:not(.ownTheme) fieldset .component-column[class*="button_"] .btn {
	border-radius: 8px !important;
	font-weight: 600 !important;
	border: none !important;
	box-shadow: var(--dkf-modern-shadow-btn);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body:not(.ownTheme) fieldset .form-group-button .btn:hover,
body:not(.ownTheme) fieldset .component-column[class*="button_"] .btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--dkf-modern-shadow-btn-hover);
	filter: brightness(1.05);
}

/* === BANNER DE CONVERSIÓN FREEMIUM (freemiumUpsellBanner.jsp: designers de proceso/workflow) === */
.dkf-freemium-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	padding: 10px 14px;
	background: var(--dkf-primary-tint);
	border: 1px solid var(--dkf-primary-light);
	border-left: 4px solid var(--dkf-primary);
	border-radius: var(--dkf-radius);
}
.dkf-freemium-banner > i { font-size: 22px; color: var(--dkf-primary); }
.dkf-freemium-banner-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dkf-freemium-banner-text strong { color: var(--dkf-primary-dark); }
.dkf-freemium-banner-text span { color: var(--dkf-slate-600); font-size: 12px; }
.dkf-freemium-banner .btn { white-space: nowrap; }

/* === TAKEOVER DE CONVERSIÓN FREEMIUM (freemiumUpsellTakeover.jsp: sustituye a los designers bloqueados) === */
.dkf-freemium-takeover {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 60px 20px;
	min-height: 420px;
	background: linear-gradient(180deg, var(--dkf-primary-tint), var(--dkf-white));
	border-radius: var(--dkf-radius);
}
.dkf-freemium-card {
	background: var(--dkf-white);
	border: 1px solid var(--dkf-slate-200);
	border-radius: 14px;
	box-shadow: var(--dkf-shadow-lg);
	padding: 34px 38px;
	max-width: 560px;
	text-align: center;
}
.dkf-freemium-card-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: var(--dkf-primary-tint);
	color: var(--dkf-primary);
	font-size: 28px;
}
.dkf-freemium-card h2 { font-size: 22px; font-weight: 700; color: var(--dkf-slate-900); margin: 0 0 6px; }
.dkf-freemium-card > p { color: var(--dkf-slate-600); font-size: 14px; margin: 0 0 18px; }
.dkf-freemium-perks {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
	text-align: left;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 18px;
}
.dkf-freemium-perks li { font-size: 13px; color: var(--dkf-slate-600); display: flex; gap: 8px; align-items: center; }
.dkf-freemium-perks li i { color: var(--dkf-success); }
.dkf-freemium-actions { display: flex; gap: 10px; justify-content: center; }
/* Tarjeta de contexto que Dokuflex.freemiumContact inserta en el help bar al llegar desde un bloqueo */
.dkf-freemium-helpbar-note {
	background: var(--dkf-primary-tint);
	border: 1px solid var(--dkf-primary-light);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 0 0 14px;
	text-align: left;
}
.dkf-freemium-helpbar-note strong { display: block; color: var(--dkf-primary-dark); font-size: 13px; margin-bottom: 4px; }
.dkf-freemium-helpbar-note span { color: var(--dkf-slate-600); font-size: 12px; }

/* =============================================================================
   Paneles de estadisticas: tarjetas KPI y tarjetas de grafico.
   Definicion UNICA del contrato visual. Lo consumen el panel de /admin
   (manageSystem/stats.jsp) y el panel freemium
   (manageSystem/freemiumDashboard.jsp); antes cada JSP llevaba su propia copia
   en un <style> con hexadecimales sueltos.
   Ver docs/freemium/auditoria-dashboard-freemium-2026-09-11.md
   ============================================================================= */
.stats-export-card { cursor: pointer; }   /* tarjeta de exportacion de manageSystem/stats.jsp */
.stats-page {
	padding-bottom: 18px;
}
.stats-section-title {
	margin: 0 0 18px 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--dkf-slate-800);
}
.stats-divider {
	margin: 26px 0;
	border-top: 1px solid var(--dkf-border-soft);
}
.stats-group-header {
	margin: 8px 0 16px;
	padding: 8px 12px;
	border-radius: 12px;
	background: var(--dkf-surface-muted);
	border: 1px solid var(--dkf-border-soft);
	font-size: 13px;
	font-weight: 700;
	color: var(--dkf-slate-600);
}

/* Rejillas que se reparten solas. Evitan tener que elegir col-lg-3 / col-md-6 a
   mano y sirven igual para 3, 4 o 5 tarjetas. */
.stats-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: 22px;
}
.stats-chart-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: 16px;
	margin-bottom: 22px;
}

.stats-card-col {
	margin-bottom: 14px;
}
/* Doble clase a proposito: `.ownTheme .card` (linea ~6711) pone
   background-color:inherit y borra el fondo de la tarjeta en las
   organizaciones con tema propio. Misma especificidad y mas abajo en el
   fichero, que es la forma de ganar sin anadir otra marca de prioridad. */
.card.stats-kpi-card {
	position: relative;
	border: 1px solid var(--dkf-border-card);
	border-radius: 16px;
	box-shadow: var(--dkf-shadow-stat);
	overflow: hidden;
	background: var(--dkf-surface-card);
}
/* Las tarjetas heredadas de la plantilla .card traen dos esquinas decorativas
   que aqui sobran. */
.stats-kpi-card .card_box_top_left,
.stats-kpi-card .card_box_bottom_right {
	display: none;
}
.stats-card-content {
	position: relative;
	min-height: 120px;
	padding-right: 70px;
}
.stats-card-content label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--dkf-slate-500);
	margin-bottom: 10px;
}
.stats-card-content .card-number {
	font-size: 28px;
	font-weight: 800;
	color: var(--dkf-slate-900);
	margin: 0;
	line-height: 1.1;
}
/* Las tarjetas KPI heredan de .card-content/.card .card-number un ancho
   recortado (max(calc(100% - 58px), 55%)), mayusculas y word-break: break-all
   pensados para las tarjetas antiguas con icono a la derecha; aqui el hueco
   del icono ya lo reserva el padding-right, asi que la etiqueta y el numero
   usan todo el ancho y no parten palabras ("ENTREGADO S", "2 0%"). */
.stats-card-content label,
.stats-card-content .card-number {
	width: 100%;
	word-break: normal;
	overflow-wrap: normal;
}
.stats-card-content label {
	text-transform: none;
	line-height: 1.3;
}
/* Linea de contexto bajo el numero: la tasa de paso de un embudo, una
   variacion, una unidad. */
.stats-card-content .stats-card-rate {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--dkf-slate-500);
}
.stats-card-content .stats-card-rate strong {
	color: var(--dkf-primary);
}

.stats-kpi-icon-wrap {
	position: absolute;
	top: 8px;
	right: 0;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dkf-white);
	font-size: 18px;
}
/* Los mismos seis acentos los usan las tarjetas KPI y las tarjetas de acceso del
   centro de auditorias (.audit-tile, mas abajo): una sola definicion. */
.stats-kpi-card.kpi-blue .stats-kpi-icon-wrap,   .kpi-blue .audit-tile-icon   { background: linear-gradient(135deg, var(--dkf-kpi-blue), var(--dkf-kpi-blue-dark)); }
.stats-kpi-card.kpi-purple .stats-kpi-icon-wrap, .kpi-purple .audit-tile-icon { background: linear-gradient(135deg, var(--dkf-kpi-purple), var(--dkf-kpi-purple-dark)); }
.stats-kpi-card.kpi-green .stats-kpi-icon-wrap,  .kpi-green .audit-tile-icon  { background: linear-gradient(135deg, var(--dkf-kpi-green), var(--dkf-kpi-green-dark)); }
.stats-kpi-card.kpi-orange .stats-kpi-icon-wrap, .kpi-orange .audit-tile-icon { background: linear-gradient(135deg, var(--dkf-kpi-orange), var(--dkf-kpi-orange-dark)); }
.stats-kpi-card.kpi-pink .stats-kpi-icon-wrap,   .kpi-pink .audit-tile-icon   { background: linear-gradient(135deg, var(--dkf-kpi-pink), var(--dkf-kpi-pink-dark)); }
.stats-kpi-card.kpi-cyan .stats-kpi-icon-wrap,   .kpi-cyan .audit-tile-icon   { background: linear-gradient(135deg, var(--dkf-kpi-cyan), var(--dkf-kpi-cyan-dark)); }

/* Variante plana: el icono acompana, no manda. La usan las tarjetas de embudo,
   donde el color esta reservado para marcar el escalon que importa. */
.stats-kpi-card.kpi-plain .stats-kpi-icon-wrap {
	top: 12px;
	right: 14px;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--dkf-slate-400);
}
.card.stats-kpi-card.is-highlight { border-color: var(--dkf-green); }
.stats-kpi-card.is-highlight.kpi-plain .stats-kpi-icon-wrap { color: var(--dkf-green-dark); }

/* ---- Centro de auditorias (manageSystem/audits.jsp) -------------------------
   Rejilla de accesos agrupada por ambito: cada tarjeta es un enlace completo
   (icono en losange con el acento kpi-* del grupo, etiqueta, chevron). Sustituye
   a las cajas .widget-box-2 .widget-color-3 e imita el chrome de .stats-kpi-card
   para que /admin > Auditorias se lea igual que el panel de /admin. */
.audit-hub {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-bottom: 18px;
}
.audit-hub-intro {
	margin: 0;
	font-size: 13px;
	color: var(--dkf-slate-500);
}
.audit-group-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dkf-slate-500);
}
.audit-group-title .fa-fw {
	color: var(--dkf-slate-400);
}
.audit-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 12px;
}
.audit-tile,
.audit-tile:visited {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 78px;
	padding: 14px 40px 14px 14px;
	background: var(--dkf-surface-card);
	border: 1px solid var(--dkf-border-card);
	border-radius: 16px;
	box-shadow: var(--dkf-shadow-stat);
	color: var(--dkf-slate-800);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease;
}
.audit-tile:hover,
.audit-tile:focus-visible {
	border-color: var(--dkf-primary);
	box-shadow: var(--dkf-shadow-lg);
	transform: translateY(-1px);
	color: var(--dkf-primary);
	text-decoration: none;
	outline: none;
}
.audit-tile:focus-visible {
	box-shadow: 0 0 0 3px var(--dkf-primary-tint), var(--dkf-shadow-lg);
}
.audit-tile-icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--dkf-white);
	font-size: 18px;
}
.audit-tile-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
.audit-tile-chevron {
	position: absolute;
	right: 14px;
	top: 50%;
	font-size: 12px;
	color: var(--dkf-slate-400);
	transform: translateY(-50%);
	transition: transform .15s ease, color .15s ease;
}
.audit-tile:hover .audit-tile-chevron {
	color: var(--dkf-primary);
	transform: translate(3px, -50%);
}
/* Cabecera de la consulta abierta: volver + icono/acento de la tarjeta elegida + titulo. */
.audit-detail-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
	padding: 10px 14px;
	background: var(--dkf-surface-muted);
	border: 1px solid var(--dkf-border-soft);
	border-radius: 12px;
}
.audit-detail-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--dkf-slate-800);
}
.audit-detail-title .audit-tile-icon {
	flex-basis: 36px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	font-size: 15px;
}
.audit-filters .form-group {
	margin-bottom: 14px;
}

.stats-chart-card {
	background: var(--dkf-surface-card);
	border: 1px solid var(--dkf-border-card);
	border-radius: 18px;
	box-shadow: var(--dkf-shadow-stat);
	padding: 16px 16px 12px;
	height: 100%;
}
.stats-chart-card h4,
.stats-chart-card h5 {
	font-size: 15px;
	font-weight: 700;
	color: var(--dkf-slate-800);
	margin: 0 0 14px 0;
}
.stats-chart-card h5 {
	font-size: 14px;
	color: var(--dkf-slate-700);
	margin-bottom: 4px;
}
/* Una linea de contexto bajo el titulo: que mide el grafico y como leerlo. */
.stats-chart-hint {
	margin: 0 0 10px 0;
	font-size: 12px;
	color: var(--dkf-slate-500);
}
.stats-chart-title i {
	cursor: pointer;
	color: var(--dkf-slate-500);
}
.stats-chart-body {
	position: relative;
	height: 320px;
}
.stats-chart-body.chart-body-sm {
	height: 280px;
}
/* Tarjeta a todo el ancho de la rejilla: para series largas (24 horas) o
   cuando un cuarto grafico quedaria huerfano en la fila siguiente. */
.stats-chart-card.stats-chart-wide {
	grid-column: 1 / -1;
}
.stats-chart-body canvas {
	width: 100% !important;   /* Chart.js escribe width/height inline en el canvas */
	height: 100% !important;
}
.stats-year-selector {
	margin-left: 20px;
	margin-bottom: 16px;
}
.legend-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 0;
}
.legend-item {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}
.legend_box {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	margin-right: 10px;
	flex: 0 0 18px;
}
.legend_text {
	line-height: 1.2;
	color: var(--dkf-slate-700);
	font-size: 13px;
}

/* Tarjeta KPI de lista (p. ej. dominios mas bloqueados en registerBlocked.jsp):
   misma tarjeta, sin icono, con filas compactas en vez de un numero grande. */
.stats-card-list { padding-right: 0; }
.stats-card-list-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--dkf-slate-700);
}

/* =============================================================================
   Hub freemium (manageSystem/freemiumHub.jsp): un punto de menu de admin con
   pestanas que cargan por AJAX las pantallas del plan freemium (panel,
   organizaciones, modulos, catalogo, registros bloqueados, ajustes).
   Ver docs/freemium/hub-freemium.md
   ============================================================================= */
.freemium-hub-intro {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--dkf-slate-500);
}
.freemium-hub-nav { flex-wrap: wrap; }
.freemium-hub-nav > li > a { white-space: nowrap; }
.freemium-hub-nav > li > a > .fa-fw { margin-right: 4px; }
/* El .tab-content generico trae 30px de padding para pestanas dentro de un
   formulario; aqui el contenido es una pantalla completa y solo necesita aire
   arriba. */
.freemium-hub-content { padding: 18px 0 0; }
.freemium-hub-loading { color: var(--dkf-slate-500); font-weight: 400; }

/* Pestanas anidadas del catalogo (moduleFreemium/editPrefs.jsp dentro del
   hub): se pintan como pildoras para que no compitan con las del hub. Las
   reglas genericas de .nav-tabs (bloque "Pestanas") leen estas custom
   properties, asi que no hace falta ninguna marca de prioridad nueva. */
.freemium-catalog-hub {
	--dkf-tab-bg: var(--dkf-surface-muted);
	--dkf-tab-bg-active: var(--dkf-primary);
	--dkf-tab-color: var(--dkf-slate-600);
	--dkf-tab-color-active: var(--dkf-white);
	--dkf-tab-radius: 999px;
	--dkf-tab-underline-width: 0px;
	--dkf-tab-font-size: 13px;
}
.freemium-catalog-hub > .nav-tabs { border: 0; gap: 6px; margin-bottom: 4px; }
.freemium-catalog-hub > .nav-tabs > li > a { padding: 6px 14px; }
.freemium-catalog-hub > .tab-content { padding: 16px 0 0; }

/* Ajustes freemium (manageSystem/freemiumConfig.jsp) */
.freemium-config-card {
	padding: 18px 20px;
	margin-bottom: 16px;
	border: 1px solid var(--dkf-border-card);
	border-radius: 16px;
	box-shadow: var(--dkf-shadow-stat);
	background: var(--dkf-surface-card);
}
.freemium-config-title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--dkf-slate-800);
}
.freemium-config-card .form-group { margin-bottom: 14px; }
.freemium-config-card small { display: block; margin-top: 4px; }
.freemium-config-number { max-width: 160px; }
.freemium-config-override { color: var(--dkf-accent); }
.freemium-config-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}
.freemium-config-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* Organizaciones freemium: panel de modulos instalados que se despliega
   encima del listado (manageSystem/freemiums.jsp). */
.freemium-org-modules {
	margin-bottom: 18px;
	padding: 14px 16px;
	border: 1px solid var(--dkf-border-card);
	border-radius: 12px;
	background: var(--dkf-surface-muted);
}
.freemium-org-modules-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}
.freemium-org-modules-head h5 { margin: 0; font-size: 15px; font-weight: 700; color: var(--dkf-slate-800); }

/* =============================================================================
   Stepper de asistentes. Convierte el marcado canonico de pestanas de Dokuflex
   (.tabbable > ul.nav.nav-tabs > li > a) en un indicador de progreso numerado,
   SIN tocar el marcado ni el JS: el estado sale de las mismas clases que ya
   mueve la libreria -- `active` (paso actual), `disabled` (paso al que aun no se
   puede llegar) y `d-none` (paso que todavia no existe).

   "Completado" no esta en el DOM y no hace falta que lo este: un paso alcanzable
   que va por delante del activo es un paso ya resuelto, y eso lo dice el propio
   selector (`li:has(~ li.active)`).

   Lo usa el asistente de contratos (portlets/contracts/view.jsp). Vale para
   cualquier asistente que use ese marcado: anade la clase `dkf-stepper` al
   .tabbable y ya.
   ============================================================================= */
.dkf-stepper .nav-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	border-bottom: 1px solid var(--dkf-border-soft);
	counter-reset: dkf-step;
}
.dkf-stepper .nav-tabs > li {
	counter-increment: dkf-step;
	flex: 0 1 auto;   /* pegados a la izquierda: cuatro pasos repartidos por todo
	                     el ancho dejan de leerse como una secuencia */
	float: none;      /* .nav-tabs > li lleva float:left en el CSS de pestanas */
	margin: 0 0 -1px;
}
/* :hover y :focus entran en el selector porque el CSS de pestanas les pone
   borde y fondo propios, y aqui el unico borde que debe verse es el del paso
   actual. */
.dkf-stepper .nav-tabs > li > a,
.dkf-stepper .nav-tabs > li > a:hover,
.dkf-stepper .nav-tabs > li > a:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 100%;
	margin: 0;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--dkf-slate-500);
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: var(--dkf-radius) var(--dkf-radius) 0 0;
}
/* El numero del paso. Sale del contador, no del marcado: asi el orden lo decide
   el DOM y un paso oculto (d-none) no gasta numero. */
.dkf-stepper .nav-tabs > li > a::before {
	content: counter(dkf-step);
	display: flex;
	flex: 0 0 26px;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-size: 13px;
	font-weight: 700;
	color: var(--dkf-slate-500);
	background: var(--dkf-surface-muted);
	border: 2px solid var(--dkf-border-soft);
	border-radius: var(--dkf-radius-round);
}
/* El icono del paso acompana al texto, en pequeno: el peso visual lo lleva el
   numero. */
.dkf-stepper .nav-tabs > li > a > span[class*="fa-"] {
	font-size: 12px;
	opacity: 0.75;
}

/* Paso actual. */
.dkf-stepper .nav-tabs > li.active > a,
.dkf-stepper .nav-tabs > li > a.active {
	color: var(--dkf-primary);
	background: var(--dkf-primary-tint);
	border-bottom-color: var(--dkf-primary);
}
.dkf-stepper .nav-tabs > li.active > a::before,
.dkf-stepper .nav-tabs > li > a.active::before {
	color: var(--dkf-white);
	background: var(--dkf-primary);
	border-color: var(--dkf-primary);
}

/* Paso ya resuelto: el que va por delante del activo y no esta bloqueado. La
   marca es un check dibujado con bordes, sin depender de la fuente de iconos. */
.dkf-stepper .nav-tabs > li:has(~ li.active):not(.disabled) > a {
	color: var(--dkf-slate-700);
}
.dkf-stepper .nav-tabs > li:has(~ li.active):not(.disabled) > a::before {
	/* \2713 = visto. Glifo de fuente de sistema: no depende de Font Awesome ni
	   obliga a colocar un pseudoelemento suelto contra el circulo. */
	content: '\2713';
	font-size: 14px;
	color: var(--dkf-white);
	background: var(--dkf-success);
	border-color: var(--dkf-success);
}

/* Paso al que todavia no se puede llegar. */
.dkf-stepper .nav-tabs > li.disabled > a {
	color: var(--dkf-slate-400);
	cursor: not-allowed;
	opacity: 1;   /* el estado ya se lee por color; el 0.5 heredado lo volvia ilegible */
}
.dkf-stepper .nav-tabs > li.disabled > a::before {
	color: var(--dkf-slate-400);
	background: var(--dkf-white);
	border-style: dashed;
}

.dkf-stepper .nav-tabs > li:not(.active):not(.disabled) > a:hover {
	color: var(--dkf-primary);
	background: var(--dkf-surface-muted);
}

/* En movil el numero manda y la etiqueta se calla: cuatro etiquetas no caben y
   partirlas en dos lineas descoloca la fila entera. */
@media (max-width: 575.98px) {
	.dkf-stepper .nav-tabs > li {
		flex: 1 1 auto;
	}
	.dkf-stepper .nav-tabs > li:not(.active) > a {
		gap: 0;
		font-size: 0;
	}
	.dkf-stepper .nav-tabs > li:not(.active) > a > span[class*="fa-"] {
		display: none;
	}
}


/* =============================================================================
   Pill con progreso. Un badge de estado que ademas dice cuanto se lleva hecho:
   el texto sigue siendo el del estado y el relleno lo cuenta sin ocupar sitio.

   El porcentaje es un dato, no una regla, asi que viaja en una custom property
   del propio elemento y la regla vive aqui (receta de docs/ux/css-comun-prompt.md):

       <span class="label badge bg-warning dkf-progress-pill"
             style="--dkf-progress-pill-value: 60%">3/5</span>

   Va como background-image y no como pseudoelemento a proposito: las clases
   bg-* de Bootstrap pintan background-color con marca de prioridad, son
   propiedades distintas, se superponen sin pelearse y el texto no necesita
   z-index.

   Lo usa el listado de contratos (dokuflex.contractdesigner.js, statusBadge).
   ============================================================================= */
.dkf-progress-pill {
	background-image: linear-gradient(to right,
		var(--dkf-progress-fill) var(--dkf-progress-pill-value, 0%),
		transparent var(--dkf-progress-pill-value, 0%));
}

/* =============================================================================
   Formularios: los tres estados que un campo tiene que saber contar.
   Ver docs/ux/css-comun-prompt.md
   ============================================================================= */

/* 1. DONDE ESTA EL FOCO.
   El tema abre con `*:focus-visible { outline:none; box-shadow:none }`, que apaga
   el indicador de foco de TODA la aplicacion; por eso media docena de componentes
   (cerrar modal, casillas del workflow, botones freemium, iconos de cabecera) han
   tenido que volver a dibujarselo uno por uno. Aqui se devuelve de una vez para
   todo lo que se maneja con el teclado.
   Solo :focus-visible: quien llega con el raton no ve el anillo, quien llega con
   el tabulador si. */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
a.btn:focus-visible {
	outline: 2px solid var(--dkf-focus);
	outline-offset: 1px;
}

/* 2. QUE UN ERROR PAREZCA UN ERROR.
   `.errorField` (una clase) llevaba border-color con marca de prioridad, pero el
   barrido global de bordes lo hace con `.form-control:not(:focus):not(:hover)`,
   que suma mas especificidad: el campo con error se quedaba con el borde gris de
   siempre y el unico aviso era el texto en rojo dentro. Este selector suma cuatro
   y recupera el borde. */
.form-control.errorField:not(:focus):not(:hover),
textarea.errorField:not(:focus):not(:hover),
select.errorField:not(:focus):not(:hover) {
	border-color: var(--dkf-danger-dark) !important;   /* gana al barrido global de bordes, que tambien lleva prioridad */
	background-color: var(--dkf-alert-danger-bg);
}

/* El mensaje de validacion (lo pinta jQuery Validate como <label class="error">)
   se veia como una etiqueta mas: mismo color y mismo tamano que "Hora de envio".
   Ahora se lee como lo que es. */
label.error,
.form label.error,
form label.error {
	display: block;
	margin-top: -10px;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--dkf-danger-dark);
}

/* 3. LA CASILLA Y SU ETIQUETA, SEPARADAS Y ALINEADAS.
   Quedaban pegadas ("[x]Evaluacion en tiempo real"): el tema deshace el
   padding-left con el que Bootstrap 5 hace ese hueco. En vez de pelearse con
   ese calculo, la fila se resuelve como flex, que ademas las centra
   verticalmente. */
.form-check {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 0;
	min-height: auto;
}
.form-check .form-check-input {
	flex: 0 0 auto;
	margin: 0;
}
.form-check .form-check-label {
	margin: 0;
	cursor: pointer;
}

/* =============================================================================
   Pantallas que llevaban su CSS en un <style> del JSP (absorcion sep-2026).
   Lote D de docs/audit/auditoria-estilos-inline-jsp-2026-09-12.md: cada bloque
   dice que pantalla lo consume. Los colores pasan a tokens; los selectores con
   <%=portletId%> se sustituyen por una clase estatica en el elemento.
   ============================================================================= */

/* --- Editor de layout (layout_edit.jsp y themes/dokuflex/layout_edit.jsp) --- */
.draggable-portlet .title { cursor: move; }
.columna .placeholder { background: var(--dkf-bg-header); border: 1px dashed var(--dkf-gray-200); }

/* --- Invitaciones a la comunidad (community/invitations.jsp) --- */
.invitationsForm table tr td { border-top: 1px solid var(--dkf-gold); border-bottom: 1px solid var(--dkf-gold); }
.invitationsForm table tr.odd td { background-color: var(--dkf-white); }
.invitationsForm table tr.even td { background-color: var(--dkf-gray-200); }

/* --- Directorio: indice alfabetico (directory/view.jsp) --- */
ul.letters { list-style: none; padding: 0; margin: 0; }
ul.letters li { float: left; width: 25px; }
ul.letters li a { display: block; text-decoration: none; color: var(--dkf-black); background-color: var(--dkf-white); line-height: 30px; padding-left: 10px; cursor: pointer; }
ul.letters li a:hover, ul.letters li.selected a { color: var(--dkf-white); background: var(--dkf-green-alt); }
ul.letters li a strong { margin-right: 10px; }

/* --- Visor de documentos (documentViewer/*.jsp) --- */
.imageViewerFrame { width: 100%; height: 500px; border: 1px solid var(--dkf-border-input); position: relative; }
/* Botones imprimir/descargar del visor PDF cuando la llamada pide hidePrint /
   hideDownload (documentViewer.jsp -> pdfLayerViewerDom.jsp). id+clase gana a
   cualquier display del viewer.css de pdf.js sin !important. */
#printButton.dv-hidden, #downloadButton.dv-hidden { display: none; }
/* Impresion del visor PDF (pdfLayerViewerDom.jsp) */
@media print {
	#printContainer div { page-break-after: always; page-break-inside: avoid; }
	#mozPrintCallback-shim { display: none; }
}
/* Dialogo de progreso de impresion (shim de pdf.js para Firefox) */
#mozPrintCallback-shim { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: var(--dkf-z-blockpage); display: block; text-align: center; background-color: rgba(0, 0, 0, 0.5); }
#mozPrintCallback-shim[hidden] { display: none; }
#mozPrintCallback-shim .mozPrintCallback-dialog-box { display: inline-block; margin: -50px auto 0; position: relative; top: 45%; left: 0; min-width: 220px; max-width: 400px; padding: 9px; border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); background-color: var(--dkf-gray-900); color: var(--dkf-gray-150); font-size: 16px; line-height: 20px; }
#mozPrintCallback-shim .progress-row { clear: both; padding: 1em 0; }
#mozPrintCallback-shim progress { width: 100%; }
#mozPrintCallback-shim .relative-progress { clear: both; float: right; }
#mozPrintCallback-shim .progress-actions { clear: both; }

/* --- Vacaciones: resumen de inicio (holidays/home.jsp) --- */
#homeHolidays .label { padding: 5px; font-size: 11px; }

/* --- Mensaje nuevo del buzon (mailbox/newmsg.jsp). Antes ocultaba .userSelected
   en TODA la aplicacion; ahora solo dentro del formulario del modal. --- */
#newMsgForm .userSelected { display: none; }

/* --- Test de diseno del workflow (manageCompany/modalCheckWorkflowDesign.jsp).
   Panel flotante sobre el disenador; el JS cambia is-warning/is-error. --- */
.wfCheckModal { display: none; position: absolute; top: -95px; right: 5px; z-index: var(--dkf-z-overlay); background-color: var(--dkf-danger); width: 330px; border-radius: 8px; box-shadow: -1px 3px 10px 7px rgba(0, 0, 0, 0.31); }
.wfCheckModal #closeTest { cursor: pointer; color: var(--dkf-white); right: 10px; position: relative; top: 5px; }
.wfCheckModal #design_error { color: var(--dkf-white); padding: 15px; background-color: var(--dkf-danger-strong); border-radius: 0 0 8px 8px; }
.wfCheckModal.is-warning { background-color: var(--dkf-warning); }
.wfCheckModal.is-warning #design_error { background-color: var(--dkf-warning-strong); }
.highlight_test_workflow_warning { border: 3px solid var(--dkf-warning-strong); background-color: var(--dkf-warning); }
.highlight_test_workflow_error { border: 3px solid var(--dkf-danger-strong); background-color: var(--dkf-danger); }

/* --- Cuentas bancarias de la organizacion (manageCompany/orgFinance.jsp) --- */
.finance-box-add { cursor: pointer; margin: 5px; border: 1px dashed var(--dkf-gray-300); border-radius: 5px; height: 120px; text-align: center; padding-top: 20px; text-transform: uppercase; color: var(--dkf-gray-300); background-color: var(--dkf-gray-50); }
.finance-box-add:hover { color: var(--dkf-finance-accent); font-weight: bold; border: 2px dashed var(--dkf-finance-accent); }
.finance-box { position: relative; cursor: pointer; margin: 5px; border: 1px solid var(--dkf-gray-300); border-radius: 5px; height: 120px; text-align: center; padding-top: 10px; color: var(--dkf-gray-300); }
.finance-box-text { text-align: center; width: 100%; position: absolute; bottom: 3px; font-size: 12px; }
.finance-box-delete { position: absolute; top: 5px; right: 5px; font-size: 17px; color: var(--dkf-danger); }
.finance-box-delete:hover { font-size: 20px; }
.finance-box-newLink { position: absolute; top: 5px; right: 5px; font-size: 11px; background-color: antiquewhite; margin: 5px; padding: 4px 8px; border-radius: 5px; }
.finance-bank-box { cursor: pointer; position: relative; text-align: center; padding: 5px; border: 1px solid var(--dkf-gray-150); color: var(--dkf-gray-600); text-transform: uppercase; margin: 5px; height: 80px; font-size: 9px; }
.finance-bank-box:hover, .finance-box:hover { color: var(--dkf-finance-accent); font-weight: bold; border: 2px solid var(--dkf-finance-accent); }
.finance-bank-box div { position: absolute; height: 28px; bottom: 0; text-align: center; width: 90%; }
.finance-bank-box .text-bank { text-align: center; padding-top: 5px; vertical-align: middle; display: inline-block; }
.finance-accounts-line { border-top: 1px solid var(--dkf-gray-50); padding-top: 12px; padding-bottom: 10px; color: var(--dkf-gray-600); height: 40px; }
.finance-accounts-head { color: var(--dkf-gray-150); font-size: 11px; padding-top: 10px; padding-bottom: 10px; text-transform: uppercase; }

/* --- Colores de avatar de la organizacion (manageCompany/orgImageAndColors.jsp) --- */
.avatarColorsContainer { display: flex; flex-wrap: wrap; }
.avatarColorsContainer .colors { cursor: pointer; width: 40px; height: 40px; border-radius: 5px; margin-left: 2px; }

/* --- Version instalada vs. publicada (manageCompany/version.jsp) --- */
.version-panel .box { border: 1px solid var(--dkf-gray-300); border-radius: 21px 0 0 0; box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.3); margin-bottom: 25px; }
.version-panel .version { width: 100%; color: var(--dkf-gray-800); padding-top: 30px; padding-bottom: 30px; font-size: 38px; font-weight: bold; text-align: center; height: 45px; }
.version-panel .nameServer { position: absolute; background-color: var(--dkf-gray-300); color: var(--dkf-white); height: fit-content; top: -8px; right: 5px; padding: 5px 20px; }
/* !important heredado del JSP: gana al color que el tema fija a los iconos .fa */
.version-panel .icon_alert { position: absolute; top: 35px; right: 30px; color: var(--dkf-warning) !important; }
.version-panel .war { color: var(--dkf-gray-800); width: 100%; padding: 5px; text-align: center; }
.version-panel .version.is-expired { color: var(--dkf-danger); }

/* --- Modales de mapeo de robots (robots/modalMappingDynListDB.jsp y
   robots/modalMappingFindTables.jsp): .titleTable era identico en ambos --- */
.titleTable { text-align: center; text-transform: uppercase; font-weight: bold; padding: 10px; }
.box_drag_drop { border-radius: 6px; height: 45px; border: solid 1px var(--dkf-border-light); margin: 5px 0; }
.drag_over { border: dashed 2px var(--dkf-link); }
.star_key_active { color: var(--dkf-link); }
.star_key_non_active { color: var(--dkf-white); }
.item_drag { cursor: move; border-radius: 6px; height: 100%; width: 100%; border: solid 1px var(--dkf-border-light); background-color: var(--dkf-bg-section); text-align: center; padding: 15px 0; font-size: 15px; font-weight: 100; }
.drop_list { margin: 3px 0; }
.item_list { height: 45px; width: 100%; margin: 2px 0; padding: 15px 0; font-size: 15px; font-weight: 100; cursor: pointer; }
.item_elements { cursor: pointer; border-radius: 6px; width: 100%; border: solid 1px var(--dkf-border-light); background-color: var(--dkf-bg-section); text-align: center; padding-top: 8px; font-weight: 100; margin-bottom: 5px; }

/* --- Nube de etiquetas (tags/view.jsp) --- */
#tags ul { margin: 1em 0; padding: .5em 10px; text-align: center; background: var(--dkf-accent); }
#tags li { margin: 0; padding: 0 0 10px; list-style: none; display: inline-block; }
#tags li a { text-decoration: none; color: var(--dkf-white); padding: 0 2px; }
#tags li a:hover { color: var(--dkf-green-alt); }
/* !important heredados del JSP: el tamano por peso gana al font-size de los enlaces del tema */
.tag1 a { font-size: 100% !important; }
.tag2 a { font-size: 120% !important; }
.tag3 a { font-size: 140% !important; } /* !important heredado del JSP tags/view.jsp: gana al font-size de los enlaces del tema */
.tag4 a { font-size: 160% !important; } /* !important heredado del JSP tags/view.jsp: gana al font-size de los enlaces del tema */
.tag5 a { font-size: 180% !important; } /* !important heredado del JSP tags/view.jsp: gana al font-size de los enlaces del tema */

/* --- Finanzas del ticket: cuentas (tickets/finance_accounts.jsp) --- */
.finance-box-accounts { position: relative; margin: 2px; cursor: pointer; border: 1px solid var(--dkf-gray-50); color: var(--dkf-gray-600); }
.product-account { padding: 8px 2px; font-size: 16px; font-weight: lighter; }
.finance-box-accounts:hover { border: 1px solid var(--dkf-finance-accent); }
.finance-box-accounts-selected { border: 1px solid var(--dkf-finance-accent); color: var(--dkf-finance-accent); font-weight: normal; }
.finance-box-refresh { z-index: 2; position: absolute; top: 5px; right: 5px; font-size: 17px; color: var(--dkf-gray-150); }
.finance-box-refresh:hover { color: var(--dkf-gray-400); font-size: 20px; }

/* --- Finanzas del ticket: transacciones similares por IA (tickets/finance_ia.jsp) --- */
.finance-similar-list .col { padding: 0; }
.finance-ticketLine, .finance-transaction, .finance-transaction-confirm { padding: 9px 9px 0 9px; height: 65px; position: relative; margin: 10px 2px; border: 1px solid var(--dkf-gray-50); color: var(--dkf-gray-600); }
.finance-transaction { cursor: pointer; }
.finance-transaction:hover { background-color: var(--dkf-gray-50); border: 1px solid var(--dkf-finance-accent); color: var(--dkf-finance-accent); }
.finance-similar-amount { padding-top: 9px; padding-bottom: 5px; font-size: 18px; }
.finance-similar-text { font-weight: lighter; padding-top: 9px; padding-bottom: 5px; font-size: 15px; }
.finance-similar-date { font-weight: bold; }
.finance-similar { margin: 5px; position: relative; border: 2px dashed var(--dkf-gray-50); border-radius: 5px; padding: 5px; }
.finance-similar-init { border: 2px dashed var(--dkf-khaki); }
.finance-similar:hover { border: 2px dashed var(--dkf-gray-600); }
.finance-similar-confim { border: 2px solid var(--dkf-olive); }
.finance-similar-transaction-deleted { cursor: pointer; margin-top: -8px; margin-left: -5px; font-size: 17px; color: var(--dkf-danger); }
.finance-similar-transaction-deleted:hover { font-size: 21px; }
.finance-similar-bottom { position: absolute; bottom: 2px; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finance-similar-height { height: 100%; }
#modalSimilarFind .selectedTransaction { display: none; }

/* --- Estadisticas de tickets (tickets/stats.jsp, tickets/stats_graphs.jsp) --- */
.ticketMapPopup { min-width: 180px; }
.ticketMapPopup h6 { color: var(--dkf-slate-600); }
#mapStats .mapboxgl-popup-content { border-radius: 8px; padding: 12px 14px; }
.ticketStatsFilters .card { border: 1px solid var(--dkf-border-light); }
.ticketStatsFilters .card-title { color: var(--dkf-slate-500); font-size: 12px; letter-spacing: .5px; }
.ticketStatsSection h4 { color: var(--dkf-slate-600); border-bottom: 1px solid var(--dkf-border-light); padding-bottom: 6px; }
.ticketStatsSection .statsChartBox { position: relative; height: 320px; }
.ticketStatsSection .statsChartBox.tall { height: 360px; }
.ticketStatsSection .col-table td.num, .ticketStatsSection .col-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ticketStatsSection .col-table td.pct { text-align: right; color: var(--dkf-slate-500); font-variant-numeric: tabular-nums; }
.ticketStatsSection .legendDot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.ticketStatsSection .titleCell { display: flex; align-items: center; gap: 8px; }
.ticketStatsSection tr.totalRow td { background: var(--dkf-gray-100); color: var(--dkf-gray-900); font-weight: 600; border-top: 2px solid var(--dkf-slate-400); }
/* Geocoder de Mapbox en el modal de ticket (tickets/view.jsp) */
#geocoder { z-index: 1; width: 100%; text-align: center; top: 20px; }
.mapboxgl-ctrl-geocoder { min-width: 100%; }

/* --- Perfil de usuario (userProfile/view.jsp) --- */
.profileSelected { border-bottom: 3px solid var(--dkf-green-alt); }

/* =============================================================================
   Timings por paso de workflow — pantalla actual (manageSystem/timingSteps/
   timingsByStepApproval_.jsp, accion timmingsByStepApproval). Antes en
   timingsByStepApproval.styles.jspf. Tokens --dkf-ts-* del :root.
   ============================================================================= */
/* Reglas compartidas por las dos pantallas de timings (actual y OLD):
   tarjetas de usuario, panel de totales y caja de distribucion. Cada pantalla
   anade debajo solo sus diferencias. */
#timingStepsView .card_users, #timingsByStepApproval .card_users { background: var(--dkf-white); border: 1px solid var(--dkf-ts-border-soft); border-left-width: 4px; border-left-color: var(--dkf-ts-neutral); padding: 8px 12px; margin-bottom: 10px; }
#timingStepsView .card_users_inner, #timingsByStepApproval .card_users_inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#timingStepsView .card_users_left, #timingsByStepApproval .card_users_left { flex: 1 1 auto; min-width: 0; }
#timingStepsView .card_users_right, #timingsByStepApproval .card_users_right { flex: 0 0 auto; min-width: 110px; text-align: right; }
#timingStepsView .card_users.card-actions, #timingsByStepApproval .card_users.card-actions { border-left-color: var(--dkf-ts-green); }
#timingStepsView .card_users.card-average, #timingsByStepApproval .card_users.card-average { border-left-color: var(--dkf-ts-blue); }
#timingStepsView .card_users.card-pending, #timingsByStepApproval .card_users.card-pending { border-left-color: var(--dkf-ts-red); }
#timingStepsView .user_name_avatar, #timingsByStepApproval .user_name_avatar { display: flex; align-items: center; gap: 10px; }
#timingStepsView #tsDistInfo, #timingsByStepApproval #timingDistInfo { font-size: 12px; color: var(--dkf-ts-muted); margin-bottom: 10px; background: var(--dkf-ts-bg); border: 1px solid var(--dkf-ts-border-soft); border-radius: 10px; padding: 8px 10px; text-align: left; line-height: 1.35; }
#timingStepsView .totals-panel, #timingsByStepApproval .totals-panel { background: var(--dkf-ts-bg-light); border: 1px solid var(--dkf-ts-border-soft); padding: 12px; text-align: left; }
#timingStepsView .totals-title, #timingsByStepApproval .totals-title { font-size: 13px; font-weight: 600; color: var(--dkf-ts-title); margin-bottom: 8px; text-transform: uppercase; }
#timingStepsView .totals-panel-body, #timingsByStepApproval .totals-panel-body { display: flex; align-items: center; gap: 10px; }
#timingStepsView .totals-chart-wrap, #timingsByStepApproval .totals-chart-wrap { height: 120px; width: 46%; min-width: 130px; position: relative; }
#timingStepsView .totals-center-text, #timingsByStepApproval .totals-center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
#timingStepsView .totals-center-number, #timingsByStepApproval .totals-center-number { display: block; font-size: 24px; line-height: 1.05; font-weight: 700; color: var(--dkf-ts-text-2); }
#timingStepsView .totals-center-label, #timingsByStepApproval .totals-center-label { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--dkf-ts-muted); text-transform: uppercase; }
#timingStepsView .totals-summary, #timingsByStepApproval .totals-summary { width: 54%; min-width: 0; }
#timingStepsView .totals-row, #timingsByStepApproval .totals-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--dkf-ts-border-soft); font-size: 13px; }
#timingStepsView .totals-row:first-of-type, #timingsByStepApproval .totals-row:first-of-type { border-top: 0; }
#timingStepsView .totals-label, #timingsByStepApproval .totals-label { color: var(--dkf-ts-muted); font-weight: 600; }
#timingStepsView .totals-value, #timingsByStepApproval .totals-value { color: var(--dkf-ts-text-2); font-weight: 600; }
#timingStepsView .totals-pct-badge, #timingsByStepApproval .totals-pct-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 10px; font-weight: 600; border-radius: 999px; background: var(--dkf-ts-bg-strong); color: var(--dkf-ts-label); }

#timingStepsView { border: 1px solid var(--dkf-ts-border); padding: 16px; background: var(--dkf-white); }
#timingStepsView .nav-tabs { border-bottom: 1px solid var(--dkf-ts-border); margin-bottom: 12px; }
#timingStepsView .nav-tabs li a { border: 0; border-bottom: 2px solid transparent; color: var(--dkf-ts-muted); font-weight: 600; cursor: pointer; }
#timingStepsView .nav-tabs li.active a,
#timingStepsView .nav-tabs li a.active { color: var(--dkf-ts-text); border-bottom-color: var(--dkf-ts-primary); }
#timingStepsView .ts-card { border: 1px solid var(--dkf-ts-border); background: var(--dkf-ts-bg-light); padding: 10px; height: 100%; }
#timingStepsView .ts-title { font-size: 13px; font-weight: 700; color: var(--dkf-ts-title); margin-bottom: 8px; }
#timingStepsView .table { margin-bottom: 0; font-size: 12px; }
#timingStepsView .tab-pane { min-height: 180px; }
#timingStepsView .ts-muted { color: var(--dkf-ts-muted); font-size: 12px; }
#timingStepsView .ts-chart-card { height: auto; background: var(--dkf-white); }
#timingStepsView .ts-steps-card { height: auto; max-height: 320px; overflow: hidden; }
#timingStepsView .ts-chart-wrap { position: relative; height: 320px; min-height: 320px; max-height: 320px; }
/* !important heredado del JSP: gana al overflow que fija .table-responsive del tema */
#timingStepsView .ts-steps-table-wrap { overflow-y: auto !important; overflow-x: auto; max-height: 280px; }
/* !important: Chart.js escribe height inline en el canvas al redimensionar */
#timingStepsView #tsTab1Chart { height: 100% !important; }
#timingStepsView .ts-main-title { text-align: center; font-size: 18px; line-height: 1.05; font-weight: 700; color: var(--dkf-ts-title); margin: 4px 0 10px; text-transform: uppercase; }
#timingStepsView .ts-controls-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
#timingStepsView .ts-controls-sep { width: 1px; height: 28px; background: var(--dkf-ts-border); }
#timingStepsView #tsTimingButtons .btn,
#timingStepsView #tsModeButtons .btn,
#timingStepsView #tsPendingButtons .btn { border-radius: 999px; min-width: 68px; font-weight: 700; }
#timingStepsView .title_card_step { font-size: 10px; font-weight: 600; margin-bottom: 2px; opacity: .9; }
#timingStepsView .number_card_step { font-size: 24px; font-weight: 700; margin: 0; line-height: 1; }
#timingStepsView .totals-panel { margin-bottom: 10px; }
#timingStepsView .ts-skeleton { position: relative; overflow: hidden; background: var(--dkf-ts-bg-strong); border-radius: 8px; }
#timingStepsView .ts-skeleton::after { content: ''; position: absolute; top: 0; left: -120%; height: 100%; width: 120%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); animation: tsShimmer 1.3s infinite; }
@keyframes tsShimmer { 100% { left: 120%; } }
#timingStepsView .ts-skel-row { margin-bottom: 10px; }
#timingStepsView .ts-skel-card { height: 86px; }
#timingStepsView .ts-skel-donut { height: 170px; }
#timingStepsView .ts-skel-chart { height: 100%; min-height: 320px; }
#timingStepsView .ts-skel-steps { height: 280px; }
#timingStepsView .ts-skel-list { height: 280px; }
#timingStepsView .ts-skel-tab3 { height: 300px; }
#timingStepsView .ts-filter-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--dkf-ts-bg-strong); color: var(--dkf-ts-label); font-size: 11px; font-weight: 700; white-space: nowrap; }
#timingStepsView .ts-filter-chip a { color: var(--dkf-ts-red); font-size: 13px; line-height: 1; text-decoration: none; }
#timingStepsView .timingStep_box { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 700; color: var(--dkf-white); line-height: 1.25; white-space: nowrap; }
#timingStepsView .ts-detail-filters { margin-bottom: 12px; }
#timingStepsView .ts-detail-list .row { margin-left: -8px; margin-right: -8px; }
#timingStepsView .ts-detail-list .row > div { padding-left: 8px; padding-right: 8px; margin-bottom: 16px; }
#timingStepsView .ts-detail-list h4 { font-size: 13px; font-weight: 600; color: var(--dkf-ts-title); margin-bottom: 8px; }
#timingStepsView .ts-detail-list { background: transparent; border: 0; padding: 0; }
#timingStepsView .ts-tab3-grid { margin-left: -10px; margin-right: -10px; }
#timingStepsView .ts-tab3-cell { padding-left: 10px; padding-right: 10px; margin-bottom: 20px; }
#timingStepsView .ts-tab3-card { background: var(--dkf-white); border: 1px solid var(--dkf-ts-border); border-radius: 0; box-shadow: none; padding: 12px; height: 100%; }
#timingStepsView .ts-tab3-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#timingStepsView .ts-tab3-card-title { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--dkf-ts-title); text-transform: uppercase; margin: 0; }
#timingStepsView .ts-tab3-card-badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 0; background: var(--dkf-ts-bg); color: var(--dkf-ts-muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
#timingStepsView .ts-tab3-chart-wrap { position: relative; height: 250px; min-height: 250px; }
/* !important: Chart.js escribe width/height inline en el canvas */
#timingStepsView .ts-tab3-card canvas { height: 100% !important; width: 100% !important; }
#timingStepsView .ts-tab2-chart-card { background: var(--dkf-white); border: 1px solid var(--dkf-ts-border); border-radius: 0; box-shadow: none; padding: 16px; margin-bottom: 14px; }
#timingStepsView .ts-tab2-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#timingStepsView .ts-tab2-chart-title { margin: 0; color: var(--dkf-ts-title); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
#timingStepsView .ts-tab2-chart-subtitle { color: var(--dkf-ts-muted); font-size: 12px; line-height: 1.35; margin-top: 3px; }
#timingStepsView .ts-top-tabs li { text-transform: uppercase; }
#timingStepsView .ts-tab2-chart-badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--dkf-ts-bg-strong); color: var(--dkf-ts-label); font-size: 10px; font-weight: 700; white-space: nowrap; }
#timingStepsView .ts-tab2-chart-wrap { position: relative; height: 320px; min-height: 320px; }
/* !important: Chart.js escribe width/height inline en el canvas */
#timingStepsView .ts-tab2-chart-wrap canvas { height: 100% !important; width: 100% !important; }

/* =============================================================================
   Timings por paso de workflow — pantalla anterior (manageSystem/
   timingsByStepApproval_.jsp, accion timmingsByStepApprovalOLD, que abre
   dokuflex.js desde el disenador). Mismo lenguaje visual y mismos tokens
   --dkf-ts-* que la pantalla actual.
   ============================================================================= */
#timingsByStepApproval { font-family: "Avenir Next", "Montserrat", "Segoe UI", sans-serif; color: var(--dkf-ts-text); background: var(--dkf-white); border: 1px solid var(--dkf-ts-border); border-radius: 0; padding: 20px; box-shadow: none; }
#timingsByStepApproval .btn.btn-xs { border-radius: 999px; font-weight: 600; letter-spacing: 0.02em; }
#timingsByStepApproval .nav-tabs { border-bottom: 0; gap: 8px; margin-bottom: 16px; }
#timingsByStepApproval .nav-tabs li a { border: 0; border-radius: 0; color: var(--dkf-ts-muted); background: transparent; padding: 8px 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
#timingsByStepApproval .nav-tabs li a.active,
#timingsByStepApproval .nav-tabs li a:hover { color: var(--dkf-ts-text); background: transparent; font-weight: 600; border-bottom: 2px solid var(--dkf-ts-primary); }
#timingsByStepApproval .tab-content { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(4px); border: 1px solid var(--dkf-ts-border); border-radius: 0; padding: 16px; }
#timingsByStepApproval .card_users { border-radius: 0; box-shadow: none; animation: none; }
#timingsByStepApproval .card_users_left,
#timingsByStepApproval .card_users_right { height: 100%; display: flex; align-items: center; }
#timingsByStepApproval .card_users_right { justify-content: center; flex-direction: column; align-items: flex-end; }
#timingsByStepApproval .card_users.card-actions .title_card_step,
#timingsByStepApproval .card_users.card-actions .number_card_step { color: var(--dkf-ts-green); }
#timingsByStepApproval .card_users.card-average .title_card_step,
#timingsByStepApproval .card_users.card-average .number_card_step { color: var(--dkf-ts-blue); }
#timingsByStepApproval .card_users.card-pending .title_card_step,
#timingsByStepApproval .card_users.card-pending .number_card_step { color: var(--dkf-ts-red); }
#timingsByStepApproval .title_card_step { letter-spacing: 0.02em; font-size: 8px; font-weight: 600; margin-bottom: 2px; text-align: right; opacity: 0.9; width: 100%; }
#timingsByStepApproval .number_card_step { font-size: 26px; font-weight: 600; margin: 0; line-height: 1; width: 100%; text-align: right; }
#timingsByStepApproval .card_users .h5 { margin: 0; font-size: 14px; line-height: 1.1; }
#timingsByStepApproval .user-avatar-title_name,
#timingsByStepApproval #card_id_max_action_name,
#timingsByStepApproval #card_id_max_fast_name,
#timingsByStepApproval #card_id_max_open_name { font-size: 14px; font-weight: 600; color: var(--dkf-ts-text-2); white-space: normal; overflow: visible; text-overflow: initial; line-height: 1.15; word-break: break-word; }
#timingsByStepApproval .card_users .user_name_avatar { display: flex; align-items: center; min-height: 64px; }
#timingsByStepApproval .cards_top_row { margin-bottom: 8px; }
#timingsByStepApproval .cards_top_row .card_users { margin-bottom: 12px; }
#timingsByStepApproval .timings_list2 { background: var(--dkf-ts-bg); border: 1px solid var(--dkf-ts-border-soft); border-radius: 0; padding: 14px; height: 100%; display: flex; flex-direction: column; min-height: 0; }
#timingsByStepApproval .timings_list2 h4 { margin-bottom: 12px; font-weight: 600; letter-spacing: 0.02em; font-size: 13px; color: var(--dkf-ts-label); }
/* !important heredados del JSP en toda la tabla de pasos: anulan el fondo y
   los bordes que el tema fija a .table/.table-striped y los style="" inline
   que escribe el JS de la pantalla en filas y celdas */
#timingsByStepApproval .workflowStepsTable { background: transparent !important; margin-bottom: 0; } /* !important heredado del JSP timingsByStepApproval: gana a .table del tema y al style inline del JS */
#timingsByStepApproval #chartTimmings { align-items: stretch; }
#timingsByStepApproval #chartTimmings > .col-md-8,
#timingsByStepApproval #chartTimmings > .col-md-4 { display: flex; flex-direction: column; min-height: 0; }
#timingsByStepApproval #chartTimmings .timings_list2 .table-responsive { flex: 1 1 0; min-height: 0; overflow-y: auto !important; overflow-x: auto; } /* !important heredado del JSP timingsByStepApproval: gana a .table del tema y al style inline del JS */
#timingsByStepApproval .workflowStepsTable thead th { background: var(--dkf-ts-bg-strong); border-bottom-width: 1px; color: var(--dkf-ts-label); font-weight: 600; border-color: var(--dkf-ts-border) !important; } /* !important heredado del JSP timingsByStepApproval: gana a .table del tema y al style inline del JS */
#timingsByStepApproval .workflowStepsTable tbody tr:hover { background: var(--dkf-ts-bg-strong) !important; } /* !important heredado del JSP timingsByStepApproval: gana a .table del tema y al style inline del JS */
#timingsByStepApproval .workflowStepsTable.table-striped > tbody > tr:nth-of-type(odd),
#timingsByStepApproval .workflowStepsTable.table-striped > tbody > tr:nth-of-type(even) { background-color: var(--dkf-ts-bg) !important; } /* !important heredado del JSP timingsByStepApproval: gana a .table del tema y al style inline del JS */
#timingsByStepApproval .timings_list2 .workflowStepsTable > tbody > tr,
#timingsByStepApproval .timings_list2 .workflowStepsTable > tbody > tr > td,
#timingsByStepApproval .timings_list2 .workflowStepsTable > tbody > tr > th { font-size: small; background-color: var(--dkf-ts-bg) !important; } /* !important heredado del JSP timingsByStepApproval: gana a .table del tema y al style inline del JS */
#timingsByStepApproval .timings_list2 .workflowStepsTable > tbody > tr[style],
#timingsByStepApproval .timings_list2 .workflowStepsTable > tbody > tr > td[style],
#timingsByStepApproval .timings_list2 .workflowStepsTable > tbody > tr > th[style] { background-color: var(--dkf-ts-bg) !important; } /* !important heredado del JSP timingsByStepApproval: gana a .table del tema y al style inline del JS */
#timingsByStepApproval .workflowStepsTable td,
#timingsByStepApproval .workflowStepsTable th { background: transparent !important; border-color: var(--dkf-ts-border) !important; } /* !important heredado del JSP timingsByStepApproval: gana a .table del tema y al style inline del JS */
#timingsByStepApproval .workflowStepsTable tbody td { color: var(--dkf-ts-text-2); }
#timingsByStepApproval .button-chart-timings { margin-bottom: 12px; }
#timingsByStepApproval .button-chart-timings .btn,
#timingsByStepApproval .button-chart-mode .btn { min-width: 72px; border-radius: 999px; }
#timingsByStepApproval .button-chart-mode { margin-bottom: 10px; }
#timingsByStepApproval .chart-controls-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#timingsByStepApproval .chart-controls-row .button-chart-timings,
#timingsByStepApproval .chart-controls-row .button-chart-mode { margin-bottom: 0; }
#timingsByStepApproval #summaryProcess .text_light { font-size: 20px; font-weight: 600; letter-spacing: 0.01em; color: var(--dkf-ts-title); margin: 6px 0 10px; }
#timingsByStepApproval .totals_top_row { margin-bottom: 12px; }
#timingsByStepApproval .totals-chart-wrap { margin: 0; }
#timingsByStepApproval .totals-center-text { pointer-events: none; }
#timingsByStepApproval .totals-pct-badge { line-height: 1.4; vertical-align: middle; }
#timingsByStepApproval #summaryProcess .col-md-6.col-12.text-center,
#timingsByStepApproval #summaryProcess .col-md-12.col-12.text-center { background: var(--dkf-white); border: 0; padding: 12px; }
#timingsByStepApproval #summaryProcess .col-md-12.col-12.text-center { margin-top: 10px; }
/* !important: Chart.js escribe height inline en el canvas */
#timingsByStepApproval #approvalChart3 { height: 280px !important; }
#timingsByStepApproval [data-name="timingStepApproval"],
#timingsByStepApproval [data-name="timingStepUserApproval"] { margin-top: 14px; background: var(--dkf-white); border: 1px solid var(--dkf-ts-border); border-radius: 0; padding: 8px; }
#timingsByStepApproval .user-avatar { border-radius: 50%; border: 0; box-shadow: none; object-fit: cover; }
#timingsByStepApproval .text_graphic { font-size: 24px; font-weight: 600; color: var(--dkf-ts-blue-dark); }
#timingsByStepApproval .form-control,
#timingsByStepApproval .input-group-text { border-radius: 10px; }
#timingsByStepApproval .listWorkflowsStepsConfig .well { border-radius: 0; border: 1px solid var(--dkf-ts-border); background: linear-gradient(180deg, var(--dkf-white), var(--dkf-ts-bg-light)); }
@keyframes msFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 991px) {
	#timingsByStepApproval { padding: 14px; border-radius: 0; }
	#timingsByStepApproval .tab-content { padding: 12px; }
	#timingsByStepApproval .number_card_step { font-size: 22px; }
	#timingsByStepApproval .card_users_inner { min-height: 56px; }
	#timingsByStepApproval .card_users .user_name_avatar { min-height: 56px; }
	#timingsByStepApproval .cards_top_row { margin-bottom: 4px; }
	/* !important: Chart.js escribe height inline en el canvas */
	#timingsByStepApproval #approvalChart3 { height: 220px !important; }
	#timingsByStepApproval .totals-center-number { font-size: 20px; }
	#timingsByStepApproval .totals-panel-body { flex-direction: column; align-items: stretch; }
	#timingsByStepApproval .totals-chart-wrap,
	#timingsByStepApproval .totals-summary { width: 100%; }
}

/* =============================================================================
   Envios seguros. Definicion UNICA de:
   - el portlet secureTransfer (jsp/portlets/secureTransfer/view.jsp +
     dokuflex.securetransfer.js): listado, formulario de envio y detalle;
   - la pagina del destinatario (themes/dokuflex/secureTransfer.jsp), que reutiliza
     #body_public_link (logo, contenedor y pie del enlace publico).
   Los estados usan los badges de Bootstrap (bg-*), igual que el email certificado.
   Los selectores .oneTimeSecretPortlet .ots- que acompanan a los .st- son el
   portlet de secretos de un solo uso, que comparte esta estructura (ver la
   seccion "Secretos de un solo uso" para lo que solo es suyo).
   ============================================================================= */
.secureTransferPortlet .st-toolbar,
.oneTimeSecretPortlet .ots-toolbar,
.certifiedMailPortlet .cm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.secureTransferPortlet .st-toolbar-search,
.oneTimeSecretPortlet .ots-toolbar-search,
.certifiedMailPortlet .cm-toolbar-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.secureTransferPortlet .st-toolbar-search .fa-magnifying-glass,
.oneTimeSecretPortlet .ots-toolbar-search .fa-magnifying-glass,
.certifiedMailPortlet .cm-toolbar-search .fa-magnifying-glass { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--dkf-slate-400); }
.secureTransferPortlet .st-toolbar-search .form-control,
.oneTimeSecretPortlet .ots-toolbar-search .form-control,
.certifiedMailPortlet .cm-toolbar-search .form-control {
	/* La lupa (left:10px) quedaba encima del placeholder: la regla global
	   `.form-control { padding:9px 12px!important }` de este mismo fichero pisa este
	   padding-left aunque aqui haya mas especificidad. Mismo caso y misma solucion
	   que #community_menu_search_input.cmm-search .form-control. */
	padding-left: 32px !important; /* gana al !important global de .form-control */
}
.secureTransferPortlet .st-toolbar-scope,
.oneTimeSecretPortlet .ots-toolbar-scope,
.certifiedMailPortlet .cm-toolbar-scope { margin: 0; }
.secureTransferPortlet .st-toolbar-new,
.oneTimeSecretPortlet .ots-toolbar-new,
.certifiedMailPortlet .cm-toolbar-new { margin-left: auto; }
.secureTransferPortlet .st-table tbody tr[data-id],
.oneTimeSecretPortlet .ots-table tbody tr[data-id],
.certifiedMailPortlet .cm-table tbody tr[data-id] { cursor: pointer; }
.secureTransferPortlet .st-table tbody tr[data-id]:focus-visible,
.oneTimeSecretPortlet .ots-table tbody tr[data-id]:focus-visible,
.certifiedMailPortlet .cm-table tbody tr[data-id]:focus-visible { outline: 2px solid var(--dkf-focus); outline-offset: -2px; }
.secureTransferPortlet .st-subject { display: block; font-weight: 600; color: var(--dkf-slate-800); }
.secureTransferPortlet .st-sender { display: block; font-size: 0.85em; color: var(--dkf-slate-500); }
.secureTransferPortlet .st-chip { display: inline-flex; align-items: center; gap: 5px; margin: 0 4px 4px 0; padding: 1px 8px; border-radius: 999px; background: var(--dkf-surface-muted); border: 1px solid var(--dkf-border-card); font-size: 0.85em; color: var(--dkf-slate-700); }
.secureTransferPortlet .st-chip-more { color: var(--dkf-slate-500); }
.secureTransferPortlet .st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dkf-slate-400); }
.secureTransferPortlet .st-dot-delivered,
.secureTransferPortlet .st-dot-opened { background: var(--dkf-info); }
.secureTransferPortlet .st-dot-downloaded { background: var(--dkf-green-dark); }
.secureTransferPortlet .st-dot-failed,
.secureTransferPortlet .st-dot-revoked { background: var(--dkf-danger-dark); }
.secureTransferPortlet .st-empty,
.oneTimeSecretPortlet .ots-empty,
.certifiedMailPortlet .cm-empty { text-align: center; padding: 40px 16px; color: var(--dkf-slate-500); }
.secureTransferPortlet .st-empty-icon,
.oneTimeSecretPortlet .ots-empty-icon,
.certifiedMailPortlet .cm-empty-icon { font-size: 36px; color: var(--dkf-slate-400); margin-bottom: 12px; }
.secureTransferPortlet .st-empty-title,
.oneTimeSecretPortlet .ots-empty-title,
.certifiedMailPortlet .cm-empty-title { font-size: 1.1rem; font-weight: 600; color: var(--dkf-slate-700); margin-bottom: 4px; }
.secureTransferPortlet .st-pager,
.oneTimeSecretPortlet .ots-pager,
.certifiedMailPortlet .cm-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--dkf-slate-500); }

.secureTransferPortlet .st-section-title { font-size: 1rem; font-weight: 600; color: var(--dkf-slate-800); margin: 22px 0 10px; }
.secureTransferPortlet .st-section-title:first-child { margin-top: 4px; }
/* Formulario de envio: cuatro paneles (.panel del tema) con cabecera, descripcion y contador */
.secureTransferPortlet .st-form,
.oneTimeSecretPortlet .ots-form,
.certifiedMailPortlet .cm-form { max-width: 960px; }
.secureTransferPortlet .st-panel,
.oneTimeSecretPortlet .ots-panel,
.certifiedMailPortlet .cm-panel { margin-bottom: 16px; }
.secureTransferPortlet .st-panel .panel-heading,
.oneTimeSecretPortlet .ots-panel .panel-heading,
.certifiedMailPortlet .cm-panel .panel-heading { border-bottom: 1px solid var(--dkf-border-card); }
.secureTransferPortlet .st-panel .panel-title,
.oneTimeSecretPortlet .ots-panel .panel-title,
.certifiedMailPortlet .cm-panel .panel-title { display: flex; align-items: center; gap: 8px; }
.secureTransferPortlet .st-panel .panel-label,
.oneTimeSecretPortlet .ots-panel .panel-label,
.certifiedMailPortlet .cm-panel .panel-label { font-weight: 600; color: var(--dkf-slate-800); }
.secureTransferPortlet .st-panel .panel-icon,
.oneTimeSecretPortlet .ots-panel .panel-icon,
.certifiedMailPortlet .cm-panel .panel-icon { color: var(--dkf-primary); }
.secureTransferPortlet .st-panel .button-on-heading,
.oneTimeSecretPortlet .ots-panel .button-on-heading,
.certifiedMailPortlet .cm-panel .button-on-heading { margin-left: auto; }
.secureTransferPortlet .st-panel-desc,
.oneTimeSecretPortlet .ots-panel-desc,
.certifiedMailPortlet .cm-panel-desc { margin: 4px 0 0; font-size: 0.85em; color: var(--dkf-slate-500); }
/* doble clase: .panel-title .label del tema pinta el badge redondo y en blanco */
.secureTransferPortlet .panel-title .label.st-panel-count { top: 0; margin-left: 0; min-width: 22px; padding: 2px 7px !important; border-radius: 999px; background: var(--dkf-primary); color: var(--dkf-white); text-align: center; }
.secureTransferPortlet .panel-title .label.st-panel-count.is-empty { background: var(--dkf-slate-200); color: var(--dkf-slate-600); }

/* =============================================================================
   Destinatarios (componente comun dokuflex.recipients.js): campo "Para" como
   chips con avatar, combobox de sugerencias de la agenda, modal "Mis
   destinatarios" y ayudas del listado (pildoras de estado con contador, fechas
   relativas, chips compactos, CTA en el vacio). Lo comparten secureTransfer,
   certifiedMail y oneTimeSecret; antes cada uno pintaba una fila de input por
   email con su propio CSS (.st-recipient / .cm-recipient).
   ========================================================================== */
.dkf-recipients { position: relative; }
.dkf-recipients-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 5px 8px; background: var(--dkf-white); border: 1px solid var(--dkf-border-input); border-radius: var(--dkf-radius); cursor: text; transition: border-color var(--dkf-transition-fast), box-shadow var(--dkf-transition-fast); }
.dkf-recipients.is-focused .dkf-recipients-field { border-color: var(--dkf-primary); box-shadow: 0 0 0 3px var(--dkf-focus-ring); }
.dkf-chips { display: contents; list-style: none; margin: 0; padding: 0; }
.dkf-recipients-input { flex: 1 1 160px; min-width: 120px; border: 0; outline: 0; background: transparent; padding: 4px 2px; font: inherit; color: var(--dkf-slate-800); }
.dkf-recipients-input::placeholder { color: var(--dkf-slate-400); }
.dkf-recipients.is-full .dkf-recipients-input { flex-basis: 10px; min-width: 10px; }
.dkf-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 6px 2px 2px; border-radius: 999px; background: var(--dkf-surface-muted); border: 1px solid var(--dkf-border-card); color: var(--dkf-slate-800); font-size: 0.9em; line-height: 1.2; }
.dkf-chip:focus-visible { outline: 2px solid var(--dkf-primary); outline-offset: 1px; }
.dkf-chip.is-invalid { background: var(--dkf-alert-danger-bg); border-color: var(--dkf-alert-danger-border); color: var(--dkf-danger-dark); }
.dkf-chip.is-dup { animation: dkfChipDup 0.9s ease; }
@keyframes dkfChipDup { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--dkf-focus-ring); } }
.dkf-chip-text { display: inline-flex; flex-direction: column; min-width: 0; }
.dkf-chip-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.dkf-chip-name + .dkf-chip-value { font-size: 0.85em; color: var(--dkf-slate-500); }
.dkf-chip-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.dkf-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--dkf-slate-500); padding: 0; cursor: pointer; }
.dkf-chip-remove:hover,
.dkf-chip-remove:focus-visible { background: var(--dkf-slate-200); color: var(--dkf-danger-dark); outline: 0; }
/* avatar con la inicial: el color sale de un hash del email, siempre el mismo */
.dkf-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; color: var(--dkf-white); font-size: 0.75em; font-weight: 700; letter-spacing: 0.02em; }
.dkf-avatar-0 { background: var(--dkf-primary); }
.dkf-avatar-1 { background: var(--dkf-teal); }
.dkf-avatar-2 { background: var(--dkf-kpi-purple); }
.dkf-avatar-3 { background: var(--dkf-green-dark); }
.dkf-avatar-4 { background: var(--dkf-kpi-orange-dark); }
.dkf-avatar-5 { background: var(--dkf-kpi-pink-dark); }
.dkf-avatar-6 { background: var(--dkf-kpi-cyan-dark); }
.dkf-avatar-7 { background: var(--dkf-slate-600); }
.dkf-avatar-invalid { background: var(--dkf-danger-dark); }
.dkf-recipients-hint { margin: 6px 0 0; font-size: 0.85em; color: var(--dkf-slate-500); }
.dkf-recipients-hint.is-error { color: var(--dkf-danger-dark); }
/* combobox de sugerencias (tambien sobre un input suelto: .dkf-suggest-anchor) */
.dkf-suggest-anchor { position: relative; }
.dkf-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: var(--dkf-z-dropdown); max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--dkf-white); border: 1px solid var(--dkf-border-card); border-radius: var(--dkf-radius); box-shadow: var(--dkf-shadow-md); }
.dkf-suggest-head { padding: 6px 10px 4px; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dkf-slate-500); }
.dkf-suggest-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--dkf-radius-sm); cursor: pointer; color: var(--dkf-slate-800); }
.dkf-suggest-item:hover,
.dkf-suggest-item.is-active { background: var(--dkf-primary-tint); }
.dkf-suggest-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.dkf-suggest-name { font-weight: 600; }
.dkf-suggest-name + .dkf-suggest-value { font-size: 0.85em; color: var(--dkf-slate-500); }
.dkf-suggest-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dkf-suggest mark { background: transparent; color: var(--dkf-primary); font-weight: 700; padding: 0; }
.dkf-suggest-kind { color: var(--dkf-slate-400); flex: 0 0 auto; }
/* agenda "Mis destinatarios" (modal con DataGrid) */
.dkf-book-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.dkf-book-search { position: relative; flex: 1 1 auto; }
.dkf-book-search > .fal { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--dkf-slate-400); pointer-events: none; }
.dkf-book-search .form-control { padding-left: 32px !important; /* gana al !important global de .form-control (igual que .cm-toolbar-search) */ }
.dkf-book-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; margin-bottom: 12px; padding: 12px; border: 1px solid var(--dkf-border-card); border-radius: var(--dkf-radius); background: var(--dkf-surface-muted); }
.dkf-book-form .form-group { margin-bottom: 0; }
.dkf-book-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.dkf-book-name { vertical-align: middle; }
.dkf-book-grid .dkf-avatar { vertical-align: middle; margin-right: 4px; }
.dkf-book-star.is-on { color: var(--dkf-gold); }
.dkf-book-grid table tbody tr[data-id] { cursor: pointer; }
.dkf-book-grid table tbody tr.dkf-book-selected > td { background: var(--dkf-primary-tint); }
.dkf-book-actions { display: flex; gap: 8px; }
/* !important: grid.js hace .show() sobre los hijos del paginador y deja display inline. El total ya se ve en la barra superior. */
.dkf-book-grid > .targetPagination .label-num-reg { display: none !important; }
/* listado: pildoras de estado con contador (tokens --dkf-tab-* del hub) */
.dkf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* en la barra del listado van en su propia fila, debajo del buscador y los botones */
.secureTransferPortlet .st-toolbar-status,
.oneTimeSecretPortlet .ots-toolbar-status,
.certifiedMailPortlet .cm-toolbar-status { flex: 1 1 100%; order: 10; margin-top: 2px; }
.dkf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--dkf-border-card); background: var(--dkf-tab-bg); color: var(--dkf-tab-color); font-size: var(--dkf-tab-font-size); cursor: pointer; transition: background var(--dkf-transition-fast), color var(--dkf-transition-fast); }
.dkf-pill:hover { background: var(--dkf-primary-tint); }
.dkf-pill.is-active { background: var(--dkf-tab-bg-active); color: var(--dkf-tab-color-active); border-color: var(--dkf-tab-active); }
.dkf-pill:focus-visible { outline: 2px solid var(--dkf-primary); outline-offset: 2px; }
.dkf-pill-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--dkf-slate-200); color: var(--dkf-slate-700); font-size: 0.8em; font-weight: 600; text-align: center; }
.dkf-pill.is-active .dkf-pill-count { background: var(--dkf-primary); color: var(--dkf-white); }
/* listado: fechas relativas (la absoluta va en title) y chips compactos */
.dkf-rel { white-space: nowrap; cursor: help; border-bottom: 1px dotted var(--dkf-border-input); }
.dkf-rel-expired { color: var(--dkf-danger-dark); }
.dkf-rel-soon { color: var(--dkf-warning-dark); }
.dkf-chips-inline { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.dkf-chip-sm { padding: 1px 6px 1px 1px; font-size: 0.85em; }
.dkf-chip-sm .dkf-avatar { width: 18px; height: 18px; font-size: 0.65em; }
.dkf-chip-more { padding-left: 8px; color: var(--dkf-slate-500); }
.dkf-empty-cta { margin-top: 12px; }
/* Estado vacio con llamada a la accion (DokuflexRecipients.list.emptyCta): la celda vacia del
   grid es una caja de 150px con el contenido centrado en absoluto, pensada para icono + 2 lineas;
   con el boton debajo se desbordaba y salia recortado. Con la clase, alto natural y flujo normal. */
.table-no-result > div.dkf-has-cta { height: auto; min-height: 150px; float: none; display: flex; align-items: center; justify-content: center; }
.table-no-result > div.dkf-has-cta > div { position: static; transform: none; }
/* .table-no-result span es el esqueleto de carga (barras animadas): no vale para el icono del boton */
.table-no-result .dkf-empty-cta span { display: inline; height: auto; background: none; animation: none; border-radius: 0; }
/* asunto: contador de caracteres */
.dkf-char-count { float: right; font-size: 0.8em; color: var(--dkf-slate-500); }
.dkf-char-count.is-near { color: var(--dkf-warning-dark); font-weight: 600; }
/* mensaje: editor Summernote (clase ckeditor_mail de dokuflex.wysiwyg.js) */
.dkf-mail-editor .note-editor.note-frame { border-color: var(--dkf-border-input); border-radius: var(--dkf-radius); }
.dkf-mail-editor .note-toolbar { background: var(--dkf-surface-muted); }
.dkf-cc-toggle { font-size: 0.9em; }

/* Archivos: la subida es el .file_upload comun (dokuflex.upload.js) */
.secureTransferPortlet .st-upload,
.certifiedMailPortlet .cm-upload { margin-bottom: 10px; }
.secureTransferPortlet .st-files-empty,
.certifiedMailPortlet .cm-files-empty { margin: 0; font-size: 0.85em; color: var(--dkf-slate-400); text-align: center; }

/* Seguridad: opciones como tarjetas seleccionables */
.secureTransferPortlet .st-password-warning { margin-top: -4px; }
.secureTransferPortlet .st-options,
.oneTimeSecretPortlet .ots-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 6px; }
.secureTransferPortlet .st-option,
.oneTimeSecretPortlet .ots-option { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--dkf-border-card); border-radius: var(--dkf-radius); background: var(--dkf-surface-card); cursor: pointer; transition: border-color var(--dkf-transition-fast), background var(--dkf-transition-fast); }
.secureTransferPortlet .st-option:hover,
.oneTimeSecretPortlet .ots-option:hover { border-color: var(--dkf-primary-light); }
.secureTransferPortlet .st-option:has(input:checked),
.oneTimeSecretPortlet .ots-option:has(input:checked) { border-color: var(--dkf-primary); background: var(--dkf-primary-tint); }
.secureTransferPortlet .st-option .form-check-input,
.oneTimeSecretPortlet .ots-option .form-check-input { flex: 0 0 auto; margin: 3px 0 0; }
.secureTransferPortlet .st-option-icon,
.oneTimeSecretPortlet .ots-option-icon { flex: 0 0 auto; font-size: 20px; color: var(--dkf-primary); }
.secureTransferPortlet .st-option-text strong,
.oneTimeSecretPortlet .ots-option-text strong { display: block; color: var(--dkf-slate-800); }
.secureTransferPortlet .st-option-help,
.oneTimeSecretPortlet .ots-option-help { display: block; font-size: 0.85em; color: var(--dkf-slate-500); }

/* Pie: siempre visible al final del portlet mientras se rellena */
.secureTransferPortlet .st-form-footer,
.oneTimeSecretPortlet .ots-form-footer,
.certifiedMailPortlet .cm-form-footer { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; padding: 12px 0; border-top: 1px solid var(--dkf-border-card); background: var(--dkf-white); }
.secureTransferPortlet .st-summary,
.oneTimeSecretPortlet .ots-summary,
.certifiedMailPortlet .cm-summary { flex: 1 1 auto; text-align: right; font-size: 0.9em; color: var(--dkf-slate-600); }
.secureTransferPortlet .st-file-list,
.certifiedMailPortlet .cm-file-list { list-style: none; margin: 0; padding: 0; }
.secureTransferPortlet .st-file,
.certifiedMailPortlet .cm-file { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--dkf-border-card); border-radius: var(--dkf-radius); margin-bottom: 6px; background: var(--dkf-surface-card); overflow: hidden; }
.secureTransferPortlet .st-file-icon,
.certifiedMailPortlet .cm-file-icon { color: var(--dkf-slate-500); }
.secureTransferPortlet .st-file-name,
.certifiedMailPortlet .cm-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dkf-slate-800); }
.secureTransferPortlet .st-file-meta,
.certifiedMailPortlet .cm-file-meta { color: var(--dkf-slate-500); font-size: 0.85em; white-space: nowrap; }

.secureTransferPortlet .st-detail-toolbar,
.oneTimeSecretPortlet .ots-detail-toolbar,
.certifiedMailPortlet .cm-detail-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.secureTransferPortlet .st-detail-actions,
.oneTimeSecretPortlet .ots-detail-actions,
.certifiedMailPortlet .cm-detail-actions { display: flex; gap: 8px; }
.secureTransferPortlet .st-detail-header { padding: 14px 16px; border: 1px solid var(--dkf-border-card); border-left: 3px solid var(--dkf-accent); border-radius: var(--dkf-radius); background: var(--dkf-surface-muted); }
.secureTransferPortlet .st-detail-title,
.oneTimeSecretPortlet .ots-detail-title,
.certifiedMailPortlet .cm-detail-title { font-size: 1.2rem; font-weight: 600; color: var(--dkf-slate-900); margin: 0 0 10px; }
.secureTransferPortlet .st-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.secureTransferPortlet .st-detail-meta dt { font-weight: 400; font-size: 0.8em; color: var(--dkf-slate-500); }
.secureTransferPortlet .st-detail-meta dd { margin: 0; color: var(--dkf-slate-800); }
.secureTransferPortlet .st-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.secureTransferPortlet .st-flag { font-size: 0.85em; color: var(--dkf-slate-600); }
.secureTransferPortlet .st-detail-message { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dkf-border-card); color: var(--dkf-slate-700); }
.secureTransferPortlet .st-row-actions { white-space: nowrap; }
.secureTransferPortlet .st-hash,
.oneTimeSecretPortlet .ots-hash,
.certifiedMailPortlet .cm-hash { font-size: 0.8em; color: var(--dkf-slate-600); }
.secureTransferPortlet .st-file-deleted td { color: var(--dkf-slate-400); text-decoration: line-through; }
.secureTransferPortlet .st-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--dkf-border-card); }
.secureTransferPortlet .st-timeline-item { position: relative; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0 6px 10px; }
.secureTransferPortlet .st-timeline-item::before { content: ""; position: absolute; left: -20px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--dkf-slate-400); border: 2px solid var(--dkf-white); }
.secureTransferPortlet .st-ev-download::before { background: var(--dkf-green-dark); }
.secureTransferPortlet .st-ev-st-otp-ok::before,
.secureTransferPortlet .st-ev-st-password-ok::before,
.secureTransferPortlet .st-ev-st-opened::before { background: var(--dkf-info); }
.secureTransferPortlet .st-ev-wrong-password::before,
.secureTransferPortlet .st-ev-st-otp-fail::before,
.secureTransferPortlet .st-ev-st-locked::before,
.secureTransferPortlet .st-ev-st-revoked::before,
.secureTransferPortlet .st-ev-st-send-failed::before { background: var(--dkf-danger-dark); }
.secureTransferPortlet .st-timeline-date { min-width: 130px; color: var(--dkf-slate-500); font-size: 0.85em; }
.secureTransferPortlet .st-timeline-text { color: var(--dkf-slate-800); }
.secureTransferPortlet .st-timeline-tech { color: var(--dkf-slate-400); font-size: 0.8em; }
.secureTransferPortlet .st-loading { text-align: center; padding: 30px; color: var(--dkf-slate-400); }
@media (max-width: 767px) {
	.secureTransferPortlet .st-toolbar-new,
	.oneTimeSecretPortlet .ots-toolbar-new,
	.certifiedMailPortlet .cm-toolbar-new { margin-left: 0; width: 100%; }
	.secureTransferPortlet .st-detail-toolbar,
	.oneTimeSecretPortlet .ots-detail-toolbar,
	.certifiedMailPortlet .cm-detail-toolbar { flex-direction: column; align-items: stretch; }
	.secureTransferPortlet .st-file-meta,
	.certifiedMailPortlet .cm-file-meta { display: none; }
}

/* Pagina del destinatario */
#body_public_link .container.st-public { max-width: 640px; margin-top: 4%; }
/* Pie con el logo (footer_outsidecall.jsp): va fuera del <main>, sin contenedor que lo centre */
.st-public-body .dokuflex-logo-layer-footer { text-align: center; margin: 16px 0; }
.st-public .st-public-state { text-align: center; padding: 18px 0; }
.st-public .st-public-state-icon { font-size: 34px; color: var(--dkf-slate-400); margin-bottom: 10px; }
.st-public .st-public-header { text-align: center; padding: 8px 0 14px; border-bottom: 1px solid var(--dkf-border-card); margin-bottom: 16px; }
.st-public .st-public-from { color: var(--dkf-slate-600); margin-bottom: 6px; }
.st-public .st-public-title { font-size: 1.35rem; font-weight: 600; color: var(--dkf-slate-900); margin: 0 0 6px; overflow-wrap: anywhere; }
.st-public .st-public-subtitle { font-size: 1.05rem; font-weight: 600; color: var(--dkf-slate-800); margin-bottom: 12px; }
.st-public .st-public-muted { color: var(--dkf-slate-500); font-size: 0.9em; }
.st-public .st-public-message { white-space: pre-line; padding: 10px 12px; margin-bottom: 14px; border-left: 3px solid var(--dkf-accent); background: var(--dkf-surface-muted); color: var(--dkf-slate-700); }
.st-public .st-public-files { list-style: none; margin: 0 0 14px; padding: 0; }
.st-public .st-public-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--dkf-border-card); border-radius: var(--dkf-radius); margin-bottom: 8px; }
.st-public .st-public-file.is-exhausted { background: var(--dkf-surface-muted); }
.st-public .st-public-file-icon { color: var(--dkf-slate-500); }
.st-public .st-public-file-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--dkf-slate-800); }
.st-public .st-public-file-meta { color: var(--dkf-slate-500); font-size: 0.85em; white-space: nowrap; }
.st-public .st-public-actions { text-align: center; margin-bottom: 12px; }
.st-public .st-public-legal { text-align: center; margin-top: 10px; }
.st-public .st-public-verify { max-width: 420px; margin: 0 auto; }
.st-public .st-public-verify .btn { margin-top: 6px; }
.st-public .st-public-code { margin-top: 12px; }
.st-public .st-public-code .form-control { font-size: 1.4rem; letter-spacing: 6px; text-align: center; }
@media (max-width: 575px) {
	.st-public .st-public-file { flex-wrap: wrap; }
	.st-public .st-public-file .btn { width: 100%; }
}

/* =============================================================================
   Secretos de un solo uso. Definicion UNICA de lo PROPIO de:
   - el portlet oneTimeSecret (jsp/portlets/oneTimeSecret/view.jsp +
     dokuflex.onetimesecret.js): listado, formulario, enlace recien creado y detalle;
   - la pagina de quien recibe el enlace (themes/dokuflex/oneTimeSecret.jsp), que
     reutiliza #body_public_link y las clases .st-public- de los envios seguros.
   La estructura comun (barra, paneles, opciones, pie, tabla vacia, paginador) NO
   se repite aqui: comparte las reglas de la seccion "Envios seguros", donde los
   selectores .ots- van junto a los .st-.
   ============================================================================= */
/* El panel es una pantalla aparte, solo para administradores: no se mezcla con el
   uso diario. Mismas reglas para los dos portlets que lo tienen (envios seguros y
   secretos de un solo uso). */
.secureTransferPortlet .st-toolbar-dashboard,
.oneTimeSecretPortlet .ots-toolbar-dashboard,
.certifiedMailPortlet .cm-toolbar-dashboard { margin-left: auto; }
.secureTransferPortlet .st-toolbar-dashboard + .st-toolbar-new,
.oneTimeSecretPortlet .ots-toolbar-dashboard + .ots-toolbar-new,
.certifiedMailPortlet .cm-toolbar-dashboard + .cm-toolbar-new { margin-left: 0; }
.secureTransferPortlet .st-dashboard-title,
.oneTimeSecretPortlet .ots-dashboard-title,
.certifiedMailPortlet .cm-dashboard-title { flex: 1 1 auto; margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--dkf-slate-800); text-align: right; }
.secureTransferPortlet .st-dashboard-title .fa-chart-simple,
.oneTimeSecretPortlet .ots-dashboard-title .fa-chart-simple,
.certifiedMailPortlet .cm-dashboard-title .fa-chart-simple { color: var(--dkf-primary); margin-right: 6px; }
.secureTransferPortlet .st-dashboard-scope,
.oneTimeSecretPortlet .ots-dashboard-scope,
.certifiedMailPortlet .cm-dashboard-scope { margin: 0 0 12px; font-size: 0.85em; color: var(--dkf-slate-500); }
.oneTimeSecretPortlet .ots-title { display: block; font-weight: 600; color: var(--dkf-slate-800); }
.oneTimeSecretPortlet .ots-muted { color: var(--dkf-slate-400); }
.oneTimeSecretPortlet .ots-flag { display: inline-block; margin-right: 6px; color: var(--dkf-primary); }
.oneTimeSecretPortlet .ots-flag-off { color: var(--dkf-slate-400); }
.oneTimeSecretPortlet .ots-help { margin: 4px 0 0; font-size: 0.85em; color: var(--dkf-slate-500); }
.oneTimeSecretPortlet .ots-counter { margin: 4px 0 0; font-size: 0.85em; color: var(--dkf-slate-400); text-align: right; }
/* El secreto se escribe a maquina y suele llevar simbolos: monoespaciada para no confundir l/1/O/0 */
.oneTimeSecretPortlet .ots-secret-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.oneTimeSecretPortlet .ots-contact { margin-top: 10px; }
.oneTimeSecretPortlet .ots-otp-channel { max-width: 320px; margin-top: 10px; }
.oneTimeSecretPortlet .ots-passphrase-warning { margin-top: -4px; }
/* Dato de contacto que el canal elegido necesita: el label se marca como obligatorio */
.oneTimeSecretPortlet .ots-required > label::after { content: " *"; color: var(--dkf-danger-dark); }

/* Enlace recien creado: lo unico que hay que hacer es copiarlo */
.oneTimeSecretPortlet .ots-created { max-width: 640px; margin: 0 auto; text-align: center; padding: 24px 0; }
.oneTimeSecretPortlet .ots-created-icon { font-size: 40px; color: var(--dkf-green-dark); margin-bottom: 12px; }
.oneTimeSecretPortlet .ots-created-title { font-size: 1.25rem; font-weight: 600; color: var(--dkf-slate-900); margin-bottom: 6px; }
.oneTimeSecretPortlet .ots-created-help { color: var(--dkf-slate-600); margin-bottom: 16px; }
.oneTimeSecretPortlet .ots-created-warning { text-align: left; margin-top: 14px; }
.oneTimeSecretPortlet .ots-created-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.oneTimeSecretPortlet .ots-link-group { margin: 0 auto; max-width: 640px; }
.oneTimeSecretPortlet .ots-link { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--dkf-surface-muted); }

/* Detalle: ficha en filas etiqueta/valor y cronologia en tabla */
.oneTimeSecretPortlet .ots-detail-head,
.certifiedMailPortlet .cm-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.oneTimeSecretPortlet .ots-link-gone { margin-bottom: 14px; }
.oneTimeSecretPortlet .ots-rows,
.certifiedMailPortlet .cm-rows { border: 1px solid var(--dkf-border-card); border-radius: var(--dkf-radius); background: var(--dkf-surface-card); padding: 4px 14px; margin-top: 14px; }
.oneTimeSecretPortlet .ots-row,
.certifiedMailPortlet .cm-row { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--dkf-border-card); }
.oneTimeSecretPortlet .ots-row:last-child,
.certifiedMailPortlet .cm-row:last-child { border-bottom: 0; }
.oneTimeSecretPortlet .ots-row-label,
.certifiedMailPortlet .cm-row-label { flex: 0 0 180px; color: var(--dkf-slate-500); font-size: 0.9em; }
.oneTimeSecretPortlet .ots-row-value,
.certifiedMailPortlet .cm-row-value { flex: 1 1 240px; min-width: 0; color: var(--dkf-slate-800); overflow-wrap: anywhere; }
.oneTimeSecretPortlet .ots-section,
.certifiedMailPortlet .cm-section { font-size: 1rem; font-weight: 600; color: var(--dkf-slate-800); margin: 22px 0 10px; }
.oneTimeSecretPortlet .ots-events td { vertical-align: top; }
.oneTimeSecretPortlet .ots-agent { color: var(--dkf-slate-400); font-size: 0.85em; overflow-wrap: anywhere; }
@media (max-width: 767px) {
	.oneTimeSecretPortlet .ots-row-label,
	.certifiedMailPortlet .cm-row-label { flex: 1 1 100%; }
	.oneTimeSecretPortlet .ots-created-actions { flex-direction: column; }
	.oneTimeSecretPortlet .ots-agent { display: none; }
}

/* Pagina publica: formulario de lectura y el secreto revelado */
.st-public .ots-reveal-form { max-width: 460px; margin: 0 auto; }
.st-public .ots-public-warning { margin-top: 14px; text-align: left; }
.st-public .ots-public-result { max-width: 560px; margin: 0 auto; }
.st-public .ots-public-secret { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--dkf-border-card); border-radius: var(--dkf-radius); background: var(--dkf-surface-muted); color: var(--dkf-slate-900); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; }
.st-public .ots-public-actions { text-align: center; margin-bottom: 12px; }

/* =============================================================================
   Correo certificado. Definicion UNICA de lo PROPIO del portlet certifiedMail
   (jsp/portlets/certifiedMail/view.jsp + dokuflex.certifiedmail.js): listado,
   redactar, detalle con huellas y cronologia, y panel de administrador.
   La estructura comun (barra, paneles, adjuntos, pie, tabla vacia, paginador,
   filas del detalle) NO se repite aqui: comparte las reglas de la seccion
   "Envios seguros", donde los selectores .cm- van junto a los .st- y .ots-.
   ============================================================================= */
.certifiedMailPortlet .cm-toolbar-status { margin: 0; min-width: 170px; }
.certifiedMailPortlet .cm-subject { display: block; font-weight: 600; color: var(--dkf-slate-800); }
.certifiedMailPortlet .cm-origin { display: block; font-size: 0.85em; color: var(--dkf-slate-500); }
.certifiedMailPortlet .cm-from { margin: 0 0 12px; color: var(--dkf-slate-600); }
.certifiedMailPortlet .cm-from .fa-paper-plane { color: var(--dkf-primary); margin-right: 4px; }
.certifiedMailPortlet .cm-from-reply { display: inline-block; margin-left: 12px; }
.certifiedMailPortlet .cm-help { margin: 4px 0 0; font-size: 0.85em; color: var(--dkf-slate-500); }
.certifiedMailPortlet .cm-legal { margin-bottom: 12px; }
/* SMS que acompana al correo: bloque del movil bajo Para/Cc, con su modalidad en badge */
.certifiedMailPortlet .cm-sms-group { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--dkf-slate-200); }
.certifiedMailPortlet .cm-sms-group label .fa-mobile-screen { color: var(--dkf-primary); margin-right: 4px; }
.certifiedMailPortlet .cm-sms-mode-badge { margin-left: 6px; font-weight: 500; vertical-align: middle; }
.certifiedMailPortlet .cm-sms-text { font-style: italic; color: var(--dkf-slate-600); }
/* certificado PDF de Altiria del SMS certificado: enlace, badges, quien/cuando y huella en su linea */
.certifiedMailPortlet .cm-smscert { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.certifiedMailPortlet .cm-smscert-link { font-weight: 500; }
.certifiedMailPortlet .cm-smscert-meta { flex: 1 1 100%; font-size: 0.85em; color: var(--dkf-slate-500); }
.certifiedMailPortlet .cm-smscert .cm-hash { flex: 1 1 100%; overflow-wrap: anywhere; }
.certifiedMailPortlet .cm-smscert-missing { color: var(--dkf-slate-600); font-size: 0.9em; }
.certifiedMailPortlet .cm-smscert-btn { margin-top: 2px; }
/* doble clase: .panel-title .label del tema pinta el badge redondo y en blanco */
.certifiedMailPortlet .panel-title .label.cm-panel-count { top: 0; margin-left: 0; min-width: 22px; padding: 2px 7px !important; border-radius: 999px; background: var(--dkf-primary); color: var(--dkf-white); text-align: center; }
.certifiedMailPortlet .panel-title .label.cm-panel-count.is-empty { background: var(--dkf-slate-200); color: var(--dkf-slate-600); }
.certifiedMailPortlet .cm-file-remove { color: var(--dkf-slate-500); margin-left: auto; }
.certifiedMailPortlet .cm-file-remove:hover,
.certifiedMailPortlet .cm-file-remove:focus-visible { color: var(--dkf-danger-dark); }
.certifiedMailPortlet .cm-file .cm-hash { flex: 1 1 100%; font-size: 0.75em; color: var(--dkf-slate-500); overflow-wrap: anywhere; }
.certifiedMailPortlet .cm-events td { vertical-align: top; }
.certifiedMailPortlet .cm-event-detail { color: var(--dkf-slate-500); font-size: 0.85em; overflow-wrap: anywhere; }
.certifiedMailPortlet .cm-legal-note { margin-top: 10px; font-size: 0.85em; color: var(--dkf-slate-500); }
@media (max-width: 767px) {
	.certifiedMailPortlet .cm-toolbar-status { width: 100%; }
	.certifiedMailPortlet .cm-event-detail { display: none; }
}

/* =============================================================================
   Formulario con columna lateral. Cuando el formulario de un portlet tiene
   espacio de sobra al lado, lo de "anexar" (y lo de apoyo: avisos, resumen) se
   va a una columna lateral en lugar de apilarse debajo y dejar media pantalla
   en blanco. Contrato: docs/ux/portlet-nuevo-bestpractices.md

   El corte es por ANCHO DISPONIBLE, no por dispositivo: el portlet vive dentro
   del SPA y puede estar en una pagina a media anchura, asi que manda el container
   query sobre el propio formulario. El @media de respaldo es para los navegadores
   sin soporte (Safari < 16); donde haya container queries, estas ganan por estar
   despues.
   ============================================================================= */
.dkf-form-split { display: grid; grid-template-columns: 1fr; gap: 0 18px; container-type: inline-size; container-name: dkfform; }
.dkf-form-split > .dkf-form-main { min-width: 0; }
.dkf-form-split > .dkf-form-aside { min-width: 0; }
/* La barra de acciones cruza las dos columnas */
.dkf-form-split > .dkf-form-wide { grid-column: 1 / -1; }
@media (min-width: 1200px) {
	.dkf-form-split { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
}
@container dkfform (min-width: 900px) {
	.dkf-form-split { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
}
@container dkfform (max-width: 899px) {
	.dkf-form-split { grid-template-columns: 1fr; }
}
/* En la columna lateral el panel se pega arriba mientras se rellena el formulario */
.dkf-form-aside .panel { position: sticky; top: 8px; }