/* ---------------------------------------------------------
   shared/style.css — nucleo comun de ambas apps

   Tras homogeneizar el diseno (2026-07-10) casi todo es comun: navbar,
   .nav-btn, .action-bar-sticky, botones de accion y tarjetas de resumen.
   Lo unico que queda en el style.css de cada app:
     - solo licitaciones: .badge-revocada, .badge-suspendida (estados 15/16;
       Compra Agil maneja estados en texto y no los usa).

   OJO: el @apply de Tailwind NO se procesa en un .css estatico servido por
   CDN. Las reglas que aun lo usan aqui abajo son inertes (deuda heredada).
   Todo lo que deba verse de verdad va en CSS plano.
   --------------------------------------------------------- */

/* Tipografia de marca. Vivia solo en licitaciones; al unificar la hereda
   tambien Compra Agil, que ahora carga el <link> de Google Fonts. */
body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Selector de app (nivel 1 de la navbar). Lo inyecta shared/navbar.js.
   CSS plano a proposito: el @apply de Tailwind no se procesa en un .css
   estatico servido por CDN. */
.app-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
}

/* Sombra y borde sutil cuando la barra queda "pegada" al hacer scroll */
.action-bar-sticky.is-stuck {
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    border-bottom-color: #e2e8f0; /* slate-200 */
}

@media (min-width: 640px) {
    .action-bar-sticky {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .action-bar-sticky {
        margin-left: -2rem;
        margin-right: -2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Fix for mobile/iOS Safari click interactions */
button, 
a, 
input[type="checkbox"], 
input[type="radio"], 
.tag-badge,
.fav-btn,
.nav-btn {
    touch-action: manipulation !important; /* Removes 300ms delay on mobile */
    cursor: pointer !important; /* Ensures iOS Safari treats element as clickable */
    -webkit-tap-highlight-color: transparent; /* Removes default iOS tap highlight */
}

/* Botones de la navbar (Explorar / Mis Favoritos / Archivadas).
   CSS plano a proposito: el @apply de Tailwind NO se procesa en un .css
   estatico servido por CDN. Antes vivia como @apply en cada app y por eso
   los botones salian sin padding y sin color (verificado con getComputedStyle
   contra los sitios vivos: padding 0px en ambos). */
.nav-btn {
    padding: 0.5rem 0.75rem;      /* py-2 px-3 */
    border-radius: 0.375rem;      /* rounded-md */
    font-weight: 500;             /* font-medium */
    font-size: 15px;
    color: #475569;               /* slate-600 */
    background-color: transparent;
    transition-property: color, background-color, border-color;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-btn:hover {
    color: #4f46e5;               /* indigo-600 */
    background-color: #f8fafc;    /* slate-50 */
}

.nav-btn.active {
    color: #4f46e5;               /* indigo-600 */
    background-color: #eef2ff;    /* indigo-50 */
}

/* Estado Badges */
.badge-publicada {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.badge-desierta {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.badge-cerrada {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.badge-adjudicada {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.fav-btn {
    transition: all 0.2s;
}

.fav-btn:hover {
    transform: scale(1.1);
}

.fav-btn.active i {
    font-weight: 900;
    color: #f59e0b;
    /* Amber 500 */
}

/* Document Modal Styles */
#document-modal .file-item {
    @apply flex items-center justify-between p-3 rounded-xl bg-white border border-slate-100 hover:border-indigo-200 hover:shadow-sm transition-all cursor-pointer;
}

#document-modal .file-item.active {
    @apply border-indigo-500 bg-indigo-50;
}

#document-modal .file-icon {
    @apply w-10 h-10 rounded-lg flex items-center justify-center text-lg;
}

.bg-pdf {
    @apply bg-rose-50 text-rose-600;
}

.bg-excel {
    @apply bg-emerald-50 text-emerald-600;
}

.bg-word {
    @apply bg-blue-50 text-blue-600;
}

.bg-other {
    @apply bg-slate-100 text-slate-600;
}

/* Custom Scrollbar for list */
#file-list-container::-webkit-scrollbar {
    width: 4px;
}

#file-list-container::-webkit-scrollbar-track {
    background: transparent;
}

#file-list-container::-webkit-scrollbar-thumb {
    @apply bg-slate-200 rounded-full;
}

#file-list-container::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-300;
}

/* Tag Badges Inactive - Improved Visibility */
.tag-badge {
    @apply font-medium border-slate-300 text-slate-600 bg-slate-100;
}

.tag-badge:not(.bg-rose-100):not(.bg-amber-100):not(.bg-indigo-100):not(.bg-emerald-100):not(.bg-orange-100) {
    color: #475569 !important;
    /* slate-700 */
    border-color: #cbd5e1 !important;
    /* slate-300 */
    background-color: #f8fafc !important;
    /* slate-50 */
}

.bg-proceso {
    @apply bg-orange-50 text-orange-600;
}

.bg-orange-100 {
    color: #9a3412 !important;
    border-color: #fed7aa !important;
}

/* Drag & Drop */
#drop-zone.dragover {
    @apply bg-indigo-50;
}

