/* css/theme-modern.css - Tema Claro Pymefac */
:root {
  
  --color-background: #e9f0f7; /* Fondo general (Gris claro Pymefac) */
  --color-background-card: #def8f8;  /* Tarjetas / paneles */
  --color-text-primary: #0B3B5B;   /* Texto primario (Azul Marino Pymefac) */
  --color-text-secondary: #4A5568; /* Texto secundario (Gris Azulado Pymefac) */
  --color-border: #E2E8F0; /* Bordes (Gris claro) */ 

   /* Acentos */
  --color-accent: #0B3B5B; /* Azul Marino Pymefac */
  --color-accent-hover: #1e4b6e;
  --color-accent-soft: #F8FAFC; /* Fondo muy suave */

  /* Estados */
  --color-success: #16C7BE; /* Turquesa Pymefac (Éxito) */
  --color-success-soft: #E6FFFE;
  --color-error: #dc2626; /* Rojo estándar (Error) */
  --color-error-soft: #fef2f2;
  --color-info: #0B3B5B; /* Azul Marino para Info */
  --color-info-soft: #F8FAFC;

  /* Sombras */
  --color-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --color-shadow-hover: 0 8px 16px rgba(11, 59, 91, 0.15);
  /* Fondo al hover */
  --color-hover-background: #F1F5F9;
}

body { background-color: var(--color-background); }

/* =============================================== */
/* Estilos Globales y de Layout                    */
/* =============================================== */
.page-container { display: flex; flex-direction: column; min-height: 100vh; }
.main-content { flex: 1; }

/* =============================================== */
/* ESTILOS PARA PANEL.PHP                          */
/* =============================================== */
.panel-card {
    background-color: var(--color-background-card); /* Color de fondo de la tarjeta */
    border-radius: 0.75rem; /* Bordes ligeramente redondeados */
    box-shadow: var(--color-shadow); /* Sombra ligera */
    padding: 1rem; /* Espaciado interno */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Suave transición */
    display: flex;
    align-items: flex-start; /* Alineación al inicio */
    gap: 1.25rem; /* Espaciado entre elementos */
    border: 1px solid var(--color-border);
}

