/* RecibosPlus custom overrides */

/* Texto blanco sobre fondos intensos */
.bg-blue-600 *, .bg-blue-700 *, .bg-blue-800 *,
.bg-gradient-to-r *, .bg-gradient-to-br * { color: #ffffff !important; }

#caracteristicas .bg-purple-100, #caracteristicas .bg-pink-100 { background-color: #2563eb !important; }
#caracteristicas .text-purple-700, #caracteristicas .text-pink-700 { color: #ffffff !important; }
#nosotros .border-slate-100 { border-color: #2563eb !important; }

#caracteristicas svg:nth-of-type(1) { color: #A8E6CF !important; }
#caracteristicas svg:nth-of-type(2) { color: #FFB6C1 !important; }
#caracteristicas svg:nth-of-type(3) { color: #A0C4FF !important; }
#caracteristicas svg:nth-of-type(4) { color: #FFFACD !important; }
#caracteristicas svg:nth-of-type(5) { color: #FBC4AB !important; }
#caracteristicas svg:nth-of-type(6) { color: #D1C4E9 !important; }

a[href*="instagram"] svg {
  background: linear-gradient(45deg, #f58529 0%, #dd2a7b 33%, #8134af 66%, #515bd4 100%);
  -webkit-background-clip: text;
  color: transparent !important;
}

[class*="bg-purple-"], [class*="bg-pink-"] { background-color: #2563eb !important; }
[class*="border-purple-"], [class*="border-pink-"] { border-color: #2563eb !important; }
[class*="ring-purple-"], [class*="ring-pink-"] { --tw-ring-color: #2563eb !important; }
[class*="from-purple-"], [class*="from-pink-"],
[class*="via-purple-"], [class*="via-pink-"],
[class*="to-purple-"], [class*="to-pink-"] {
  --tw-gradient-from: #2563eb !important;
  --tw-gradient-to: #2563eb !important;
  --tw-gradient-stops: #2563eb, #2563eb !important;
}

#nomina-upload-icon svg, .upload-icon svg { color: #000000 !important; }

span[class*="text-purple-"], span[class*="text-pink-"],
p[class*="text-purple-"], p[class*="text-pink-"],
label[class*="text-purple-"], label[class*="text-pink-"] { color: #2563eb !important; }

[class*="bg-blue-500"], [class*="bg-blue-600"], [class*="bg-blue-700"],
[class*="bg-blue-800"], [class*="bg-blue-900"], [class*="bg-purple-"],
[class*="bg-pink-"], [class*="bg-gradient-"],
[class*="bg-blue-500"] *, [class*="bg-blue-600"] *, [class*="bg-blue-700"] *,
[class*="bg-blue-800"] *, [class*="bg-blue-900"] *, [class*="bg-purple-"] *,
[class*="bg-pink-"] *, [class*="bg-gradient-"] * { color: #ffffff !important; }

a[class*="text-purple-"]:not([class*="bg-"]),
a[class*="text-pink-"]:not([class*="bg-"]) { color: #2563eb !important; }
[class*="hover:text-purple-"]:hover, [class*="hover:text-pink-"]:hover { color: #1d4ed8 !important; }
[class*="hover:bg-purple-"]:hover, [class*="hover:bg-pink-"]:hover { background-color: #1d4ed8 !important; }

#asistencia-card { border: 1px solid #2563eb !important; }
div[data-rp-check-patched="true"] { background: #2563eb !important; color: #ffffff !important; }
div[data-rp-check-patched="true"] svg,
div[data-rp-check-patched="true"] svg path { fill: white !important; color: white !important; }
#rp-ms .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
#rp-save-chk:checked { accent-color: #2563eb; }
.rp-vcb:hover { background: #dbeafe !important; border-color: #93c5fd !important; }
[data-rp-color-fixed="1"] { color: #0f172a !important; }
button[title="Mostrar/ocultar contraseña"]:hover { color: #2563eb !important; }
button[title="Mostrar/ocultar contraseña"] svg { color: inherit !important; fill: none !important; }

/* ============================================================
   HEADER DESKTOP - logos grandes y menú visible
   ============================================================ */

/* El header container ahora tiene clase "rp-portal-header-inner" (inyectada en el JS)
   En desktop: compactar el layout para que entre el menu completo sin bajar zoom. */
@media (min-width: 1024px) {
  .rp-portal-header-inner {
    transform: none !important;
    transform-origin: center top !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 116px !important;
    height: auto !important;
    padding: 14px 18px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .rp-portal-header-inner > :first-child {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
  }

  body:not(.rp-public-landing) header [data-rp-safe-header-brand] {
    margin-right: 4px !important;
  }

  body:not(.rp-public-landing) header [data-rp-brand-lockup="1"] {
    gap: 10px !important;
  }

  body:not(.rp-public-landing) header nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  body:not(.rp-public-landing) header nav > * {
    flex: 0 0 auto !important;
  }

  .rp-portal-header-inner > div:last-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    margin-left: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .rp-portal-header-inner > div:last-child > * {
    flex: 0 0 auto !important;
  }

  /* Logos grandes en desktop */
  body:not(.rp-public-landing) header img[alt="RP"] {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: none !important;
    max-height: none !important;
  }

  body:not(.rp-public-landing) header img[alt="RecibosPlus"] {
    width: clamp(300px, 30vw, 390px) !important;
    height: auto !important;
    min-width: 300px !important;
    max-width: 390px !important;
    max-height: none !important;
  }

  body:not(.rp-public-landing) header button,
  body:not(.rp-public-landing) header nav button,
  body:not(.rp-public-landing) header nav a {
    font-size: 11px !important;
    padding: 7px 11px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1500px) {
  .rp-portal-header-inner {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    row-gap: 0 !important;
  }

  body:not(.rp-public-landing) header [data-rp-tenant-brand],
  body:not(.rp-public-landing) header [data-rp-emp-tenant-brand] {
    display: none !important;
  }

  body:not(.rp-public-landing) header nav {
    order: initial !important;
    width: auto !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 0 !important;
    scrollbar-width: thin !important;
  }

  body:not(.rp-public-landing) header nav::-webkit-scrollbar {
    height: 6px !important;
  }

  body:not(.rp-public-landing) header nav::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 999px !important;
  }

  .rp-portal-header-inner > div:last-child {
    margin-left: 4px !important;
    flex: 1 1 auto !important;
  }
}

/* Clip sin overflow:hidden (overflow:hidden en ancestros rompe sticky en mobile) */
header { clip-path: inset(0) !important; max-width: 100vw !important; }

/* Alinear main a la izquierda */
main.container {
  margin-left: 0 !important; margin-right: auto !important;
  max-width: 100% !important; padding-left: 16px !important;
}

/* Sin scroll horizontal - usar clip en root, NO overflow:hidden en body */
#root > div { overflow-x: clip !important; }

/* ============================================================
   Responsive tablet (max 1023px)
   ============================================================ */
@media (max-width: 1023px) {
  .rp-public-landing, .rp-portal-app, .rp-supervise-page { overflow-x: hidden; }
  .rp-public-landing #inicio img { transform: none !important; }
  .rp-public-landing footer .flex[aria-label="RecibosPlus"] { justify-content: flex-start; }
  .rp-portal-app main {
    width: calc(100% - 20px) !important; max-width: 100% !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  .rp-portal-app header nav {
    display: flex !important; gap: 10px !important;
    overflow-x: auto !important; white-space: nowrap !important; scrollbar-width: none;
  }
  .rp-portal-app header nav::-webkit-scrollbar { display: none; }
  .rp-supervise-page #rp-supervise-root { padding: 14px !important; }
  .rp-supervise-page #rp-supervise-root > .grid { grid-template-columns: 1fr !important; }
  .rp-supervise-page #rp-supervise-root table { min-width: 620px; }
}

/* ============================================================
   MOBILE celular (max 480px)
   - Header FIJO arriba con position:fixed
   - Main con padding-top para no quedar tapado
============================================================ */
@media (max-width: 480px) {

  /* HEADER FIJO ARRIBA - nunca se mueve */
  body:not(.rp-public-landing) header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: 72px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  }

  /* Anular el transform/scale del desktop para mobile */
  .rp-portal-header-inner {
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  /* MAIN: padding-top para no quedar tapado por el header fijo */
  body:not(.rp-public-landing) main,
  body:not(.rp-public-landing) .flex-grow {
    padding-top: 72px !important;
    margin-top: 0 !important;
  }

  /* Logo RP pequeño */
  body:not(.rp-public-landing) header img[alt="RP"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }

  /* Logo texto RecibosPlus - ocultar */
  body:not(.rp-public-landing) header img[alt="RecibosPlus"] {
    display: none !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] {
    min-height: 112px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] .rp-portal-header-inner {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    row-gap: 8px !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-safe-header-brand="console"],
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-brand="1"] {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-right: 8px !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-brand-lockup="1"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-safe-header-brand="console"] img[alt="RP"],
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-brand="1"] img[alt="RP"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-safe-header-brand="console"] img[alt="RecibosPlus"],
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-brand="1"] img[alt="RecibosPlus"] {
    display: block !important;
    width: auto !important;
    height: 20px !important;
    min-width: 0 !important;
    max-width: 164px !important;
    object-fit: contain !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] img[alt="RecibosPlus"] {
    display: block !important;
    width: auto !important;
    height: 20px !important;
    min-width: 0 !important;
    max-width: 164px !important;
    object-fit: contain !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-brand-hidden="1"] {
    display: none !important;
  }

  /* Botones del header: compactos */
  body:not(.rp-public-landing) header button,
  body:not(.rp-public-landing) header nav button {
    padding: 5px 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* Logo empresa: pequeño */
  body:not(.rp-public-landing) header img:not([alt="RP"]):not([alt="RecibosPlus"]) {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
  }

  /* Contenedor derecho: scroll horizontal */
  .rp-portal-header-inner > div:last-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .rp-portal-header-inner > div:last-child::-webkit-scrollbar {
    display: none !important;
  }

  /* Ocultar nombre del empleado */
  body:not(.rp-public-landing) header .text-right {
    display: none !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] .text-right {
    display: block !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  /* Contenido del portal sin desbordamiento horizontal */
  body:not(.rp-public-landing) #root > div {
    overflow-x: hidden !important;
  }

  body:not(.rp-public-landing)[data-rp-console-mobile-header="1"] main,
  body:not(.rp-public-landing)[data-rp-console-mobile-header="1"] .flex-grow {
    padding-top: var(--rp-console-mobile-header-offset, 136px) !important;
  }
}

/* ============================================================
   RRHH mobile - header y nomina deslizables
   ============================================================ */
@media (max-width: 768px) {
  body:not(.rp-public-landing)[data-rp-console-mobile-header="1"] header {
    min-height: 112px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] .rp-portal-header-inner {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    row-gap: 8px !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] .rp-portal-header-inner > :first-child {
    flex: 0 0 auto !important;
    min-width: 32px !important;
    order: 1 !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] .rp-portal-header-inner > div:last-child,
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-actions="1"] {
    order: 2 !important;
    flex: 1 1 calc(100% - 40px) !important;
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] .rp-portal-header-inner > div:last-child::-webkit-scrollbar,
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-actions="1"]::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] nav,
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-nav="1"] {
    order: 3 !important;
    flex: 1 1 100% !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding-right: 12px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] nav::-webkit-scrollbar,
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-nav="1"]::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] nav > *,
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-nav="1"] > *,
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] .rp-portal-header-inner > div:last-child > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-strip="1"] {
    order: 4 !important;
    flex: 1 1 100% !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-actions="1"] {
    order: 2 !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-action-proxy="1"] {
    gap: 10px !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-action-proxy="1"] > *,
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-strip-proxy="1"] > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-strip="1"]::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] nav > div,
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-nav="1"] > div,
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-strip="1"] > div,
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-actions="1"] > div {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
  }

  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-strip="1"] > *,
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-strip-item="1"],
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-actions="1"] > *,
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-action-item="1"] {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }

  [data-rp-nomina-action-bar="1"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  [data-rp-nomina-action-scroll="1"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 2px 8px !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }

  [data-rp-nomina-action-scroll="1"]::-webkit-scrollbar {
    display: none !important;
  }

  [data-rp-nomina-action-scroll="1"] > *,
  [data-rp-nomina-action-item="1"] {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }

  [data-rp-nomina-table-scroll="1"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scrollbar-width: thin !important;
  }

  [data-rp-nomina-table="1"] {
    min-width: 860px !important;
    width: max-content !important;
  }
}

@media (max-width: 480px) {
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-strip-origin="1"] {
    display: none !important;
  }

  body:not(.rp-public-landing)[data-rp-console-mobile-header="1"] main,
  body:not(.rp-public-landing)[data-rp-console-mobile-header="1"] .flex-grow {
    padding-top: var(--rp-console-mobile-header-offset, 136px) !important;
  }
}

@media (max-width: 768px) {
  body:not(.rp-public-landing) header[data-rp-console-mobile-header="1"] [data-rp-console-mobile-actions-origin="1"] {
    display: none !important;
  }
}


/* ===== Hover effect para botones de navegación del portal ===== */
/* Aplica efecto visual al pasar el mouse sobre los botones inactivos */
header nav button.text-slate-400:hover {
  background-color: #ffffff !important;
  color: #7c3aed !important;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.08) !important;
  border-color: transparent !important;
}