/* css/theme-modern.css */
:root {
    --color-background: #b6daeb; /* Fondo claro suave */
    --color-background-card: #a7d0da; /* Celeste suave */
    --color-text-primary: #10301a; /* Texto primario oscuro */
    --color-text-secondary: #1952c4; /* Texto secundario azul */
    --color-border: #30b9f0; /* Borde azul */
    --color-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.04); /* Sombra ligera */
    --color-shadow-hover: 0 10px 15px -3px rgba(62, 193, 233, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Sombra al pasar el ratón */
    --color-hover-background: #f9fbfb; /* Fondo al pasar el ratón */
}

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: 1.3rem; /* 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: 3.25rem; /* Espaciado entre elementos */
    border: 1px solid var(--color-border);
}

.panel-card:not(.btn-disabled):hover {
    transform: translateY(-5px); /* Levantar tarjeta al pasar el ratón */
    box-shadow: var(--color-shadow-hover); /* Sombra más pronunciada */
}

.panel-card .icon-wrapper {
    width: 3.5rem; height: 3.5rem; border-radius: 0.5rem; /* Bordes redondeados */
    display: flex; align-items: center; justify-content: center; /* Centrado del ícono */
    flex-shrink: 0;
}


.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 para el tema claro */
.card-facturacion .icon-wrapper { background-color: rgb(30, 65, 82); color: #b6bbe6; }
.card-comprobantes .icon-wrapper { background-color: rgb(13, 33, 65); color: #e6e2e2; }
.card-clientes .icon-wrapper { background-color: rgb(4, 61, 26); color: #4ade80; }
.card-productos .icon-wrapper { background-color: rgb(65, 49, 21); color: #facc15; }
.card-reportes .icon-wrapper { background-color: rgb(35, 1, 66); color: #b37ee7; }
.card-configuracion .icon-wrapper { background-color: rgb(5, 1, 49); color: #0c4bb8; }

.panel-card.card-logout .icon-wrapper {
    background-color: #000000; /* Fondo rojo muy oscuro */
    color: #f00404; /* Ícono rojo claro */
}


/* Menú Desplegable */
.dropdown-menu { background-color: var(--color-background-card); border: 1px solid var(--color-border); }
.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:1rem; }
.col { flex:1; 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: #4f46e5; color:white; }
.btn-accent:hover { background-color: #4338ca; }
.btn-success { background-color: #16a34a; color:white; }
.btn-success:hover { background-color: #15803d; }
.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; }