/* 
 * Invoice Custom Styles
 * Estilos personalizados para el sistema de facturación
 */

/* ============================================
   CAMPOS DE FORMULARIO
   ============================================ */

/* Campos de input y select con hover naranja */
.invoice-input,
.invoice-select {
  @apply h-10 w-full rounded-lg border border-bgray-200 px-3 text-sm;
  @apply focus:border-success-300 focus:outline-none focus:ring-2 focus:ring-success-100;
  @apply dark:border-darkblack-500 dark:bg-darkblack-500 dark:text-bgray-50;
  transition: all 0.2s ease-in-out;
}

.invoice-input:hover,
.invoice-select:hover {
  @apply border-success-200;
}

/* Campos de textarea */
.invoice-textarea {
  @apply w-full rounded-lg border border-bgray-200 px-3 py-2 text-sm;
  @apply focus:border-success-300 focus:outline-none focus:ring-2 focus:ring-success-100;
  @apply dark:border-darkblack-500 dark:bg-darkblack-500 dark:text-bgray-50;
  transition: all 0.2s ease-in-out;
}

.invoice-textarea:hover {
  @apply border-success-200;
}

/* ============================================
   BOTONES
   ============================================ */

/* Botón principal (naranja/warning) */
.btn-primary {
  @apply bg-success-300 hover:bg-success-400 text-white font-semibold;
  @apply px-6 py-3 rounded-lg transition-all duration-200;
  @apply hover:shadow-lg active:scale-95;
}

/* Botón secundario (borde) */
.btn-secondary {
  @apply border-2 border-bgray-300 hover:border-success-300;
  @apply text-bgray-700 dark:text-bgray-300 font-semibold px-6 py-3 rounded-lg;
  @apply transition-all duration-200 hover:shadow-md active:scale-95;
}

/* Botón de acción especial (warning/naranja) */
.btn-warning {
  @apply bg-warning-300 hover:bg-warning-400 text-white font-semibold;
  @apply px-6 py-3 rounded-lg transition-all duration-200;
  @apply hover:shadow-lg active:scale-95;
}

/* Botón info (azul) */
.btn-info {
  @apply border-2 border-info-500 bg-white hover:bg-info-50;
  @apply text-info-500 font-semibold px-5 py-2.5 rounded-lg;
  @apply transition-all duration-200 hover:shadow-md active:scale-95;
  @apply dark:bg-darkblack-600 dark:hover:bg-info-900/10;
}

/* ============================================
   CHECKBOXES Y RADIOS
   ============================================ */

/* Checkbox moderno */
.modern-checkbox {
  @apply w-5 h-5 rounded border-2 border-bgray-300;
  @apply focus:ring-2 focus:ring-success-200 focus:border-success-300;
  @apply checked:bg-success-300 checked:border-success-300;
  @apply dark:border-darkblack-400;
  transition: all 0.2s ease-in-out;
}

.modern-checkbox:hover {
  @apply border-success-200;
}

/* Radio moderno */
.modern-radio {
  @apply w-5 h-5 border-2 border-bgray-300;
  @apply focus:ring-2 focus:ring-success-200 focus:border-success-300;
  @apply checked:bg-success-300 checked:border-success-300;
  @apply dark:border-darkblack-400;
  transition: all 0.2s ease-in-out;
}

.modern-radio:hover {
  @apply border-success-200;
}

/* ============================================
   RADIO CARDS (Métodos de Pago)
   ============================================ */

.radio-card {
  @apply relative flex items-center justify-center;
  @apply border-2 border-bgray-200 rounded-xl p-6 cursor-pointer;
  @apply transition-all duration-200 hover:border-success-300 hover:shadow-md;
  @apply dark:border-darkblack-400 dark:hover:border-success-300;
}

.radio-card input[type="radio"]:checked ~ * {
  @apply border-success-300 bg-success-50;
  @apply dark:bg-success-900/10;
}

.radio-card:hover {
  @apply shadow-md;
}

/* ============================================
   MODALES
   ============================================ */

/* Modal overlay */
.modal-overlay {
  @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-40;
}