/* --- PARCHE VISUAL PARA ICONOS DEL PANEL --- */
.panel-card .icon-wrapper {
    width: 3rem; height: 3rem; /* Tamaño reducido */
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.panel-card .svg-icon { width: 1.5rem; height: 1.5rem; }

/* Colores Específicos (Contraste Mejorado) */
.card-facturacion .icon-wrapper { background-color: #fff7ed; color: #ea580c; }
.card-comprobantes .icon-wrapper { background-color: #ecfeff; color: #0891b2; } /* Cian Oscuro */
.card-clientes .icon-wrapper { background-color: #eff6ff; color: #2563eb; }
.card-productos .icon-wrapper { background-color: #fefce8; color: #ca8a04; }
.card-reportes .icon-wrapper { background-color: #faf5ff; color: #7c3aed; }
.card-configuracion .icon-wrapper { background-color: #f1f5f9; color: #475569; }
.card-suscripcion .icon-wrapper { background-color: #ecfdf5; color: #059669; }
.card-soporte .icon-wrapper { background-color: #e0e7ff; color: #4338ca; }
.panel-card.card-logout .icon-wrapper { background-color: #fef2f2; color: #dc2626; }

/* Estados deshabilitados */
.btn-disabled { opacity: 0.6; pointer-events: none; filter: grayscale(100%); }
.card-danger { border: 2px solid #fca5a5 !important; background-color: #fef2f2; }

.panel-card .icon-wrapper {
    width: 3rem; height: 3.5rem; border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    /* Colores por defecto si no se sobrescriben */
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}

.panel-card .card-title { font-size: 1.125rem; font-weight: 600; color: var(--color-text-primary); }
.panel-card .card-description { font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 0.25rem; line-height: 1.5; }

/* Colores Específicos del Tema Claro (Pymefac) */
/* Facturación: Coral Pymefac */
.card-facturacion .icon-wrapper { background-color: #FFF2EB; color: #FF8A5B; }
/* Comprobantes: Turquesa Pymefac */
.card-comprobantes .icon-wrapper { background-color: #E6FFFE; color: #16C7BE; }
/* Clientes: Azul Marino Pymefac */
.card-clientes .icon-wrapper { background-color: #EBF2F7; color: #0B3B5B; }
/* Productos: Amarillo/Dorado */
.card-productos .icon-wrapper { background-color: #fefce8; color: #ca8a04; }
/* Reportes: Morado */
.card-reportes .icon-wrapper { background-color: #faf5ff; color: #9333ea; }
/* Configuración: Gris Neutro */
.card-configuracion .icon-wrapper { background-color: #f3f4f6; color: #4b5563; }
/* Suscripción: Cian/Azul Claro */
.card-suscripcion .icon-wrapper { background-color: #ecfeff; color: #0891b2; }

.panel-card.card-logout .icon-wrapper {
    background-color: #fef2f2;
    color: #dc2626;
}

/* Menú Desplegable */
.dropdown-menu { background-color: var(--color-background-card); border: 1px solid var(--color-border); box-shadow: var(--color-shadow-hover); }
.dropdown-menu a { color: var(--color-text-primary); }
.dropdown-menu a:hover { background-color: var(--color-hover-background); }

/* =============================================== */
/* ESTILOS ESPECÍFICOS PARA FACTURADOR.PHP         */
/* =============================================== */
.app-facturador {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1rem;
    align-items:start;
}
.app-facturador .card {
    background:var(--color-background-card);
    border:1px solid var(--color-border);
    border-radius: 0.75rem;
    padding:1rem;
    box-shadow: var(--color-shadow);
}
.top-full { grid-column: 1 / -1; }
.main-facturador { display:flex; flex-direction:column; gap:1rem; }
.invoice-sidebar { display: flex; flex-direction: column; gap: 1rem; position:sticky; top:100px; }

.row { display:flex; gap:0.8rem; }
.col { flex:0.8; min-width:0; }
.app-facturador label { display:block; font-size:12px; color:var(--color-text-secondary); margin-bottom:6px; }
.app-facturador input[type="text"], 
.app-facturador input[type="email"], 
.app-facturador input[type="number"], 
.app-facturador select {
    width:100%; padding:8px 10px; border-radius:6px; border:1px solid var(--color-border);
    font-size:14px; box-sizing:border-box; background-color: #F9FAFB; color: var(--color-text-primary);
}
.app-facturador input::placeholder { color: #9ca3af; }
.app-facturador input:read-only { background-color: #f3f4f6; }
.form-inline { display:flex; gap:8px; align-items:end; }
.form-group { flex: 1; min-width: 0; }
.btn {
    display:inline-block; padding:8px 12px; border-radius:8px;
    border:1px solid transparent; cursor:pointer; font-weight:600; transition: background-color 0.2s;
}
.btn-accent { background-color: var(--color-accent); color:white; }
.btn-accent:hover { background-color: var(--color-accent-hover); }
.btn-success { background-color: var(--color-success); color:white; }
.btn-success:hover { background-color: #12A39C; }
.summary { display:flex; flex-direction:column; gap:8px; padding:10px; }
.summary .line { display:flex; justify-content:space-between; font-size:14px; color: var(--color-text-secondary); }
.summary .total { font-weight:800; font-size:16px; color: var(--color-text-primary); }
.app-facturador table { width:100%; border-collapse:collapse; font-size:14px; }
.app-facturador th, .app-facturador td { padding:10px 8px; border-bottom:1px solid var(--color-border); text-align:left; }
.app-facturador th { color:var(--color-text-secondary); font-size:12px; text-transform: uppercase; }
.text-right { text-align:right; }
.section-title { margin:0 0 8px 0; font-size:1rem; font-weight:600; color: var(--color-text-primary); }
.table-wrapper { overflow-x: auto; }
.summary-hr { border: none; border-top: 1px solid var(--color-border); margin: 6px 0; }
.remove-item { color: #ef4444 !important; }
.remove-item:hover { color: #dc2626 !important; text-decoration: underline; }

/* Modales */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 50; opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.modal-overlay.visible { opacity: 1; visibility: visible; }
.modal-container {
    background-color: var(--color-background-card);
    border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    width: 90%; max-width: 800px;
    height: 90%; display: flex; flex-direction: column;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem; border-bottom: 1px solid var(--color-border);
}
.modal-header h3 { font-size: 1.25rem; font-weight: 600; color: var(--color-text-primary); }
.modal-header button { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--color-text-secondary); }
.modal-body { flex: 1; }
.modal-body iframe { width: 100%; height: 100%; border: none; }

/* CORRECCIÓN DE ACCESIBILIDAD PARA CAMPOS BLOQUEADOS */
/* Esto fuerza que el texto sea legible aunque el campo sea readonly */

input:disabled, 
input[readonly], 
textarea:disabled {
    /* Fondo ligeramente diferente para indicar que está bloqueado, pero legible */
    background-color: var(--color-hover-background) !important;
    
    /* El color del texto DEBE ser el primario (oscuro en tema claro, claro en tema oscuro) */
    color: var(--color-text-primary) !important;
    
    /* Propiedad especial para navegadores Webkit (Chrome/Safari) que intentan cambiar el color */
    -webkit-text-fill-color: var(--color-text-primary) !important;
    
    /* Borde sutil para mantener la estructura */
    border: 1px solid var(--color-border);
    
    /* Opacidad al 100% para que no se vea transparente */
    opacity: 1 !important;
    
    /* Cursor de prohibido para indicar que no se puede editar */
    cursor: not-allowed;
}
/* =============================================== */
/* CORRECCIÓN: WIDGET DE NOTICIAS (MODO OSCURO)    */
/* =============================================== */

.news-card {
    /* Fondo oscuro para que contraste con el título blanco */
    background-color: var(--color-background-card) !important; 
    border: 1px solid var(--color-border);
}

.news-title {
    /* Forzar título en blanco */
    color: var(--color-text-primary) !important; 
}

.news-content {
    /* Forzar texto del cuerpo en gris claro (legible) */
    color: #044391 !important; 
}

.news-date {
    color: #09121f !important;
}