#drop-zone.dragover #drop-overlay {
    display: flex !important;
}

/* Organismo Searchable Dropdown */
.organismo-dropdown {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.organismo-dropdown::-webkit-scrollbar {
    width: 5px;
}

.organismo-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.organismo-dropdown::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 9999px;
}

.organismo-dropdown .org-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: #334155;
    transition: background-color 0.15s, color 0.15s;
    border-bottom: 1px solid #f1f5f9;
}

.organismo-dropdown .org-option:last-child {
    border-bottom: none;
}

.organismo-dropdown .org-option:hover {
    background-color: #eef2ff;
    color: #4338ca;
}

.organismo-dropdown .org-option.selected {
    background-color: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
}

.organismo-dropdown .org-option .org-count {
    font-size: 0.6875rem;
    color: #94a3b8;
    margin-left: 4px;
}

.organismo-dropdown .org-option.selected .org-count {
    color: #6366f1;
}

#organismo-search.has-value {
    border-color: #6366f1;
    background-color: #fafafe;
}

/* =========================================================
   Navbar y barra de acciones — comunes a ambas apps.
   Vivian solo en licitaciones; al homogeneizar el diseno los hereda
   tambien Compra Agil.
   ========================================================= */

/* Navbar baja (antes h-16 = 64px) y fija arriba, para que quede unida
   sin huecos con la barra de acciones sticky que va justo debajo. */
#main-navbar {
    height: 48px;
    position: sticky;
    top: 0;
    z-index: 30;
}

/* Barra de acciones fija (sticky) por tab.
   La navbar mide 48px, por eso top: 48px para que no se monte sobre ella. */
.action-bar-sticky {
    position: sticky;
    top: 48px;
    z-index: 20;
    background-color: #f8fafc; /* slate-50, igual al fondo del body para que no se vea contenido por detras */
    /* Negativos + padding para que el fondo cubra todo el ancho del contenedor al hacer scroll */
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.2s, border-color 0.2s;
}

/* Botones solidos de la barra de acciones de Favoritos (amarillo de marca) */
.action-btn-solid {
    background-color: #FFBA05;
    color: #1D1F25;
    font-size: 12px;
}

.action-btn-solid:hover {
    background-color: #e6a800;
}

/* Botones de alerta (Eliminar Todos / Archivar Seleccion): mismo tamano y forma
   que los amarillos, pero en tono rojizo oscuro para diferenciar acciones destructivas. */
.action-btn-alert {
    background-color: #B91C1C;
    color: #FFFFFF;
    font-size: 12px;
}

.action-btn-alert:hover {
    background-color: #991B1B;
}

/* Tarjetas de resumen de Favoritos/Archivadas.
   Mismo formato que .badge-suspendida: fondo amarillo suave. */
.stat-card {
    border-radius: 8px;
    padding: 8px 12px;
    background-color: #fef9c3;
    border: 1px solid #fef08a;
    color: #854d0e;
}

.stat-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .75;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    margin-top: 2px;
}