/* Modal content */
.modal-content {
  @apply bg-white dark:bg-darkblack-600 rounded-2xl shadow-2xl;
  @apply max-w-2xl w-full mx-auto mt-20 p-8;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal header */
.modal-header {
  @apply flex items-start justify-between mb-6;
}

/* Modal close button */
.modal-close {
  @apply rounded-full p-2 text-bgray-500 hover:text-bgray-900;
  @apply dark:text-bgray-400 dark:hover:text-white;
  @apply transition-colors duration-200;
}

/* ============================================
   DROPDOWNS
   ============================================ */

.dropdown-content {
  @apply absolute top-full z-20 mt-1 w-full overflow-hidden;
  @apply rounded-lg bg-white shadow-xl border border-bgray-200;
  @apply dark:bg-darkblack-500 dark:border-darkblack-400;
  @apply max-h-[300px] overflow-y-auto;
}

.dropdown-item {
  @apply w-full text-left px-4 py-3;
  @apply hover:bg-bgray-50 dark:hover:bg-darkblack-600;
  @apply rounded-lg transition-colors;
}

/* ============================================
   SECCIONES COLAPSABLES
   ============================================ */

.collapsible-header {
  @apply w-full flex items-center justify-between p-5 text-left;
  @apply hover:bg-bgray-50 dark:hover:bg-darkblack-500;
  @apply transition-colors rounded-xl;
}

.collapsible-arrow {
  @apply w-6 h-6 text-bgray-500 transition-transform duration-300;
}

.collapsible-arrow.open {
  @apply rotate-180;
}

/* ============================================
   TABLAS
   ============================================ */

.invoice-table {
  @apply w-full text-sm;
}

.invoice-table thead {
  @apply border-b-2 border-bgray-900;
}

.invoice-table th {
  @apply pb-2 font-semibold text-bgray-900 dark:text-white;
}

.invoice-table tbody tr {
  @apply border-b border-bgray-200 dark:border-darkblack-400;
}

.invoice-table td {
  @apply py-3 text-bgray-700 dark:text-bgray-300;
}

/* ============================================
   BADGES Y ETIQUETAS
   ============================================ */

.badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
}

.badge-success {
  @apply bg-success-100 text-success-700;
  @apply dark:bg-success-900/20 dark:text-success-300;
}

.badge-warning {
  @apply bg-warning-100 text-warning-700;
  @apply dark:bg-warning-900/20 dark:text-warning-300;
}

.badge-danger {
  @apply bg-red-100 text-red-700;
  @apply dark:bg-red-900/20 dark:text-red-300;
}

.badge-info {
  @apply bg-info-100 text-info-700;
  @apply dark:bg-info-900/20 dark:text-info-300;
}

/* ============================================
   RESUMEN DE FACTURA
   ============================================ */

.invoice-summary {
  @apply space-y-3 text-sm;
}

.invoice-summary-row {
  @apply flex justify-between;
}

.invoice-summary-label {
  @apply text-bgray-600 dark:text-bgray-300;
}

.invoice-summary-value {
  @apply font-semibold text-bgray-900 dark:text-white;
}

.invoice-summary-negative {
  @apply text-red-600 dark:text-red-400;
}

.invoice-summary-total {
  @apply text-lg font-bold text-bgray-900 dark:text-white;
}

.invoice-summary-final {
  @apply text-xl font-bold text-bgray-900 dark:text-white;
}

/* ============================================
   UTILIDADES
   ============================================ */

/* Animación de fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

/* Animación de slide up */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

/* Scroll suave */
.smooth-scroll {
  scroll-behavior: smooth;
}

/* Ocultar scrollbar pero mantener funcionalidad */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .modal-content {
    @apply m-4 mt-10;
  }
  
  .invoice-preview {
    @apply p-6;
  }
}

/* ============================================
   DARK MODE ESPECÍFICO
   ============================================ */

@media (prefers-color-scheme: dark) {
  .invoice-preview {
    @apply text-bgray-100;
  }
  
  .invoice-preview h1,
  .invoice-preview h2,
  .invoice-preview h3,
  .invoice-preview h4 {
    @apply text-white;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .no-print {
    display: none !important;
  }
  
  .invoice-preview {
    @apply shadow-none;
  }
  
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}