html:root {
--bg: #bbbbbb; /* de la pagina base */
--ink: #1a1a1a; /* texto general*/
--muted: #6c757d; /* texto suave */
--accent: #4c6fff; /* texto acentuado */
--scroll-color: #2f8d83; /* texto acentuado */
--mobile-topbar-h: 55px; /* Espacio en blanco en movil que deja arriba del contenido para la barra de menu */
/* Espacio entre la targeta y el fin de la pantalla */
--sticky-top: 1rem;
--left-col-profile-background: none; /* Fondo de la ficha de datos de perfil */
--left-col-profile-wallet-background: rgb(156 151 151 / 28%); /* Fondo de la ficha de cartera */
--left-col-profile-group-selector-btn-background: rgba(221, 16, 16, 0.28); /* Fondo de boton de selector */
--left-col-profile-name-font-color: red;
--left-col-profile-area-font-color: red;
--menu-item-background: #ffffff; /* Fondo de las opciones del menu */
--menu-item-font-color: #686868; /* Color de las letras del menu */
--menu-item-mobil-background: #ffffff; /* Fondo de las opciones del menu mobil*/
--menu-item-mobil-scrollbar-width: thin; /* Tipo del scroll del menu mobil*/
--menu-item-mobil-scrollbar-color: rgba(0, 0, 0, 0.18) transparent; /* Color del scroll del menu mobil*/
--menu-item-mobil-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* Sombra de las opciones del menu */
--menu-item-mobil-btn-background: #564d83; /* Fondo del boton opciones del menu mobil*/
--menu-item-mobil-btn-border: 1px solid rgba(96, 48, 128, 0.8); /* Borde del boton del menu mobil*/
--menu-item-mobil-btn-color: #ffffff; /* Color del icono de menu mobil*/
--menu-item-mobil-panel-background: #ffffff; /* Fondo del panel de opciones de menu mobil*/
--menu-item-mobil-option-btn-background: #ffffff; /* Fondo de la pildora de la opcion de menu mobil*/
--menu-item-mobil-option-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Sombra de la pildora de la opcion de menu mobil*/
--system-info-background: none; /* Fondo de la bara de informacion del sistema */
--system-info-color: #f9f9f9; /* Color de letra de la bara de informacion del sistema */
--global-font-family: 'Poppins-Regular';
/* Boton general */
--global-button-background-color: #2f8d84;
--global-button-border-color: #2f8d8400;
--global-button-text-color: #FFFFFF;
--global-button-background-hover-color: #bbbbbb;
--global-button-border-hover-color: #2f8d83;
--global-button-radius: 25px;
--global-border-radius: 12px;
--global-background-color: #FFFFFF; /* Fondo de componetes */
--global-hover-color: #2f8d83;
--global-text-color: #424242;
--global-commponet-bg-color-soft: #2f8d83;
--global-commponet-bg-color: #2f8d83;
--global-a-link-color: #686868;
--global-border-textarea-color: 1px solid #000000;
--global-textarea-bakground-color: #ecebeb;
--global-table-boxshadow: 0 0 0 0.10rem #2f8d83;
--global-table-hover-boxshadow: 0 0 0 0.10rem #543a6c;
--toolbar-comment-color: #2f8d83;
--toolbar-comment-hover-color: #2f8d83;
--toolbar-gallery-icon-margin: 4px;
--toolbar-gallery-color: #2f8d83;
--toolbar-gallery-hover-color: #2f8d83;
--toolbar-gallery-folder-hover-color: #2f8d83;
--notification-info-text: #ffffff;
--notification-info-profile-background: #6ab96a;
--notification-info-profile-border: #ffffff;
--notification-info-background: #000000;
--notification-info-pulse-background: #383838;
--image-link-btn: #000000;
/* Colores de folder de galeria */
--folder-header-text-color: #ffffff;
--folder-footer-text-color: #ffffff;
/* Tabs */
--global-tab-background: #2f8d83;
--global-tab-background-hover: #ffffff;
--global-tab-border: #ffffff;
--global-tab-border-hover: #2f8d83;
--global-tab-font-color: #ffffff;
--global-tab-font-color-hover: #686868;
--global-tab-active-background: #ffffff;
--global-tab-active-border: #686868;
--global-tab-active-font-color: rgb(114, 114, 114);
--text-primary: #686868;
--text-secondary: #6c757d;
--primary-bg: #007bff;
--focus-ring: rgba(0, 123, 255, 0.25);
--global-backround-loader-color: #2f8d83;
--image-link-btn: #b3b3b3;
--domaininfo-footer-text-color: #56586b;
/* ================================================================
================================================================
Variables de primeng
================================================================
================================================================ */
/* ================================
p-button (base)
================================ */
/* Radio de borde del botón */
/* --p-button-border-radius: 6px; */
/* Radio de borde cuando el botón es rounded */
/* --p-button-rounded-border-radius: 9999px; */
/* Espacio entre ícono y texto dentro del botón */
/* --p-button-gap: 0.5rem; */
/* Padding horizontal del botón */
/* --p-button-padding-x: 1rem; */
/* Padding vertical del botón */
/* --p-button-padding-y: 0.5rem; */
/* Ancho de los botones solo ícono */
/* --p-button-icon-only-width: 2.5rem; */
/* Tamaño de fuente para botón pequeño (size="small") */
/* --p-button-sm-font-size: 0.875rem; */
/* Padding horizontal para botón pequeño */
/* --p-button-sm-padding-x: 0.75rem; */
/* Padding vertical para botón pequeño */
/* --p-button-sm-padding-y: 0.375rem; */
/* Tamaño de fuente para botón grande (size="large") */
/* --p-button-lg-font-size: 1rem; */
/* Padding horizontal para botón grande */
/* --p-button-lg-padding-x: 1.25rem; */
/* Padding vertical para botón grande */
/* --p-button-lg-padding-y: 0.625rem; */
/* Peso de la fuente del texto del botón */
/* --p-button-label-font-weight: 600; */
/* Sombra aplicada cuando [raised]="true" */
/* --p-button-raised-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); */
/* Grosor del focus ring alrededor del botón */
/* --p-button-focus-ring-width: 2px; */
/* Estilo de línea del focus ring */
/* --p-button-focus-ring-style: solid; */
/* Separación del focus ring respecto al borde del botón */
/* --p-button-focus-ring-offset: 2px; */
/* Tamaño del badge del botón */
/* --p-button-badge-size: 1.25rem; */
/* Duración de las transiciones (hover, active, etc.) */
/* --p-button-transition-duration: 0.2s; */
/* ================================
p-button (severity: primary)
================================ */
/* Color de fondo del botón primario */
--p-button-primary-background: #2f8d83;
/* Color de fondo en hover (primario) */
--p-button-primary-hover-background: #bbbbbb;
/* Color de fondo en active (primario) */
--p-button-primary-active-background: #2f8d83;
/* Color de borde del botón primario */
--p-button-primary-border-color: #2f8d83;
/* Color de borde en hover (primario) */
--p-button-primary-hover-border-color: #2f8d83;
/* Color de borde en active (primario) */
--p-button-primary-active-border-color: #2f8d83;
/* Color de texto del botón primario */
--p-button-primary-color: #ffffff;
/* Color de texto en hover (primario) */
/* --p-button-primary-hover-color: #ffffff; */
/* Color de texto en active (primario) */
--p-button-primary-active-color: #e5e7eb;
/* Color del focus ring del botón primario */
/* --p-button-primary-focus-ring-color: rgba(37, 99, 235, 0.6); */
/* Sombra del focus ring del botón primario */
/* --p-button-primary-focus-ring-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35); */
/* ================================
p-button (severity: secondary)
================================ */
/* Color de fondo del botón secundario */
--p-button-secondary-background: #64748b;
/* Color de fondo en hover (secundario) */
--p-button-secondary-hover-background: #4b5563;
/* Color de fondo en active (secundario) */
--p-button-secondary-active-background: #374151;
/* Color de borde del botón secundario */
--p-button-secondary-border-color: #4b5563;
/* Color de borde en hover (secundario) */
--p-button-secondary-hover-border-color: #374151;
/* Color de borde en active (secundario) */
--p-button-secondary-active-border-color: #1f2933;
/* Color de texto del botón secundario */
--p-button-secondary-color: #2f8d83;
/* Color de texto en hover (secundario) */
--p-button-secondary-hover-color: #092b4e;
/* Color de texto en active (secundario) *
--p-button-secondary-active-color: #e5e7eb;
/* Color del focus ring del botón secundario */
/* --p-button-secondary-focus-ring-color: rgba(100, 116, 139, 0.6); */
/* Sombra del focus ring del botón secundario */
/* --p-button-secondary-focus-ring-shadow: 0 0 0 3px rgba(100, 116, 139, 0.35); */
/* ================================
p-button (severity: info)
================================ */
/* Color de fondo del botón info */
/* --p-button-info-background: #0ea5e9; */
/* Color de fondo en hover (info) */
/* --p-button-info-hover-background: #0284c7; */
/* Color de fondo en active (info) */
/* --p-button-info-active-background: #0369a1; */
/* Color de borde del botón info */
--p-button-info-border-color: #0284c7;
/* Color de borde en hover (info) */
--p-button-info-hover-border-color: #0369a1;
/* Color de borde en active (info) */
/* --p-button-info-active-border-color: #075985; */
/* Color de texto del botón info */
/* --p-button-info-color: #f9fafb; */
/* Color de texto en hover (info) */
/* --p-button-info-hover-color: #f9fafb; */
/* Color de texto en active (info) */
/* --p-button-info-active-color: #e0f2fe; */
/* Color del focus ring del botón info */
/* --p-button-info-focus-ring-color: rgba(14, 165, 233, 0.6); */
/* Sombra del focus ring del botón info */
/* --p-button-info-focus-ring-shadow: 0 0 0 3px rgba(14, 165, 233, 0.35); */
/* ================================
p-button (severity: success)
================================ */
/* Color de fondo del botón success */
--p-button-success-background: #2f8d83;
/* Color de fondo en hover (success) */
--p-button-success-hover-background: #486763;
/* Color de fondo en active (success) */
--p-button-success-active-background: #2f8d83;
/* Color de borde del botón success */
--p-button-success-border-color: #15803d;
/* Color de borde en hover (success) */
--p-button-success-hover-border-color: #166534;
/* Color de borde en active (success) */
--p-button-success-active-border-color: #14532d;
/* Color de texto del botón success */
--p-button-success-color: #f9fafb;
/* Color de texto en hover (success) */
--p-button-success-hover-color: #f9fafb;
/* Color de texto en active (success) */
--p-button-success-active-color: #dcfce7;
/* Color del focus ring del botón success */
/* --p-button-success-focus-ring-color: rgba(22, 163, 74, 0.6); */
/* Sombra del focus ring del botón success */
/* --p-button-success-focus-ring-shadow: 0 0 0 3px rgba(22, 163, 74, 0.35); */
/* ================================
p-button (severity: warn)
================================ */
/* Color de fondo del botón warn */
--p-button-warn-background: #f59e0b;
/* Color de fondo en hover (warn) */
--p-button-warn-hover-background: #d97706;
/* Color de fondo en active (warn) */
--p-button-warn-active-background: #b45309;
/* Color de borde del botón warn */
--p-button-warn-border-color: #d97706;
/* Color de borde en hover (warn) */
--p-button-warn-hover-border-color: #b45309;
/* Color de borde en active (warn) */
--p-button-warn-active-border-color: #92400e;
/* Color de texto del botón warn */
--p-button-warn-color: #111827;
/* Color de texto en hover (warn) */
--p-button-warn-hover-color: #111827;
/* Color de texto en active (warn) */
--p-button-warn-active-color: #fef3c7;
/* Color del focus ring del botón warn */
/* --p-button-warn-focus-ring-color: rgba(245, 158, 11, 0.6); */
/* Sombra del focus ring del botón warn */
/* --p-button-warn-focus-ring-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35); */
/* ================================
p-button (severity: help)
================================ */
/* Color de fondo del botón help */
--p-button-help-background: #686868;
/* Color de fondo en hover (help) */
/* --p-button-help-hover-background: #9333ea; */
/* Color de fondo en active (help) */
/* --p-button-help-active-background: #7e22ce; */
/* Color de borde del botón help */
/* --p-button-help-border-color: #9333ea; */
/* Color de borde en hover (help) */
/* --p-button-help-hover-border-color: #7e22ce; */
/* Color de borde en active (help) */
/* --p-button-help-active-border-color: #6b21a8; */
/* Color de texto del botón help */
/* --p-button-help-color: #f9fafb; */
/* Color de texto en hover (help) */
/* --p-button-help-hover-color: #f9fafb; */
/* Color de texto en active (help) */
/* --p-button-help-active-color: #f3e8ff; */
/* Color del focus ring del botón help */
/* --p-button-help-focus-ring-color: rgba(168, 85, 247, 0.6); */
/* Sombra del focus ring del botón help */
/* --p-button-help-focus-ring-shadow: 0 0 0 3px rgba(168, 85, 247, 0.35); */
/* ================================
p-button (severity: danger)
================================ */
/* Color de fondo del botón danger */
--p-button-danger-background: #dc2626;
/* Color de fondo en hover (danger) */
--p-button-danger-hover-background: #b91c1c;
/* Color de fondo en active (danger) */
--p-button-danger-active-background: #991b1b;
/* Color de borde del botón danger */
--p-button-danger-border-color: #b91c1c;
/* Color de borde en hover (danger) */
--p-button-danger-hover-border-color: #991b1b;
/* Color de borde en active (danger) */
--p-button-danger-active-border-color: #7f1d1d;
/* Color de texto del botón danger */
--p-button-danger-color: #fef2f2;
/* Color de texto en hover (danger) */
--p-button-danger-hover-color: #fef2f2;
/* Color de texto en active (danger) */
--p-button-danger-active-color: #fee2e2;
/* Color del focus ring del botón danger */
/* --p-button-danger-focus-ring-color: rgba(220, 38, 38, 0.6); */
/* Sombra del focus ring del botón danger */
/* --p-button-danger-focus-ring-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35); */
/* ================================
p-button (severity: contrast)
================================ */
/* Color de fondo del botón contrast */
--p-button-contrast-background: #ffffff;
/* Color de fondo en hover (contrast) */
--p-button-contrast-hover-background: #e5e7eb;
/* Color de fondo en active (contrast) */
--p-button-contrast-active-background: #d1d5db;
/* Color de borde del botón contrast */
--p-button-contrast-border-color: #0f172a;
/* Color de borde en hover (contrast) */
--p-button-contrast-hover-border-color: #020617;
/* Color de borde en active (contrast) */
--p-button-contrast-active-border-color: #020617;
/* Color de texto del botón contrast */
--p-button-contrast-color: #0f172a;
/* Color de texto en hover (contrast) */
--p-button-contrast-hover-color: #020617;
/* Color de texto en active (contrast) */
--p-button-contrast-active-color: #020617;
/* Color del focus ring del botón contrast */
/* --p-button-contrast-focus-ring-color: rgba(15, 23, 42, 0.6); */
/* Sombra del focus ring del botón contrast */
/* --p-button-contrast-focus-ring-shadow: 0 0 0 3px rgba(15, 23, 42, 0.35); */
/* ================================
p-button (variant: outlined - primary)
================================ */
/* Color de fondo en hover para outlined primary */
/* --p-button-outlined-primary-hover-background: rgba(37, 99, 235, 0.08); */
/* Color de fondo en active para outlined primary */
/* --p-button-outlined-primary-active-background: rgba(37, 99, 235, 0.16); */
/* Color de borde para outlined primary */
--p-button-outlined-primary-border-color: #2563eb;
/* Color de texto para outlined primary */
--p-button-outlined-primary-color: #2563eb;
/* ================================
p-button (variant: outlined - secondary)
================================ */
/* Color de fondo en hover para outlined secondary */
/* --p-button-outlined-secondary-hover-background: rgba(100, 116, 139, 0.08); */
/* Color de fondo en active para outlined secondary */
/* --p-button-outlined-secondary-active-background: rgba(100, 116, 139, 0.16); */
/* Color de borde para outlined secondary */
/* --p-button-outlined-secondary-border-color: #64748b; */
/* Color de texto para outlined secondary */
/* --p-button-outlined-secondary-color: #64748b; */
/* ================================
p-button (variant: outlined - success)
================================ */
/* Color de fondo en hover para outlined success */
/* --p-button-outlined-success-hover-background: rgba(22, 163, 74, 0.08); */
/* Color de fondo en active para outlined success */
/* --p-button-outlined-success-active-background: rgba(22, 163, 74, 0.16); */
/* Color de borde para outlined success */
--p-button-outlined-success-border-color: #16a34a;
/* Color de texto para outlined success */
--p-button-outlined-success-color: #16a34a;
/* ================================
p-button (variant: outlined - info)
================================ */
/* Color de fondo en hover para outlined info */
/* --p-button-outlined-info-hover-background: rgba(14, 165, 233, 0.08); */
/* Color de fondo en active para outlined info */
/* --p-button-outlined-info-active-background: rgba(14, 165, 233, 0.16); */
/* Color de borde para outlined info */
--p-button-outlined-info-border-color: #0ea5e9;
/* Color de texto para outlined info */
--p-button-outlined-info-color: #0ea5e9;
/* ================================
p-button (variant: outlined - warn)
================================ */
/* Color de fondo en hover para outlined warn */
/* --p-button-outlined-warn-hover-background: rgba(245, 158, 11, 0.08); */
/* Color de fondo en active para outlined warn */
/* --p-button-outlined-warn-active-background: rgba(245, 158, 11, 0.16); */
/* Color de borde para outlined warn */
--p-button-outlined-warn-border-color: #f59e0b;
/* Color de texto para outlined warn */
--p-button-outlined-warn-color: #f59e0b;
/* ================================
p-button (variant: outlined - help)
================================ */
/* Color de fondo en hover para outlined help */
/* --p-button-outlined-help-hover-background: rgba(168, 85, 247, 0.08); */
/* Color de fondo en active para outlined help */
/* --p-button-outlined-help-active-background: rgba(168, 85, 247, 0.16); */
/* Color de borde para outlined help */
--p-button-outlined-help-border-color: #a855f7;
/* Color de texto para outlined help */
--p-button-outlined-help-color: #a855f7;
/* ================================
p-button (variant: outlined - danger)
================================ */
/* Color de fondo en hover para outlined danger */
/* --p-button-outlined-danger-hover-background: rgba(220, 38, 38, 0.08); */
/* Color de fondo en active para outlined danger */
/* --p-button-outlined-danger-active-background: rgba(220, 38, 38, 0.16); */
/* Color de borde para outlined danger */
--p-button-outlined-danger-border-color: #dc2626;
/* Color de texto para outlined danger */
--p-button-outlined-danger-color: #dc2626;
/* ================================
p-button (variant: outlined - contrast)
================================ */
/* Color de fondo en hover para outlined contrast */
/* --p-button-outlined-contrast-hover-background: rgba(15, 23, 42, 0.06); */
/* Color de fondo en active para outlined contrast */
/* --p-button-outlined-contrast-active-background: rgba(15, 23, 42, 0.12); */
/* Color de borde para outlined contrast */
--p-button-outlined-contrast-border-color: #0f172a;
/* Color de texto para outlined contrast */
--p-button-outlined-contrast-color: #0f172a;
/* ================================
p-button (variant: outlined - plain)
================================ */
/* Color de fondo en hover para outlined plain */
/* --p-button-outlined-plain-hover-background: rgba(148, 163, 184, 0.08); */
/* Color de fondo en active para outlined plain */
/* --p-button-outlined-plain-active-background: rgba(148, 163, 184, 0.16); */
/* Color de borde para outlined plain */
--p-button-outlined-plain-border-color: #9ca3af;
/* Color de texto para outlined plain */
--p-button-outlined-plain-color: #6b7280;
/* ================================
p-button (variant: text - primary)
================================ */
/* Color de fondo en hover para text primary */
/* --p-button-text-primary-hover-background: rgba(37, 99, 235, 0.08); */
/* Color de fondo en active para text primary */
/* --p-button-text-primary-active-background: rgba(37, 99, 235, 0.16); */
/* Color de texto para text primary */
--p-button-text-primary-color: #2563eb;
/* ================================
p-button (variant: text - secondary)
================================ */
/* Color de fondo en hover para text secondary */
/* --p-button-text-secondary-hover-background: rgba(100, 116, 139, 0.08); */
/* Color de fondo en active para text secondary */
/* --p-button-text-secondary-active-background: rgba(100, 116, 139, 0.16); */
/* Color de texto para text secondary */
--p-button-text-secondary-color: #64748b;
/* ================================
p-button (variant: text - success)
================================ */
/* Color de fondo en hover para text success */
/* --p-button-text-success-hover-background: rgba(22, 163, 74, 0.08); */
/* Color de fondo en active para text success */
/* --p-button-text-success-active-background: rgba(22, 163, 74, 0.16); */
/* Color de texto para text success */
--p-button-text-success-color: #16a34a;
/* ================================
p-button (variant: text - info)
================================ */
/* Color de fondo en hover para text info */
/* --p-button-text-info-hover-background: rgba(14, 165, 233, 0.08); */
/* Color de fondo en active para text info */
/* --p-button-text-info-active-background: rgba(14, 165, 233, 0.16); */
/* Color de texto para text info */
--p-button-text-info-color: #0ea5e9;
/* ================================
p-button (variant: text - warn)
================================ */
/* Color de fondo en hover para text warn */
/* --p-button-text-warn-hover-background: rgba(245, 158, 11, 0.08); */
/* Color de fondo en active para text warn */
/* --p-button-text-warn-active-background: rgba(245, 158, 11, 0.16); */
/* Color de texto para text warn */
--p-button-text-warn-color: #f59e0b;
/* ================================
p-button (variant: text - help)
================================ */
/* Color de fondo en hover para text help */
/* --p-button-text-help-hover-background: rgba(168, 85, 247, 0.08); */
/* Color de fondo en active para text help */
/* --p-button-text-help-active-background: rgba(168, 85, 247, 0.16); */
/* Color de texto para text help */
--p-button-text-help-color: #a855f7;
/* ================================
p-button (variant: text - danger)
================================ */
/* Color de fondo en hover para text danger */
/* --p-button-text-danger-hover-background: rgba(220, 38, 38, 0.08); */
/* Color de fondo en active para text danger */
/* --p-button-text-danger-active-background: rgba(220, 38, 38, 0.16); */
/* Color de texto para text danger */
--p-button-text-danger-color: #dc2626;
/* ================================
p-button (variant: text - plain)
================================ */
/* Color de fondo en hover para text plain */
/* --p-button-text-plain-hover-background: rgba(148, 163, 184, 0.08); */
/* Color de fondo en active para text plain */
/* --p-button-text-plain-active-background: rgba(148, 163, 184, 0.16); */
/* Color de texto para text plain */
--p-button-text-plain-color: #6b7280;
/* ================================
p-button (variant: link)
================================ */
/* Color del texto del botón link */
--p-button-link-color: #2563eb;
/* Color del texto en hover del botón link */
/* --p-button-link-hover-color: #1d4ed8; */
/* Color del texto en active del botón link */
--p-button-link-active-color: #1e40af;
/* ================================
p-toolbar – Contenedor
================================ */
/* Fondo del toolbar */
--p-toolbar-background: #ffffff;
/* Color del texto dentro del toolbar */
--p-toolbar-color: #111827;
/* Padding interno del toolbar */
/* --p-toolbar-padding: 0.75rem 1rem; */
/* Radio de borde */
/* --p-toolbar-border-radius: 0.5rem; */
/* Color del borde */
/* --p-toolbar-border-color: #e5e7eb; */
/* Grosor del borde */
/* --p-toolbar-border-width: 1px; */
/* Sombra del toolbar */
/* --p-toolbar-shadow: 0 1px 2px rgba(0,0,0,0.08); */
/* ================================
p-toolbar – Agrupaciones
================================ */
/* Separación horizontal entre los grupos left / center / right */
/* --p-toolbar-gap: 0.75rem; */
/* ================================
p-select – Root (control cerrado)
================================ */
/* Fondo del control cerrado */
--p-select-background: #ffffff;
/* Fondo del control cuando está deshabilitado */
--p-select-disabled-background: #f3f4f6;
/* Fondo del control en modo filled */
--p-select-filled-background: #f9fafb;
/* Fondo del control filled en hover */
--p-select-filled-hover-background: #e5e7eb;
/* Fondo del control filled en foco */
--p-select-filled-focus-background: #e0f2fe;
/* Color del borde del control */
--p-select-border-color: #d1d5db;
/* Color del borde en hover */
--p-select-hover-border-color: #9ca3af;
/* Color del borde en foco */
--p-select-focus-border-color: #2563eb;
/* Color del borde cuando es inválido */
--p-select-invalid-border-color: #dc2626;
/* Color de texto del valor seleccionado */
--p-select-color: #111827;
/* Color de texto cuando está deshabilitado */
--p-select-disabled-color: #9ca3af;
/* Color del placeholder */
--p-select-placeholder-color: #9ca3af;
/* Color del placeholder cuando es inválido */
--p-select-invalid-placeholder-color: #f97316;
/* Sombra del control (por ejemplo en modo raised) */
/* --p-select-shadow: 0 1px 2px rgba(15,23,42,0.08); */
/* Padding horizontal del control */
/* --p-select-padding-x: 0.75rem; */
/* Padding vertical del control */
/* --p-select-padding-y: 0.5rem; */
/* Radio de borde del control */
/* --p-select-border-radius: 0.5rem; */
/* Ancho del focus ring */
/* --p-select-focus-ring-width: 2px; */
/* Estilo del focus ring */
/* --p-select-focus-ring-style: solid; */
/* Color del focus ring */
--p-select-focus-ring-color: #2563eb;
/* Separación del focus ring respecto al borde */
/* --p-select-focus-ring-offset: 2px; */
/* Sombra extra del focus ring */
/* --p-select-focus-ring-shadow: 0 0 0 1px rgba(37,99,235,0.3); */
/* Duración de las transiciones (hover, focus, etc.) */
/* --p-select-transition-duration: 150ms; */
/* ================================
p-select – Tamaños (sm / lg)
================================ */
/* Tamaño de fuente en tamaño small */
/* --p-select-sm-font-size: 0.875rem; */
/* Padding horizontal en tamaño small */
/* --p-select-sm-padding-x: 0.6rem; */
/* Padding vertical en tamaño small */
/* --p-select-sm-padding-y: 0.35rem; */
/* Tamaño de fuente en tamaño large */
/* --p-select-lg-font-size: 1.025rem; */
/* Padding horizontal en tamaño large */
/* --p-select-lg-padding-x: 1rem; */
/* Padding vertical en tamaño large */
/* --p-select-lg-padding-y: 0.7rem; */
/* ================================
p-select – Icono dropdown
================================ */
/* Ancho fijo del área del icono dropdown */
/* --p-select-dropdown-width: 2.25rem; */
/* Color del icono dropdown */
--p-select-dropdown-color: #6b7280;
/* ================================
p-select – Overlay (lista opciones / móvil)
================================ */
/* Fondo del overlay (panel desplegado) */
--p-select-overlay-background: #ffffff;
/* Color del borde del overlay */
/* --p-select-overlay-border-color: #e5e7eb; */
/* Radio de borde del overlay */
/* --p-select-overlay-border-radius: 0.75rem; */
/* Color de texto dentro del overlay */
--p-select-overlay-color: #271111;
/* Sombra del overlay (útil en desktop y mobile) */
/* --p-select-overlay-shadow: 0 18px 45px rgba(15,23,42,0.25); */
/* ================================
p-select – Lista interna
================================ */
/* Padding interno de la lista de opciones */
/* --p-select-list-padding: 0.5rem 0; */
/* Separación vertical entre elementos de la lista */
/* --p-select-list-gap: 0.125rem; */
/* Padding del header dentro de la lista (si se usa template de header) */
/* --p-select-list-header-padding: 0.75rem 1rem; */
/* ================================
p-select – Opciones individuales
================================ */
/* Fondo de la opción en foco */
--p-select-option-focus-background: #2f8d83;
/* Fondo de la opción seleccionada */
--p-select-option-selected-background: #e0e0e0;
/* Fondo de la opción seleccionada con foco */
--p-select-option-selected-focus-background: #2f8d83;
/* Color de texto de la opción */
--p-select-option-color: #686868;
/* Color de texto de la opción en foco */
--p-select-option-focus-color: #ffffff;
/* Color de texto de la opción seleccionada */
--p-select-option-selected-color: #686868;
/* Color de texto de la opción seleccionada con foco */
--p-select-option-selected-focus-color: #ffffff;
/* Padding interno de cada opción */
/* --p-select-option-padding: 0.5rem 0.75rem; */
/* Radio de borde de cada opción (pill/redondeado) */
/* --p-select-option-border-radius: 0.375rem; */
/* ================================
p-select – Grupos de opciones
================================ */
/* Fondo del grupo de opciones */
--p-select-option-group-background: #f9fafb;
/* Color de texto del grupo de opciones */
--p-select-option-group-color: #6b7280;
/* Peso de fuente del grupo de opciones */
/* --p-select-option-group-font-weight: 600; */
/* Padding del grupo de opciones */
/* --p-select-option-group-padding: 0.5rem 0.75rem; */
/* ================================
p-select – Iconos auxiliares
================================ */
/* Color del icono de limpiar (clear) */
--p-select-clear-icon-color: #9ca3af;
/* Color del checkmark de la opción seleccionada */
--p-select-checkmark-color: #22c55e;
/* Margen izquierdo donde empieza el checkmark */
/* --p-select-checkmark-gutter-start: 0.5rem; */
/* Margen derecho donde termina el checkmark */
/* --p-select-checkmark-gutter-end: 0.5rem; */
/* ================================
p-select – Mensaje de lista vacía
================================ */
/* Padding del mensaje cuando no hay opciones */
/* --p-select-empty-message-padding: 0.75rem 1rem; */
/* ================================
p-carousel (Banners)
================================ */
/* Color de fondo del carrusel */
--p-carousel-background: transparent;
/* Color del borde del carrusel */
--p-carousel-border-color: transparent;
/* Grosor del borde del carrusel */
--p-carousel-border-width: 0;
/* Padding interno del carrusel */
--p-carousel-padding: 0;
/* Tamaño total de los botones de navegación (prev/next) */
/* --p-carousel-nav-button-size: 2.5rem; */
/* Tamaño del ícono dentro de los botones de navegación */
/* --p-carousel-nav-button-icon-size: 1.25rem; */
/* Color del ícono en los botones de navegación */
--p-carousel-nav-button-color: #564d83;
/* Color del ícono cuando se hace hover */
--p-carousel-nav-button-hover-color: #26186e;
/* Fondo de los botones de navegación */
--p-carousel-nav-button-background: transparent;
/* Fondo cuando se hace hover en los botones de navegación */
--p-carousel-nav-button-hover-background: transparent;
/* Color del borde de los botones de navegación */
--p-carousel-nav-button-border-color: transparent;
/* Color del borde en hover en los botones */
--p-carousel-nav-button-hover-border-color: transparent;
/* Grosor del borde del botón de navegación */
--p-carousel-nav-button-border-width: 0;
/* Color de los indicadores inactivos (puntos debajo) */
--p-carousel-indicator-background: #e0e0e0;
/* Color del indicador en hover (puntos debajo) */
--p-carousel-indicator-hover-background: #332c57;
/* Color del indicador activo (puntos debajo) */
--p-carousel-indicator-active-background: #564d83;
/* Ancho de cada indicador */
/* --p-carousel-indicator-width: 0.75rem; */
/* Alto de cada indicador */
/* --p-carousel-indicator-height: 0.75rem; */
/* Forma de los indicadores (50% = círculo) */
/* --p-carousel-indicator-border-radius: 50%; */
/* Espacio entre indicadores */
--p-carousel-indicator-gap: 0.5rem;
/* Espacio entre ítems del carrusel (horizontal) */
--p-carousel-items-gap: 1rem;
/* Espacio entre ítems del carrusel (vertical) */
--p-carousel-vertical-items-gap: 1rem;
/* ================================
p-textarea
================================ */
/* Color del texto dentro del textarea */
--p-textarea-color: #000000;
/* Color de fondo del textarea */
--p-textarea-background: #ffffff;
/* Color del texto placeholder */
--p-textarea-placeholder-color: #7f7f7f;
/* Color del borde del textarea */
--p-textarea-border-color: #564d83;
/* Grosor del borde del textarea */
--p-textarea-border-width: 1px;
/* Radio del borde del textarea */
--p-textarea-border-radius: 6px;
/* Color del borde cuando se hace hover */
--p-textarea-hover-border-color: #463b7b;
/* Color del borde cuando el textarea está en focus */
--p-textarea-focus-border-color: #463b7b;
/* Color del anillo de focus (cuando el tema lo usa) */
--p-textarea-focus-ring-color: color-mix(in srgb, var(--p-primary-color), transparent 70%);
/* Padding horizontal dentro del textarea */
--p-textarea-padding-x: 0.75rem;
/* Padding vertical dentro del textarea */
--p-textarea-padding-y: 0.75rem;
/* Tamaño de fuente dentro del textarea */
--p-textarea-font-size: 1rem;
/* Color de fondo cuando el textarea está deshabilitado */
--p-textarea-disabled-background: #f0f0f0;
/* Color del borde cuando el textarea está deshabilitado */
--p-textarea-disabled-border-color: #dcdcdc;
/* Color del texto cuando el textarea está deshabilitado */
--p-textarea-disabled-color: #9b9b9b;
/* ================================
p-checkbox – Caja base
================================ */
/* Color de fondo de la caja del checkbox */
--p-checkbox-background: #ffffff;
/* Color del borde del checkbox */
--p-checkbox-border-color: #9ca3af;
/* Grosor del borde */
--p-checkbox-border-width: 2px;
/* Radio de borde */
--p-checkbox-border-radius: 4px;
/* Tamaño de la caja */
/* --p-checkbox-width: 1.15rem; */
/* --p-checkbox-height: 1.15rem; */
/* Sombra del checkbox */
/* --p-checkbox-shadow: none; */
/* ================================
p-checkbox – Hover
================================ */
/* Fondo del checkbox en hover */
--p-checkbox-hover-background: #ffffff;
/* Borde del checkbox en hover */
--p-checkbox-hover-border-color: #6b7280;
/* ================================
p-checkbox – Focus
================================ */
/* Ancho del focus ring */
--p-checkbox-focus-ring-width: 2px;
/* Estilo del focus ring */
/* --p-checkbox-focus-ring-style: solid; */
/* Color del focus ring */
--p-checkbox-focus-ring-color: #2f8d83;
/* Offset del focus ring */
/* --p-checkbox-focus-ring-offset: 2px; */
/* Sombra del focus ring */
/* --p-checkbox-focus-ring-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35); */
/* ================================
p-checkbox – Estado checked
================================ */
/* Fondo cuando está seleccionado */
--p-checkbox-checked-background: #2f8d83;
/* Color del borde cuando está seleccionado */
--p-checkbox-checked-border-color: #2f8d83;
/* Color del ícono (checkmark) */
--p-checkbox-checked-icon-color: #ffffff;
/* Sombra del checkbox cuando está seleccionado */
/* --p-checkbox-checked-shadow: none; */
/* ================================
p-checkbox – Estado checked hover
================================ */
/* Fondo en hover cuando está seleccionado */
--p-checkbox-checked-hover-background: #2f8d83;
/* Borde en hover cuando está seleccionado */
--p-checkbox-checked-hover-border-color: #1e40af;
/* ================================
p-checkbox – Estado active
================================ */
/* Fondo al hacer click (active) */
--p-checkbox-active-background: #1e40af;
/* Borde al hacer click */
--p-checkbox-active-border-color: #1d4ed8;
/* Color del ícono al hacer click */
--p-checkbox-active-icon-color: #e5e7eb;
/* ================================
p-checkbox – Disabled
================================ */
/* Fondo deshabilitado */
--p-checkbox-disabled-background: #f3f4f6;
/* Borde deshabilitado */
--p-checkbox-disabled-border-color: #d1d5db;
/* Color del ícono deshabilitado */
--p-checkbox-disabled-icon-color: #9ca3af;
/* ================================
p-checkbox – Label
================================ */
/* Color del texto del label */
--p-checkbox-label-color: #111827;
/* Color del texto del label en hover */
--p-checkbox-label-hover-color: #000000;
/* Separación entre checkbox y label */
/* --p-checkbox-label-gap: 0.5rem; */
/* ================================
p-inputgroup – Contenedor
================================ */
/* Radio de borde del inputgroup (se refleja en los addons y controles unidos) */
/* --p-inputgroup-border-radius: 0.5rem; */
/* Sombra del inputgroup (por ejemplo cuando un hijo tiene focus) */
/* --p-inputgroup-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); */
/* Separación horizontal entre elementos del inputgroup */
/* --p-inputgroup-gap: 0px; */
/* ================================
p-inputgroup – Addon (texto o icono lateral)
================================ */
/* Fondo de los addons (prefix/suffix) */
--p-inputgroup-addon-background: #f3f4f6;
/* Color del texto o ícono del addon */
--p-inputgroup-addon-color: #4b5563;
/* Borde del addon */
--p-inputgroup-addon-border-color: #d1d5db;
/* Grosor del borde del addon */
/* --p-inputgroup-addon-border-width: 1px; */
/* Padding interno del addon */
/* --p-inputgroup-addon-padding: 0.5rem 0.75rem; */
/* Tamaño del icono dentro del addon */
/* --p-inputgroup-addon-icon-size: 1rem; */
/* ================================
p-inputgroup – Addon (hover / focus)
================================ */
/* Color de fondo del addon en hover */
--p-inputgroup-addon-hover-background: #e5e7eb;
/* Color del borde del addon en hover */
--p-inputgroup-addon-hover-border-color: #9ca3af;
/* Color del texto/ícono en hover */
--p-inputgroup-addon-hover-color: #111827;
/* Color del borde del addon cuando un input dentro del group tiene foco */
--p-inputgroup-addon-focus-border-color: #2563eb;
/* ================================
p-inputgroup – Buttons integrados
================================ */
/* Radio de borde de los botones dentro del inputgroup */
/* --p-inputgroup-button-border-radius: 0.5rem; */
/* Sombra de los botones dentro del inputgroup */
/* --p-inputgroup-button-shadow: none; */
/* ================================
p-table / Configuración general
================================ */
/* Duración de las transiciones */
/* --p-datatable-transition-duration: 0.2s; */
/* Color del borde del contenedor */
--p-datatable-border-color: #d9d9d9;
/* ================================
Header general de p-table
================================ */
/* Fondo del header general */
--p-datatable-header-background: #ffffff;
/* Color de borde del header */
--p-datatable-header-border-color: #d9d9d9;
/* Color del texto */
--p-datatable-header-color: #333333;
/* Grosor del borde */
/* --p-datatable-header-border-width: 1px; */
/* Padding interno */
/* --p-datatable-header-padding: 1rem; */
/* ================================
Celdas de encabezado (th)
================================ */
/* Fondo normal */
--p-datatable-header-cell-background: #f7f7f7;
/* Fondo hover */
--p-datatable-header-cell-hover-background: #ececec;
/* Fondo cuando está ordenado (selected) */
--p-datatable-header-cell-selected-background: #564d83;
/* Color del borde */
--p-datatable-header-cell-border-color: #d9d9d9;
/* Color del texto */
--p-datatable-header-cell-color: #333333;
/* Color del texto hover */
--p-datatable-header-cell-hover-color: #333333;
/* Color del texto seleccionado */
--p-datatable-header-cell-selected-color: #ffffff;
/* Separación del contenido */
/* --p-datatable-header-cell-gap: 0.5rem; */
/* Padding interno */
/* --p-datatable-header-cell-padding: 0.75rem 1rem; */
/* Focus ring grosor */
/* --p-datatable-header-cell-focus-ring-width: 2px; */
/* Focus ring estilo */
/* --p-datatable-header-cell-focus-ring-style: solid; */
/* Focus ring color */
/* --p-datatable-header-cell-focus-ring-color: #66afe9; */
/* Offset del focus ring */
/* --p-datatable-header-cell-focus-ring-offset: 1px; */
/* Sombra del focus ring */
/* --p-datatable-header-cell-focus-ring-shadow: 0 0 0 2px #b3d8ff; */
/* Grosor del título en columnas */
/* --p-datatable-column-title-font-weight: 600; */
/* ================================
Íconos de ordenamiento (sort)
================================ */
/* Color normal */
--p-datatable-sort-icon-color: #888888;
/* Color hover */
--p-datatable-sort-icon-hover-color: #0056b3;
/* ================================
Filas del body
================================ */
/* Fondo normal */
--p-datatable-row-background: #ffffff;
/* Fondo hover */
--p-datatable-row-hover-background: #f2f2f2;
/* Fondo seleccionado */
--p-datatable-row-selected-background: #e6f3ff;
/* Color del texto */
--p-datatable-row-color: #333333;
/* Texto en hover */
--p-datatable-row-hover-color: #222222;
/* Texto seleccionado */
--p-datatable-row-selected-color: #003d80;
/* Focus ring grosor */
/* --p-datatable-row-focus-ring-width: 2px; */
/* Focus ring estilo */
/* --p-datatable-row-focus-ring-style: solid; */
/* Focus ring color */
--p-datatable-row-focus-ring-color: #66afe9;
/* Focus ring offset */
/* --p-datatable-row-focus-ring-offset: 1px; */
/* Focus ring sombra */
--p-datatable-row-focus-ring-shadow: 0 0 0 3px #b3d8ff;
/* Fondo de filas alternadas */
--p-datatable-row-striped-background: #fafafa;
/* ================================
Celdas del body (td)
================================ */
/* Color del borde */
--p-datatable-body-cell-border-color: #d9d9d9;
/* Padding interno */
/* --p-datatable-body-cell-padding: 0.75rem 1rem; */
/* Color del borde en selección */
--p-datatable-body-cell-selected-border-color: #99c7ff;
/* ================================
Footer (tfoot)
================================ */
/* Fondo */
--p-datatable-footer-cell-background: #f7f7f7;
/* Borde */
--p-datatable-footer-cell-border-color: #d9d9d9;
/* Color del texto */
--p-datatable-footer-cell-color: #333333;
/* Padding */
/* --p-datatable-footer-cell-padding: 1rem; */
/* Grosor del texto */
/* --p-datatable-column-footer-font-weight: 600; */
/* Fondo general del footer */
--p-datatable-footer-background: #f7f7f7;
/* Borde general */
--p-datatable-footer-border-color: #d9d9d9;
/* Color texto */
--p-datatable-footer-color: #333333;
/* Grosor borde */
/* --p-datatable-footer-border-width: 1px; */
/* Padding general */
/* --p-datatable-footer-padding: 1rem; */
/* ================================
Paginación -- para completo ver el componete de paginador que es un componnte diferente
================================ */
/* Borde superior del paginador */
--p-datatable-paginator-top-border-color: #d9d9d9;
/* Grosor borde superior */
/* --p-datatable-paginator-top-border-width: 1px; */
/* Borde inferior del paginador */
--p-datatable-paginator-bottom-border-color: #d9d9d9;
/* Grosor borde inferior */
/* --p-datatable-paginator-bottom-border-width: 1px; */
/* ================================
Puntos de Drop (drag & drop)
================================ */
/* Todos los puntos de drop usan el mismo valor */
--p-datatable-drop-point-color-0: #66afe9;
--p-datatable-drop-point-color-1: #66afe9;
--p-datatable-drop-point-color-2: #66afe9;
--p-datatable-drop-point-color-3: #66afe9;
--p-datatable-drop-point-color-4: #66afe9;
--p-datatable-drop-point-color-5: #66afe9;
--p-datatable-drop-point-color-6: #66afe9;
--p-datatable-drop-point-color-7: #66afe9;
--p-datatable-drop-point-color-8: #66afe9;
--p-datatable-drop-point-color-9: #66afe9;
--p-datatable-drop-point-color-10: #66afe9;
--p-datatable-drop-point-color-11: #66afe9;
--p-datatable-drop-point-color-12: #66afe9;
--p-datatable-drop-point-color-13: #66afe9;
--p-datatable-drop-point-color-14: #66afe9;
/* ================================
Resizers de columnas
================================ */
/* Ancho del resizer para varios breakpoints */
/* --p-datatable-column-resizer-width-0: 4px; */
/* --p-datatable-column-resizer-width-1: 4px; */
/* --p-datatable-column-resizer-width-2: 4px; */
/* --p-datatable-column-resizer-width-3: 4px; */
/* --p-datatable-column-resizer-width-4: 4px; */
/* --p-datatable-column-resizer-width-5: 4px; */
/* Ancho del indicador de resize */
/* --p-datatable-resize-indicator-width: 2px; */
/* Color del indicador */
--p-datatable-resize-indicator-color: #66afe9;
/* ================================
Ícono de carga
================================ */
/* Tamaño del spinner */
/* --p-datatable-loading-icon-size: 2rem; */
/* ================================
Botón para expandir/cerrar fila
================================ */
/* Fondo hover */
--p-datatable-row-toggle-button-hover-background: #e6e6e6;
/* Fondo seleccionado + hover */
--p-datatable-row-toggle-button-selected-hover-background: #b3d8ff;
/* Color del ícono */
--p-datatable-row-toggle-button-color: #555555;
/* Color hover */
--p-datatable-row-toggle-button-hover-color: #333333;
/* Color seleccionado + hover */
--p-datatable-row-toggle-button-selected-hover-color: #00264d;
/* Tamaño */
/* --p-datatable-row-toggle-button-size: 1.75rem; */
/* Redondeo */
/* --p-datatable-row-toggle-button-border-radius: 50%; */
/* Focus ring grosor */
/* --p-datatable-row-toggle-button-focus-ring-width: 2px; */
/* Focus ring estilo */
/* --p-datatable-row-toggle-button-focus-ring-style: solid; */
/* Focus ring color */
/* --p-datatable-row-toggle-button-focus-ring-color: #66afe9; */
/* Offset */
/* --p-datatable-row-toggle-button-focus-ring-offset: 1px; */
/* Sombra */
--p-datatable-row-toggle-button-focus-ring-shadow: 0 0 0 2px #b3d8ff;
/* ================================
Filtros
================================ */
/* Espacio entre filtros inline */
/* --p-datatable-filter-inline-gap: 0.5rem; */
/* Select overlay — fondo */
--p-datatable-filter-overlay-select-background: #ffffff;
/* Select overlay — borde */
--p-datatable-filter-overlay-select-border-color: #cccccc;
/* Select overlay — radio */
/* --p-datatable-filter-overlay-select-border-radius: 6px; */
/* Select overlay — texto */
--p-datatable-filter-overlay-select-color: #333333;
/* Select overlay — sombra */
/* --p-datatable-filter-overlay-select-shadow: 0 2px 6px rgba(0,0,0,0.1); */
/* Popover de filtro — fondo */
--p-datatable-filter-overlay-popover-background: #ffffff;
/* Popover — borde */
--p-datatable-filter-overlay-popover-border-color: #cccccc;
/* Popover — radio */
/* --p-datatable-filter-overlay-popover-border-radius: 8px; */
/* Popover — texto */
--p-datatable-filter-overlay-popover-color: #333333;
/* Popover — sombra */
/* --p-datatable-filter-overlay-popover-shadow: 0 4px 12px rgba(0,0,0,0.15); */
/* Popover — padding */
/* --p-datatable-filter-overlay-popover-padding: 1rem; */
/* Popover — gap */
/* --p-datatable-filter-overlay-popover-gap: 0.75rem; */
/* Borde entre reglas */
--p-datatable-filter-rule-border-color: #d9d9d9;
/* Padding lista de constraints */
/* --p-datatable-filter-constraint-list-padding: 0.5rem; */
/* Gap entre constraints */
/* --p-datatable-filter-constraint-list-gap: 0.5rem; */
/* Constraint con focus */
--p-datatable-filter-constraint-focus-background: #f2f2f2;
/* Constraint seleccionada */
--p-datatable-filter-constraint-selected-background: #d9eaff;
/* Constraint seleccionada + focus */
--p-datatable-filter-constraint-selected-focus-background: #b3d8ff;
/* Color texto */
--p-datatable-filter-constraint-color: #333333;
/* Texto focus */
--p-datatable-filter-constraint-focus-color: #222222;
/* Texto seleccionado */
--p-datatable-filter-constraint-selected-color: #004a99;
/* Texto seleccionado + focus */
--p-datatable-filter-constraint-selected-focus-color: #003d80;
/* Separador */
--p-datatable-filter-constraint-separator-border-color: #d9d9d9;
/* Padding individual */
/* --p-datatable-filter-constraint-padding: 0.5rem 0.75rem; */
/* Radio */
/* --p-datatable-filter-constraint-border-radius: 6px; */
/* ============================================================
p-paginator - Contenedor General
============================================================ */
/* Fondo del paginador */
--p-paginator-background: #ffffff;
/* Color del texto principal */
--p-paginator-color: #1f2937;
/* Color del borde */
--p-paginator-border-color: #e5e7eb;
/* Grosor del borde */
/* --p-paginator-border-width: 1px; */
/* Sombra general del paginador */
/* --p-paginator-shadow: 0 1px 2px rgba(0,0,0,0.08); */
/* Padding interno */
/* --p-paginator-padding: 0.75rem 1rem; */
/* Espaciado entre botones */
/* --p-paginator-button-gap: 0.25rem; */
/* ============================================================
p-paginator - Botones generales
============================================================ */
/* Fondo de botón normal */
--p-paginator-button-background: #f3f4f6;
/* Color de texto del botón */
--p-paginator-button-color: #374151;
/* Color del borde del botón */
--p-paginator-button-border-color: #d1d5db;
/* Grosor del borde del botón */
/* --p-paginator-button-border-width: 1px; */
/* Radio del borde */
/* --p-paginator-button-border-radius: 0.375rem; */
/* Padding del botón */
/* --p-paginator-button-padding: 0.5rem 0.75rem; */
/* Tamaño del ícono dentro de botones */
/* --p-paginator-button-icon-size: 1rem; */
/* ============================================================
p-paginator - Botones Hover
============================================================ */
/* Fondo en hover */
--p-paginator-button-hover-background: #e5e7eb;
/* Color de texto en hover */
--p-paginator-button-hover-color: #111827;
/* Borde en hover */
--p-paginator-button-hover-border-color: #cbd5e1;
/* ============================================================
p-paginator - Botones Activos
============================================================ */
/* Fondo del botón activo */
--p-paginator-button-active-background: #dbeafe;
/* Color de texto del botón activo */
--p-paginator-button-active-color: #1d4ed8;
/* Color del borde activo */
--p-paginator-button-active-border-color: #93c5fd;
/* ============================================================
p-paginator - Botones Active Hover
============================================================ */
/* Fondo en hover cuando está activo */
--p-paginator-button-active-hover-background: #bfdbfe;
/* Color en hover cuando está activo */
--p-paginator-button-active-hover-color: #1e40af;
/* Borde en hover cuando está activo */
--p-paginator-button-active-hover-border-color: #60a5fa;
/* ============================================================
p-paginator - Botón para Página Actual
============================================================ */
/* Fondo del botón de página actual */
--p-paginator-current-background: #2563eb;
/* Color del texto del botón actual */
--p-paginator-current-color: #ffffff;
/* Color del borde del botón actual */
--p-paginator-current-border-color: #1d4ed8;
/* Fondo hover del botón actual */
--p-paginator-current-hover-background: #1d4ed8;
/* Texto hover del botón actual */
--p-paginator-current-hover-color: #ffffff;
/* Borde hover del botón actual */
--p-paginator-current-hover-border-color: #1e40af;
/* ============================================================
p-paginator - Nav Buttons (first, prev, next, last)
============================================================ */
/* Fondo de botones de navegación */
--p-paginator-nav-button-background: #f3f4f6;
/* Color del texto/icono */
--p-paginator-nav-button-color: #4b5563;
/* Color del borde */
--p-paginator-nav-button-border-color: #d1d5db;
/* Tamaño del icono */
/* --p-paginator-nav-icon-size: 1rem; */
/* Color del icono */
--p-paginator-nav-icon-color: #6b7280;
/* Color del icono en hover */
--p-paginator-nav-icon-hover-color: #111827;
/* ============================================================
p-paginator - Nav Buttons Hover
============================================================ */
/* Fondo hover */
--p-paginator-nav-button-hover-background: #e5e7eb;
/* Color hover */
--p-paginator-nav-button-hover-color: #111827;
/* Borde hover */
--p-paginator-nav-button-hover-border-color: #cbd5e1;
/* ============================================================
p-paginator - Nav Buttons Selected
============================================================ */
/* Fondo del nav button seleccionado */
--p-paginator-nav-button-selected-background: #564d83c3;
/* Color del texto/icono seleccionado */
--p-paginator-nav-button-selected-color: #1d4ed8;
/* Color del borde seleccionado */
--p-paginator-nav-button-selected-border-color: #93c5fd;
/* Fondo hover cuando está seleccionado */
--p-paginator-nav-button-selected-hover-background: #bfdbfe;
/* Color hover cuando está seleccionado */
--p-paginator-nav-button-selected-hover-color: #1e40af;
/* Borde hover cuando está seleccionado */
--p-paginator-nav-button-selected-hover-border-color: #60a5fa;
/* ============================================================
p-paginator - Inputs (ir a página)
============================================================ */
/* Fondo del input */
--p-paginator-input-background: #ffffff;
/* Color del texto */
--p-paginator-input-color: #111827;
/* Color del borde */
--p-paginator-input-border-color: #d1d5db;
/* Radio del borde */
/* --p-paginator-input-border-radius: 0.375rem; */
/* Padding interno */
/* --p-paginator-input-padding: 0.5rem 0.75rem; */
/* Borde en foco */
--p-paginator-input-focus-border-color: #2563eb;
/* Sombra en foco */
/* --p-paginator-input-focus-shadow: 0 0 0 2px rgba(37,99,235,0.2); */
/* ================================
p-inputtext – Estado Normal
================================ */
/* Fondo del input */
--p-inputtext-background: #ffffff;
/* Color del texto */
--p-inputtext-color: #111827;
/* Color del borde */
--p-inputtext-border-color: #d1d5db;
/* Grosor del borde */
/* --p-inputtext-border-width: 1px; */
/* Radio de borde */
/* --p-inputtext-border-radius: 0.375rem; */
/* Padding interno */
/* --p-inputtext-padding: 0.5rem 0.75rem; */
/* Tamaño de fuente */
/* --p-inputtext-font-size: 1rem; */
/* Color del placeholder */
--p-inputtext-placeholder-color: #9ca3af;
/* ================================
p-inputtext – Hover
================================ */
/* Fondo hover */
--p-inputtext-hover-background: #ffffff;
/* Borde hover */
--p-inputtext-hover-border-color: #9ca3af;
/* Texto hover */
--p-inputtext-hover-color: #111827;
/* ================================
p-inputtext – Focus
================================ */
/* Fondo en foco */
--p-inputtext-focus-background: #ffffff;
/* Texto en foco */
--p-inputtext-focus-color: #111827;
/* Borde en foco */
--p-inputtext-focus-border-color: #2563eb;
/* Sombra del focus ring */
/* --p-inputtext-focus-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25); */
/* ================================
p-inputtext – Disabled
================================ */
/* Fondo disabled */
--p-inputtext-disabled-background: #f3f4f6;
/* Texto disabled */
--p-inputtext-disabled-color: #9ca3af;
/* Borde disabled */
--p-inputtext-disabled-border-color: #e5e7eb;
/* ================================
p-inputtext – Invalid (ng-invalid)
================================ */
/* Borde de error */
--p-inputtext-invalid-border-color: #dc2626;
/* Sombra en error */
/* --p-inputtext-invalid-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2); */
/* ================================
p-inputtext – Small / Large
================================ */
/* Padding small */
/* --p-inputtext-sm-padding: 0.4rem 0.65rem; */
/* Tamaño de fuente small */
/* --p-inputtext-sm-font-size: 0.875rem; */
/* Padding large */
/* --p-inputtext-lg-padding: 0.65rem 1rem; */
/* Tamaño de fuente large */
/* --p-inputtext-lg-font-size: 1.125rem; */
/* ================================
p-inputtext – Prefix / Suffix
================================ */
/* Color del texto del prefijo/sufijo */
--p-inputtext-addon-color: #4b5563;
/* Fondo del prefijo/sufijo */
--p-inputtext-addon-background: #f9fafb;
/* Borde del prefijo/sufijo */
--p-inputtext-addon-border-color: #d1d5db;
/* Padding del prefijo/sufijo */
/* --p-inputtext-addon-padding: 0.5rem 0.75rem; */
/* Radio de borde del prefijo/sufijo */
/* --p-inputtext-addon-border-radius: 0.375rem; */
/* ================================
p-inputtext – Iconos internos
================================ */
/* Color del icono dentro del input */
--p-inputtext-icon-color: #6b7280;
/* Tamaño del icono */
/* --p-inputtext-icon-size: 1rem; */
/* Color del icono en hover */
--p-inputtext-icon-hover-color: #111827;
/* ================================
p-password – Meter (barra)
================================ */
/* Color de fondo de la barra del medidor */
--p-password-meter-background: #e5e7eb;
/* Radio de borde de la barra del medidor */
/* --p-password-meter-border-radius: 9999px; */
/* Altura de la barra del medidor */
/* --p-password-meter-height: 0.4rem; */
/* ================================
p-password – Icono (ojo / máscara)
================================ */
/* Color del icono de mostrar/ocultar contraseña */
--p-password-icon-color: #6b7280;
/* ================================
p-password – Overlay del panel
================================ */
/* Color de fondo del overlay (panel flotante) */
--p-password-overlay-background: #ffffff;
/* Color del borde del overlay */
/* --p-password-overlay-border-color: #d1d5db; */
/* Radio de borde del overlay */
/* --p-password-overlay-border-radius: 0.75rem; */
/* Color de texto dentro del overlay */
--p-password-overlay-color: #111827;
/* Padding interno del overlay */
/* --p-password-overlay-padding: 1rem; */
/* Sombra del overlay */
/* --p-password-overlay-shadow: 0 10px 25px rgba(15, 23, 42, 0.15); */
/* ================================
p-password – Contenido interno
================================ */
/* Separación (gap) entre elementos del contenido del panel */
/* --p-password-content-gap: 0.75rem; */
/* ================================
p-password – Fuerza de la contraseña
================================ */
/* Fondo para contraseña débil */
--p-password-strength-weak-background: #ef4444;
/* Fondo para contraseña media */
--p-password-strength-medium-background: #f59e0b;
/* Fondo para contraseña fuerte */
--p-password-strength-strong-background: #10b981;
/* ================================
p-breadcrumb – Contenedor
================================ */
/* Fondo del breadcrumb */
--p-breadcrumb-background: #ffffff;
/* Color del texto general */
--p-breadcrumb-color: #111827;
/* Padding interno del breadcrumb */
/* --p-breadcrumb-padding: 0.75rem 1rem; */
/* Radio de borde del contenedor */
/* --p-breadcrumb-border-radius: 0.5rem; */
/* Color del borde del contenedor */
--p-breadcrumb-border-color: #e5e7eb;
/* Grosor del borde del contenedor */
/* --p-breadcrumb-border-width: 1px; */
/* Sombra del contenedor */
/* --p-breadcrumb-shadow: 0 1px 2px rgba(0,0,0,0.08); */
/* ================================
p-breadcrumb – Items
================================ */
/* Color del texto de un item */
--p-breadcrumb-item-color: #374151;
/* Color del texto del item en hover */
--p-breadcrumb-item-hover-color: #111827;
/* Color del texto del item activo */
--p-breadcrumb-item-active-color: #1d4ed8;
/* Peso del texto del item activo */
/* --p-breadcrumb-item-active-font-weight: 600; */
/* Separación horizontal entre items */
/* --p-breadcrumb-gap: 0.5rem; */
/* ================================
p-breadcrumb – Links
================================ */
/* Color de enlace */
--p-breadcrumb-link-color: #2563eb;
/* Color de enlace en hover */
--p-breadcrumb-link-hover-color: #1e40af;
/* Decoración del enlace */
/* --p-breadcrumb-link-decoration: none; */
/* Decoración del enlace en hover */
/* --p-breadcrumb-link-hover-decoration: underline; */
/* ================================
p-breadcrumb – Separador
================================ */
/* Color del texto del separador */
--p-breadcrumb-separator-color: #6b7280;
/* Tamaño del separador (icono o slash) */
/* --p-breadcrumb-separator-size: 0.875rem; */
/* Padding horizontal del separador */
/* --p-breadcrumb-separator-padding: 0 0.5rem; */
/* ================================
p-accordion – Contenedor
================================ */
/* Sombra del acordeón */
/* --p-accordion-shadow: none; */
/* Radio de borde general del acordeón */
/* --p-accordion-border-radius: 0.75rem; */
/* Color del borde del acordeón */
--p-accordion-border-color: #e5e7eb;
/* Grosor del borde del acordeón */
/* --p-accordion-border-width: 1px; */
/* ================================
p-accordion – Panel (cada tab)
================================ */
/* Fondo del panel (cuando está colapsado o expandido) */
--p-accordion-panel-background: #ffffff;
/* Color del borde del panel */
--p-accordion-panel-border-color: #e5e7eb;
/* Grosor del borde del panel */
/* --p-accordion-panel-border-width: 1px; */
/* Radio del borde de cada panel */
/* --p-accordion-panel-border-radius: 0.75rem; */
/* Sombra del panel */
/* --p-accordion-panel-shadow: none; */
/* ================================
p-accordion – Header (título del panel)
================================ */
/* Fondo del header */
--p-accordion-header-background: #f9fafb;
/* Color del texto del header */
--p-accordion-header-color: #111827;
/* Color del borde del header */
--p-accordion-header-border-color: #e5e7eb;
/* Grosor del borde del header */
/* --p-accordion-header-border-width: 1px; */
/* Radio del borde del header */
/* --p-accordion-header-border-radius: 0.75rem; */
/* Padding del header */
/* --p-accordion-header-padding: 1rem; */
/* Gap entre ícono y texto del header */
/* --p-accordion-header-gap: 0.75rem; */
/* ================================
p-accordion – Header Hover
================================ */
/* Fondo del header en hover */
--p-accordion-header-hover-background: #f3f4f6;
/* Color del texto en hover */
--p-accordion-header-hover-color: #111827;
/* Color del borde en hover */
--p-accordion-header-hover-border-color: #d1d5db;
/* ================================
p-accordion – Header Active (tab abierto)
================================ */
/* Fondo del header cuando el panel está expandido */
--p-accordion-header-active-background: #eef2ff;
/* Color del texto cuando el panel está expandido */
--p-accordion-header-active-color: #1d4ed8;
/* Color del borde cuando el panel está expandido */
--p-accordion-header-active-border-color: #c7d2fe;
/* ================================
p-accordion – Header Disabled
================================ */
/* Fondo del header deshabilitado */
--p-accordion-header-disabled-background: #f3f4f6;
/* Color del texto deshabilitado */
--p-accordion-header-disabled-color: #9ca3af;
/* Color del borde deshabilitado */
--p-accordion-header-disabled-border-color: #e5e7eb;
/* ================================
p-accordion – Header Focus
================================ */
/* Grosor del focus ring */
/* --p-accordion-header-focus-ring-width: 2px; */
/* Estilo del focus ring */
/* --p-accordion-header-focus-ring-style: solid; */
/* Color del focus ring */
--p-accordion-header-focus-ring-color: #2563eb;
/* Offset del focus ring */
/* --p-accordion-header-focus-ring-offset: 2px; */
/* Sombra del focus ring */
/* --p-accordion-header-focus-ring-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35); */
/* ================================
p-accordion – Iconos
================================ */
/* Color del icono del header */
--p-accordion-header-icon-color: #6b7280;
/* Color del icono en hover */
--p-accordion-header-icon-hover-color: #111827;
/* Color del icono cuando el panel está abierto */
--p-accordion-header-icon-active-color: #1d4ed8;
/* ================================
p-accordion – Content (cuerpo)
================================ */
/* Fondo del contenido */
--p-accordion-content-background: #ffffff;
/* Color del texto del contenido */
--p-accordion-content-color: #111827;
/* Padding del contenido */
/* --p-accordion-content-padding: 1rem; */
/* Color del borde del contenido */
--p-accordion-content-border-color: #e5e7eb;
/* Grosor del borde del contenido */
/* --p-accordion-content-border-width: 1px; */
/* Radio del borde del contenido */
--p-accordion-content-border-radius: 0.75rem;
/* ================================
p-tree – Contenedor raíz
================================ */
/* Fondo del árbol (zona raíz) */
--p-tree-background: #ffffff;
/* Color de texto general del árbol */
--p-tree-color: #111827;
/* Padding interno del árbol */
/* --p-tree-padding: 0.75rem; */
/* Separación entre ramas raíz (gap vertical) */
/* --p-tree-gap: 0.5rem; */
/* Indentación horizontal para los niveles del árbol */
/* --p-tree-indent: 1.5rem; */
/* Duración de las transiciones del árbol (expandir/colapsar) */
/* --p-tree-transition-duration: 0.15s; */
/* ================================
p-tree – Nodo
================================ */
/* Padding interno del nodo (texto + iconos) */
/* --p-tree-node-padding: 0.35rem 0.5rem; */
/* Radio de borde de la “pastilla” del nodo */
/* --p-tree-node-border-radius: 0.375rem; */
/* Fondo del nodo al pasar el mouse (hover) */
--p-tree-node-hover-background: #f3f4f6;
/* Fondo del nodo cuando está seleccionado */
--p-tree-node-selected-background: #dbeafe;
/* Color de texto del nodo (estado normal) */
--p-tree-node-color: #111827;
/* Color de texto del nodo en hover */
--p-tree-node-hover-color: #111827;
/* Color de texto del nodo seleccionado */
--p-tree-node-selected-color: #1d4ed8;
/* Ancho del focus ring del nodo */
/* --p-tree-node-focus-ring-width: 2px; */
/* Estilo de línea del focus ring del nodo */
/* --p-tree-node-focus-ring-style: solid; */
/* Color del focus ring del nodo */
--p-tree-node-focus-ring-color: #2563eb;
/* Separación del focus ring respecto al nodo */
/* --p-tree-node-focus-ring-offset: 2px; */
/* Sombra del focus ring del nodo */
/* --p-tree-node-focus-ring-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35); */
/* Separación vertical entre nodos hermanos */
/* --p-tree-node-gap: 0.25rem; */
/* ================================
p-tree – Iconos de nodo
================================ */
/* Color del icono del nodo (carpeta, archivo, etc.) */
--p-tree-node-icon-color: #6b7280;
/* Color del icono del nodo en hover */
--p-tree-node-icon-hover-color: #111827;
/* Color del icono del nodo cuando está seleccionado */
--p-tree-node-icon-selected-color: #1d4ed8;
/* ================================
p-tree – Botón de toggle del nodo
(flecha de expandir/colapsar)
================================ */
/* Radio de borde del botón de toggle */
/* --p-tree-node-toggle-button-border-radius: 9999px; */
/* Tamaño del botón de toggle (ancho/alto) */
/* --p-tree-node-toggle-button-size: 1.75rem; */
/* Fondo del botón de toggle en hover */
/* --p-tree-node-toggle-button-hover-background: #e5e7eb; */
/* Fondo del botón de toggle en hover cuando el nodo está seleccionado */
/* --p-tree-node-toggle-button-selected-hover-background: #bfdbfe; */
/* Color del icono del botón de toggle */
--p-tree-node-toggle-button-color: #6b7280;
/* Color del icono del botón de toggle en hover */
--p-tree-node-toggle-button-hover-color: #111827;
/* Color del icono del botón de toggle en hover cuando el nodo está seleccionado */
--p-tree-node-toggle-button-selected-hover-color: #1d4ed8;
/* Ancho del focus ring del botón de toggle */
/* --p-tree-node-toggle-button-focus-ring-width: 2px; */
/* Estilo del focus ring del botón de toggle */
/* --p-tree-node-toggle-button-focus-ring-style: solid; */
/* Color del focus ring del botón de toggle */
/* --p-tree-node-toggle-button-focus-ring-color: #2563eb; */
/* Separación del focus ring respecto al botón de toggle */
/* --p-tree-node-toggle-button-focus-ring-offset: 2px; */
/* Sombra del focus ring del botón de toggle */
/* --p-tree-node-toggle-button-focus-ring-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35); */
/* ================================
p-tree – Loading
================================ */
/* Tamaño del icono de carga del árbol */
/* --p-tree-loading-icon-size: 1.25rem; */
/* ================================
p-dialog – Contenedor principal
================================ */
/* Fondo de la ventana del diálogo */
--p-dialog-background: #ffffff;
/* Color del texto dentro del diálogo */
--p-dialog-color: #111827;
/* Anchor o posición base usada internamente */
/* --p-dialog-position: center; */
/* Padding interno del contenedor */
/* --p-dialog-padding: 1.25rem; */
/* Radio de borde del cuadro del diálogo */
/* --p-dialog-border-radius: 0.75rem; */
/* Borde del diálogo (color) */
/* --p-dialog-border-color: #e5e7eb; */
/* Grosor del borde del diálogo */
/* --p-dialog-border-width: 1px; */
/* Sombra del diálogo */
/* --p-dialog-shadow: 0 15px 40px rgba(15,23,42,0.25); */
/* ================================
p-dialog – Overlay (fondo oscuro)
================================ */
/* Color del overlay detrás del diálogo */
/* --p-dialog-mask-background: rgba(0,0,0,0.5); */
/* ================================
p-dialog – Header (barra superior)
================================ */
/* Padding del header */
/* --p-dialog-header-padding: 1rem 1.25rem; */
/* Color del texto del header */
/* --p-dialog-header-color: #111827; */
/* Fondo del header (solo si el tema lo usa separado) */
/* --p-dialog-header-background: #ffffff; */
/* Borde inferior del header */
/* --p-dialog-header-border-color: #e5e7eb; */
/* Grosor del borde inferior */
/* --p-dialog-header-border-width: 1px; */
/* ================================
p-dialog – Header Icon (cerrar/max)
================================ */
/* Color de los iconos del header (cerrar, maximizar) */
/* --p-dialog-header-icon-color: #6b7280; */
/* Color del icono en hover */
/* --p-dialog-header-icon-hover-color: #111827; */
/* Radio del botón de icono */
/* --p-dialog-header-icon-border-radius: 0.375rem; */
/* Fondo en hover del icono del header */
/* --p-dialog-header-icon-hover-background: #f3f4f6; */
/* Tamaño del área clickeable del icono */
/* --p-dialog-header-icon-size: 2rem; */
/* ================================
p-dialog – Title
================================ */
/* Tamaño de fuente del título */
/* --p-dialog-title-font-size: 1.125rem; */
/* Peso de fuente del título */
/* --p-dialog-title-font-weight: 600; */
/* ================================
p-dialog – Content
================================ */
/* Padding del contenido */
/* --p-dialog-content-padding: 1rem 1.25rem; */
/* Color del contenido */
/* --p-dialog-content-color: #111827; */
/* Fondo del contenido */
/* --p-dialog-content-background: #ffffff; */
/* ================================
p-dialog – Footer
================================ */
/* Padding del footer */
/* --p-dialog-footer-padding: 1rem 1.25rem; */
/* Borde superior del footer */
/* --p-dialog-footer-border-color: #e5e7eb; */
/* Grosor del borde superior */
/* --p-dialog-footer-border-width: 1px; */
/* ================================
p-dialog – Animación
================================ */
/* Duración de las transiciones (aparecer/desaparecer) */
/* --p-dialog-transition-duration: 0.2s; */
/* Tipo de easing */
/* --p-dialog-transition-timing-function: cubic-bezier(0.2,0,0,1); */
/* ================================
p-dialog – Tamaños responsivos
================================ */
/* Ancho máximo del diálogo */
/* --p-dialog-max-width: 90vw; */
/* Alto máximo del diálogo */
/* --p-dialog-max-height: 90vh; */
/* Padding cuando está maximizado */
/* --p-dialog-maximized-padding: 1.25rem; */
/* ================================
p-tabs (Tabs component)
================================ */
/* Duración de transición del root */
/* --p-tabs-transition-duration: 0.2s; */
/* -----------------------------
Tab list / barra de pestañas
----------------------------- */
/* Grosor del borde de la barra de pestañas */
/* --p-tabs-tablist-border-width: 1px; */
/* Fondo de la barra de pestañas */
--p-tabs-tablist-background: #f9fafb;
/* Color del borde de la barra de pestañas */
/* --p-tabs-tablist-border-color: #e5e7eb; */
/* -----------------------------
Tab (cada pestaña)
----------------------------- */
/* Fondo de una pestaña normal */
--p-tabs-tab-background: #999595;
/* Fondo de una pestaña al hover */
--p-tabs-tab-hover-background: #52658b;
/* Fondo de una pestaña activa */
--p-tabs-tab-active-background: #404860;
/* Grosor del borde de una pestaña */
/* --p-tabs-tab-border-width: 1px; */
/* Color del borde de una pestaña normal */
/* --p-tabs-tab-border-color: #e5e7eb; */
/* Color del borde de una pestaña al hover */
/* --p-tabs-tab-hover-border-color: #d1d5db; */
/* Color del borde de una pestaña activa */
/* --p-tabs-tab-active-border-color: #93c5fd; */
/* Color del texto de una pestaña normal */
--p-tabs-tab-color: #111827;
/* Color del texto de una pestaña al hover */
--p-tabs-tab-hover-color: #111827;
/* Color del texto de una pestaña activa */
--p-tabs-tab-active-color: #1d4ed8;
/* Padding de cada pestaña */
/* --p-tabs-tab-padding: 0.75rem 1rem; */
/* Peso de fuente de la pestaña */
/* --p-tabs-tab-font-weight: 500; */
/* Margin de cada pestaña (separación entre ellas) */
/* --p-tabs-tab-margin: 0 0.5rem 0 0; */
/* Separación interna (gap) entre elementos en una pestaña (icono + texto) */
/* --p-tabs-tab-gap: 0.5rem; */
/* Focus ring: grosor */
/* --p-tabs-tab-focus-ring-width: 2px; */
/* Focus ring: estilo */
/* --p-tabs-tab-focus-ring-style: solid; */
/* Focus ring: color */
/* --p-tabs-tab-focus-ring-color: #2563eb; */
/* Focus ring: offset */
/* --p-tabs-tab-focus-ring-offset: 2px; */
/* Focus ring: shadow */
/* --p-tabs-tab-focus-ring-shadow: 0 0 0 1px rgba(37,99,235,0.35); */
/* -----------------------------
TabPanel (contenido de la pestaña)
----------------------------- */
/* Fondo del panel de contenido */
--p-tabs-tabpanel-background: #ffffff;
/* Color del texto del panel de contenido */
--p-tabs-tabpanel-color: #111827;
/* Padding del panel de contenido */
/* --p-tabs-tabpanel-padding: 1rem; */
/* Focus ring: grosor en el panel */
/* --p-tabs-tabpanel-focus-ring-width: 2px; */
/* Focus ring: estilo en el panel */
/* --p-tabs-tabpanel-focus-ring-style: solid; */
/* Focus ring: color en el panel */
/* --p-tabs-tabpanel-focus-ring-color: #2563eb; */
/* Focus ring: offset en el panel */
/* --p-tabs-tabpanel-focus-ring-offset: 2px; */
/* Focus ring: sombra en el panel */
/* --p-tabs-tabpanel-focus-ring-shadow: 0 0 0 1px rgba(37,99,235,0.35); */
/* -----------------------------
Navegadores de pestañas (cuando scrollable)
----------------------------- */
/* Fondo del botón de navegación de pestañas */
/* --p-tabs-nav-button-background: #f3f4f6; */
/* Color del botón de navegación de pestañas */
/* --p-tabs-nav-button-color: #6b7280; */
/* Color del botón de navegación en hover */
/* --p-tabs-nav-button-hover-color: #111827; */
/* Ancho del botón de navegación */
/* --p-tabs-nav-button-width: 2.5rem; */
/* Focus ring: grosor del botón de navegación */
/* --p-tabs-nav-button-focus-ring-width: 2px; */
/* Focus ring: estilo del botón de navegación */
/* --p-tabs-nav-button-focus-ring-style: solid; */
/* Focus ring: color del botón de navegación */
/* --p-tabs-nav-button-focus-ring-color: #2563eb; */
/* Focus ring: offset del botón de navegación */
/* --p-tabs-nav-button-focus-ring-offset: 2px; */
/* Focus ring: sombra del botón de navegación */
/* --p-tabs-nav-button-focus-ring-shadow: 0 0 0 1px rgba(37,99,235,0.35); */
/* -----------------------------
Barra activa (underline, indicador)
----------------------------- */
/* Altura de la barra activa que indica la pestaña seleccionada */
/* --p-tabs-active-bar-height: 2px; */
/* Desplazamiento inferior de la barra activa */
/* --p-tabs-active-bar-bottom: 0px; */
/* Color de fondo de la barra activa */
/* --p-tabs-active-bar-background: #2563eb; */
/* ================================
p-fileupload – Contenedor raíz
================================ */
/* Fondo del contenedor del fileupload */
--p-fileupload-background: #ffffff;
/* Color del texto dentro del componente */
--p-fileupload-color: #111827;
/* Padding general del bloque */
/* --p-fileupload-padding: 1rem; */
/* Radio de borde general */
/* --p-fileupload-border-radius: 0.5rem; */
/* Color del borde del panel */
/* --p-fileupload-border-color: #e5e7eb; */
/* Grosor del borde */
/* --p-fileupload-border-width: 1px; */
/* Sombra del contenedor */
/* --p-fileupload-shadow: 0 1px 2px rgba(0,0,0,0.08); */
/* ================================
p-fileupload – Botón "Choose"
================================ */
/* Fondo del botón "Choose" */
/* --p-fileupload-choose-button-background: #2563eb; */
/* Color del texto del botón "Choose" */
/* --p-fileupload-choose-button-color: #ffffff; */
/* Fondo en hover */
/* --p-fileupload-choose-button-hover-background: #1e40af; */
/* Color del texto en hover */
/* --p-fileupload-choose-button-hover-color: #ffffff; */
/* Radio de borde del botón */
/* --p-fileupload-choose-button-border-radius: 0.5rem; */
/* Padding interno */
/* --p-fileupload-choose-button-padding: 0.5rem 1rem; */
/* ================================
p-fileupload – Botón "Upload"
================================ */
/* Fondo del botón Upload */
/* --p-fileupload-upload-button-background: #16a34a; */
/* Color del texto */
/* --p-fileupload-upload-button-color: #ffffff; */
/* Fondo hover */
/* --p-fileupload-upload-button-hover-background: #15803d; */
/* Color hover */
/* --p-fileupload-upload-button-hover-color: #ffffff; */
/* Radio de borde */
/* --p-fileupload-upload-button-border-radius: 0.5rem; */
/* Padding */
/* --p-fileupload-upload-button-padding: 0.5rem 1rem; */
/* ================================
p-fileupload – Botón "Cancel"
================================ */
/* Fondo del botón Cancel */
/* --p-fileupload-cancel-button-background: #dc2626; */
/* Color del texto */
/* --p-fileupload-cancel-button-color: #ffffff; */
/* Fondo hover */
/* --p-fileupload-cancel-button-hover-background: #b91c1c; */
/* Color hover */
/* --p-fileupload-cancel-button-hover-color: #ffffff; */
/* Radio de borde */
/* --p-fileupload-cancel-button-border-radius: 0.5rem; */
/* Padding */
/* --p-fileupload-cancel-button-padding: 0.5rem 1rem; */
/* ================================
p-fileupload – Lista de archivos
================================ */
/* Fondo del item de archivo */
/* --p-fileupload-file-background: #f9fafb; */
/* Color del texto del archivo */
/* --p-fileupload-file-color: #111827; */
/* Borde del item */
/* --p-fileupload-file-border-color: #e5e7eb; */
/* Grosor del borde */
/* --p-fileupload-file-border-width: 1px; */
/* Radio de borde */
/* --p-fileupload-file-border-radius: 0.375rem; */
/* Padding del item */
/* --p-fileupload-file-padding: 0.75rem; */
/* Separación entre archivos */
/* --p-fileupload-file-gap: 0.5rem; */
/* ================================
p-fileupload – Iconos
================================ */
/* Color del ícono de archivo */
/* --p-fileupload-file-icon-color: #6b7280; */
/* Tamaño del ícono */
/* --p-fileupload-file-icon-size: 1.25rem; */
/* ================================
p-fileupload – Progress Bar
================================ */
/* Fondo de la barra de progreso */
/* --p-fileupload-progress-background: #e5e7eb; */
/* Fondo de la parte cargada */
/* --p-fileupload-progress-value-background: #2563eb; */
/* Altura de la barra */
/* --p-fileupload-progress-height: 0.5rem; */
/* Radio de borde de la barra */
/* --p-fileupload-progress-border-radius: 9999px; */
/* ================================
p-fileupload – Mensaje de estado
================================ */
/* Color del texto del estado (Uploaded, Pending) */
/* --p-fileupload-message-color: #374151; */
/* Tamaño de fuente del mensaje */
/* --p-fileupload-message-font-size: 0.875rem; */
/* Padding del mensaje */
/* --p-fileupload-message-padding: 0.25rem 0; */
/* ================================
p-steps – Root / general
================================ */
/* Duración de la transición del componente Steps */
/* --p-steps-transition-duration: 0.2s; */
/* ================================
p-steps – Separador
================================ */
/* Fondo del separador entre pasos (línea) */
--p-steps-separator-background: #564d83;
/* ================================
p-steps – Item Link (zona clicable del paso)
================================ */
/* Radio de borde del link de cada paso */
/* --p-steps-item-link-border-radius: 9999px; */
/* Ancho del focus ring del link */
/* --p-steps-item-link-focus-ring-width: 2px; */
/* Estilo del focus ring del link */
/* --p-steps-item-link-focus-ring-style: solid; */
/* Color del focus ring del link */
/* --p-steps-item-link-focus-ring-color: #2563eb; */
/* Separación del focus ring respecto al link */
/* --p-steps-item-link-focus-ring-offset: 2px; */
/* Sombra del focus ring del link */
/* --p-steps-item-link-focus-ring-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35); */
/* Espacio entre número e icono/label dentro del link */
/* --p-steps-item-link-gap: 0.5rem; */
/* ================================
p-steps – Label (texto del paso)
================================ */
/* Color del texto del label */
--p-steps-item-label-color: #4b5563;
/* Color del texto del label cuando el paso está activo */
--p-steps-item-label-active-color: #564d83;
/* Peso de fuente del label */
/* --p-steps-item-label-font-weight: 500; */
/* ================================
p-steps – Item Number (círculo con número)
================================ */
/* Fondo del círculo del número */
--p-steps-item-number-background: #998cdc;
/* Fondo del círculo cuando el paso está activo */
--p-steps-item-number-active-background: #564d83;
/* Color del borde del círculo */
--p-steps-item-number-border-color: #564d83;
/* Color del borde del círculo cuando el paso está activo */
/* --p-steps-item-number-active-border-color: #1d4ed8; */
/* Color del número (texto) */
--p-steps-item-number-color: #111827;
/* Color del número cuando el paso está activo */
--p-steps-item-number-active-color: #ffffff;
/* Tamaño del círculo (ancho/alto) */
/* --p-steps-item-number-size: 2rem; */
/* Tamaño de fuente del número */
/* --p-steps-item-number-font-size: 0.875rem; */
/* Peso de fuente del número */
/* --p-steps-item-number-font-weight: 600; */
/* Radio de borde del círculo */
/* --p-steps-item-number-border-radius: 9999px; */
/* Sombra del círculo del número */
/* --p-steps-item-number-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); */
/* ================================
p-toggleswitch – Root
================================ */
/* Ancho total del switch */
/* --p-toggleswitch-width: 2.75rem; */
/* Alto total del switch */
/* --p-toggleswitch-height: 1.5rem; */
/* Radio de borde del switch completo */
/* --p-toggleswitch-border-radius: 9999px; */
/* Separación interna entre partes del switch (si aplica) */
/* --p-toggleswitch-gap: 0.125rem; */
/* Sombra del switch */
/* --p-toggleswitch-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); */
/* ================================
p-toggleswitch – Focus ring
================================ */
/* Grosor del focus ring */
/* --p-toggleswitch-focus-ring-width: 2px; */
/* Estilo del focus ring */
/* --p-toggleswitch-focus-ring-style: solid; */
/* Color del focus ring */
/* --p-toggleswitch-focus-ring-color: #2563eb; */
/* Separación del focus ring respecto al switch */
/* --p-toggleswitch-focus-ring-offset: 2px; */
/* Sombra del focus ring */
/* --p-toggleswitch-focus-ring-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35); */
/* ================================
p-toggleswitch – Borde del root
================================ */
/* Grosor del borde del switch */
/* --p-toggleswitch-border-width: 1px; */
/* Color del borde del switch */
/* --p-toggleswitch-border-color: #d1d5db; */
/* Color del borde en hover */
/* --p-toggleswitch-hover-border-color: #9ca3af; */
/* Color del borde cuando está checked */
/* --p-toggleswitch-checked-border-color: #2563eb; */
/* Color del borde checked en hover */
/* --p-toggleswitch-checked-hover-border-color: #1d4ed8; */
/* Color del borde cuando el control es inválido */
/* --p-toggleswitch-invalid-border-color: #dc2626; */
/* ================================
p-toggleswitch – Transiciones
================================ */
/* Duración de la transición del estado */
/* --p-toggleswitch-transition-duration: 0.15s; */
/* Duración del deslizamiento del handle */
/* --p-toggleswitch-slide-duration: 0.15s; */
/* ================================
p-toggleswitch – Fondo del track
================================ */
/* Fondo del switch en estado normal (OFF) */
--p-toggleswitch-background: #e5e7eb;
/* Fondo del switch deshabilitado */
/* --p-toggleswitch-disabled-background: #f3f4f6; */
/* Fondo del switch en hover */
/* --p-toggleswitch-hover-background: #d1d5db; */
/* Fondo del switch cuando está checked */
--p-toggleswitch-checked-background: #2f8d83;
/* Fondo del switch checked en hover */
/* --p-toggleswitch-checked-hover-background: #1d4ed8; */
/* ================================
p-toggleswitch – Handle (círculo)
================================ */
/* Radio de borde del handle */
/* --p-toggleswitch-handle-border-radius: 9999px; */
/* Tamaño del handle (ancho/alto) */
/* --p-toggleswitch-handle-size: 1.25rem; */
/* Fondo del handle */
/* --p-toggleswitch-handle-background: #ffffff; */
/* Fondo del handle deshabilitado */
/* --p-toggleswitch-handle-disabled-background: #e5e7eb; */
/* Fondo del handle en hover */
/* --p-toggleswitch-handle-hover-background: #f9fafb; */
/* Fondo del handle cuando está checked */
/* --p-toggleswitch-handle-checked-background: #ffffff; */
/* Fondo del handle checked en hover */
/* --p-toggleswitch-handle-checked-hover-background: #f9fafb; */
/* ================================
p-toggleswitch – Color del handle
================================ */
/* Color (icono o contenido) del handle */
/* --p-toggleswitch-handle-color: #6b7280; */
/* Color del handle en hover */
/* --p-toggleswitch-handle-hover-color: #111827; */
/* Color del handle cuando está checked */
/* --p-toggleswitch-handle-checked-color: #111827; */
/* Color del handle checked en hover */
/* --p-toggleswitch-handle-checked-hover-color: #111827; */
}
@font-face {
font-family: Poppins-Regular;
src: url('./fonts/poppins/Poppins-Regular.ttf');
}
@font-face {
font-family: Poppins-Medium;
src: url('./fonts/poppins/Poppins-Medium.ttf');
}
html, body {
background-color: var(--bg);
font-family: var(--global-font-family);
color: var(--global-text-color);
}
/*Loader anim */
.qloader {
width: 80px;
height: 80px;
position: relative;
/* Flexbox para centrar perfectamente la imagen dentro */
display: inline-flex;
justify-content: center;
align-items: center;
}
/* El anillo giratorio */
.qloader::before {
content: "";
position: absolute;
inset: 0; /* Ocupa todo el contenedor */
border-radius: 50%;
/* Gradiente Verde a Teal */
background: conic-gradient(#0000 10%, #64a744 50%, #2a7a76 90%);
/* Máscara para el hueco central */
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
animation: qloader-spin 1s infinite linear;
z-index: 10; /* Asegura que el anillo esté por "encima" visualmente */
}
/* Estilos para la imagen dentro del loader */
.qloader img {
width: 65%; /* Reduce este % para alejar la imagen del anillo */
height: 65%;
object-fit: contain;
z-index: 1;
}
@keyframes qloader-spin {
to { transform: rotate(1turn); }
}