@import url(../fonts/GothamBook.css);
@import url(../fonts/GothamBold.css);

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #ededed;
    font-family: 'GothamBook', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* ================= TIPOGRAFÍA GLOBAL ================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'GothamBold', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
}

h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

p {
    font-family: 'GothamBook', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.02em;
    font-size: 14px;
    line-height: 20px;
}

a {
    text-decoration: none;
    font-family: 'GothamBook', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.02em;
}

span {
    font-family: 'GothamBook', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.02em;
    font-size: 14px;
    line-height: 20px;
}

/* =========================================
   PALETA / TOKENS
   ========================================= */
:root {
    --brand-blue: #1d4ed8;
    --brand-blue-soft: #e0ebff;
    --brand-teal: #0ea5e9;
    --brand-gold: #f59e0b;

    --bg-main: #f3f4f6;
    --bg-card: #ffffff;
    --border-soft: #e5e7eb;
    --text-main: #111827;
    --text-muted: #6b7280;
}

/* FONDO GENERAL (combina con tus cards de colores) */
body {
    background: radial-gradient(circle at top left, #eef2ff 0, #f9fafb 40%, #e5e7eb 100%);
    overflow-x: hidden;
}

/* === FORMULARIO DE REGISTRO (ESTILO TARJETA) === */

.form_register {
    max-width: 600px;
    margin: 40px auto;
    padding: 32px 36px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.4);
    position: relative;
    overflow: hidden;
}

/* Línea superior SOLO en tonos azules */
.form_register::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1d4ed8, #2563eb, #0ea5e9, #38bdf8);
}

/* Título del formulario (usa el <h1> que ya tienes) */
.form_register h1 {
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: 24px;
    font-weight: 600;
    color: #0f172a;
    font-family: 'GothamBold', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Icono del título (sin círculo raro) */
.form_register h1 i {
    font-size: 20px;
    color: #2563eb;
}

/* Subtítulo opcional (si lo usas en el HTML) */
.form_register .subtitle {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
    font-family: 'GothamBook', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Separador */
.form_register hr {
    border: 0;
    height: 1px;
    background: rgba(148, 163, 184, 0.5);
    margin: 12px 0 24px 0;
}

/* Solo el form dentro del contenedor */
.form_register form {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

/* Etiquetas */
.form_register label {
    display: block;
    font-size: 13px;
    font-family: 'GothamBook', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 500;
    color: #4b5563;
    margin: 8px 0 6px 0;
}

/* Inputs y selects */
.form_register input,
.form_register select {
    display: block;
    width: 100%;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    outline: none;
    transition: all 0.18s ease;
}

/* Placeholder un poco más tenue */
.form_register input::placeholder,
.form_register select::placeholder {
    color: #94a3b8;
}

/* Hover */
.form_register input:hover,
.form_register select:hover {
    border-color: #94a3b8;
}

/* Focus */
.form_register input:focus,
.form_register select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
    background: #ffffff;
}

/* Ocultar primer option cuando uses .notItemOne */
.notItemOne option:first-child {
    display: none;
}

/* Botón guardar */
.btn_save {
    font-size: 14px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    padding: 11px 20px;
    color: #FFF;
    letter-spacing: 0.5px;
    border: 0;
    cursor: pointer;
    margin: 28px auto 10px auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 500;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

/* Icono dentro del botón (para que no se pegue al texto) */
.btn_save i {
    margin-right: 8px;
    font-size: 14px;
}

/* Hover del botón */
.btn_save:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.45);
}

/* Click */
.btn_save:active {
    transform: translateY(0);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.30);
}

/* Mensajes de alerta */
.alert {
    width: 100%;
    background: #e5f0ff;
    border-radius: 10px;
    margin: 18px auto 0 auto;
    border: 1px solid #bfdbfe;
}

.msg_error {
    color: #dc2626;
}

.msg_save {
    color: #15803d;
}

.alert p {
    padding: 10px 12px;
    font-size: 13px;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .form_register {
        margin: 20px;
        padding: 24px 20px;
        border-radius: 20px;
    }
}


/*=============== LISTA USUARIO Y OTRAS LISTAS =============*/

/* TÍTULO GENERAL DE LAS LISTAS
   Usa en HTML: <h1 class="title_list"><i class="..."></i> Lista de X</h1> */
#container h1.title_list {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    font-family: 'GothamBold', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 4px 0 14px 0 !important;
}

/* Icono del título: SIN círculo, solo el iconito */
#container h1.title_list i {
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    color: #0f172a !important;
}

/* Botón "Nuevo" (si lo usas) */
.btn_new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #FFF;
    padding: 7px 18px;
    border-radius: 999px;
    margin: 14px 0 10px 0;
    font-size: 13px;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.30);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn_new:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.40);
}

/* Botón pequeño de volver */
.btn_back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #22c55e;
    color: #FFF;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    text-decoration: none;
}

/* ==== TABLA ==== */

table {
    border-collapse: collapse;
    font-size: 13px;
    font-family: 'GothamBook', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    width: 100%;
}

/* Encabezado */
table th {
    text-align: left;
    padding: 10px 12px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #FFF;
}

/* Primera columna centrada */
table th:first-child,
table td:first-child {
    text-align: center;
    width: 70px;
}

/* Filas */
table tr:nth-child(even) {
    background: #f8fafc;
}

table tr:nth-child(odd) {
    background: #ffffff;
}

table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

/* Hover en filas */
table tbody tr:hover {
    background: #e5f0ff;
}

/* ==== LINKS DE ACCIÓN ==== */
.link_add,
.link_edit,
.link_delete {
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    gap: 4px;
}

.link_add {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.link_edit {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.link_delete {
    background: rgba(248, 113, 113, 0.15);
    color: #b91c1c;
}

.link_add:hover {
    background: rgba(34, 197, 94, 0.18);
}

.link_edit:hover {
    background: rgba(59, 130, 246, 0.18);
}

.link_delete:hover {
    background: rgba(248, 113, 113, 0.22);
}

/* ==== CUADRO CONFIRMACIÓN ELIMINAR ==== */
.data_delete {
    text-align: center;
    margin-top: 40px;
}

.data_delete h2 {
    font-size: 14px;
}

.data_delete span {
    font-weight: bold;
    color: #2563eb;
    font-size: 14px;
}

.btn_cancel,
.btn_ok {
    width: 140px;
    display: inline-block;
    padding: 7px 0;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    margin: 10px;
    font-size: 13px;
    color: #FFF;
}

.btn_ok {
    background: #2563eb;
}

.btn_cancel {
    background: #e11d48;
}

.data_delete form {
    background: initial;
    margin: auto;
    padding: 20px 50px;
    border: 0;
}





/*============ Paginador =============*/
.paginador ul {
	padding: 15px;
	list-style: none;
	background: #FFF;
	margin-top: 15px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: flex-end;
}

.paginador a,
.pageSelected {
	color: #428bca;
	border: 1px solid #ddd;
	padding: 5px;
	display: inline-block;
	font-size: 14px;
	text-align: center;
	width: 35px;
}

.paginador a:hover {
	background: #ddd;
}

.pageSelected {
	color: #FFF;
	background: #428bca;
	border: 1px solid #428bca;
}

/*============ Buscador ============*/
.form_search {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	float: right;
	background: initial;
	padding: 10px;
	border-radius: 10px;
}

.form_search .btn_search {
	background: #1faac8;
	color: #FFF;
	padding: 10px;
	border: 0;
	cursor: pointer;
	margin-left: 10px;
	display: flex;
	border-radius: 5px;
}

/*============ Foto ============*/
.prevPhoto {
	display: flex;
	justify-content: space-between;
	width: 160px;
	height: 150px;
	border: 1px solid #CCC;
	position: relative;
	cursor: pointer;
	background: url(../images/uploads/user.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	margin: auto;
}

.prevPhoto label {
	cursor: pointer;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.prevPhoto img {
	width: 100%;
	height: 100%;
}

.upimg,
.notBlock {
	display: none !important;
}

.errorArchivo {
	font-size: 16px;
	font-family: inherit;
	color: #cc0000;
	text-align: center;
	font-weight: bold;
	margin-top: 10px;
}

.delPhoto {
	color: #FFF;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	background: red;
	position: absolute;
	right: -10px;
	top: -10px;
	z-index: 10;
}

#tbl_list_productos img {
	width: 50px;
}

.imgProductoDelete {
	width: 175px;
}

.modal {
	position: fixed;
	width: 100%;
	height: 100vh;
	background: rgb(0, 0, 0, 0.81);
	display: none;
}

.bodyModal {
	width: 100%;
	height: 100%;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	display: -ms-inline-flex;
	display: -o-inline-flex;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.modal h1 {
	color: #26608fcc;
	text-transform: uppercase;
}

.modal h2 {
	text-transform: uppercase;
	margin-top: 10px;
}

.modal h4 {
	margin-top: 6px;
}

#form_add_product,
#form_del_product,
#form_anular_factura {
	width: 420px;
	text-align: center;
}

/*============ Ventas ============*/
.datos_cliente,
.datos_venta,
.title_page {
	width: 100%;
	max-width: 900px;
	margin: auto;
	margin-bottom: 20px;
}

#detalle_venta tr {
	background-color: #FFF !important;
}

#detalle_venta td {
	border-bottom: 1px solid #CCC;
}

.datos {
	background-color: #e3ecef;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border: 2px solid #78909C;
	padding: 10px;
	border-radius: 10px;
	margin-top: 10px;
}

.action_cliente {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
}

.datos label {
	margin: 5px auto;
}

.wd20 {
	width: 20%;
}

.wd25 {
	width: 25%;
}

.wd30 {
	width: 30%;
}

.wd40 {
	width: 40%;
}

.wd60 {
	width: 60%;
}

.wd100 {
	width: 100%;
}

#div_registro_cliente,
#add_product_venta {
	display: none;
}

.displayN {
	display: none;
}

.tbl_venta {
	max-width: 900px;
	margin: auto;
}

.tbl_venta tfoot td {
	font-weight: bold;
}

.textright {
	text-align: right;
}

.textcenter {
	text-align: center;
}

.textleft {
	text-align: left;
}

.btn_anular {
	background-color: #15aa3a;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	padding: 10px;
	margin: 0 3px;
	color: #FFF;
}

.form_search_date {
	padding: 10px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-radius: 10px;
	margin: 10px auto;
	margin-right: 80%;
	width: 30%;
}

.form_search_date label {
	margin: 0 10px;
}

.form_search_date input {
	width: auto;
}

.form_search_date .btn_view {
	padding: 8px;
}

.btn_view {
	background-color: #1faac8;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	padding: 10px;
	margin: 0 3px;
	color: #FFF;
}

.div_acciones {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: right;
}

.totalfactura {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-around;
}

.pagada,
.anulada {
	color: #FFF;
	background-color: #60a756;
	text-align: center;
	border-radius: 5px;
	padding: 4px 15px;
}

.anulada {
	background-color: #f36a6a;
}

.inactive {
	background-color: #A4A4A4;
	color: #CCC;
	cursor: default;
}





/* ================================
   CONTENEDOR PRINCIPAL (Inicio)
   ================================ */
#container {
    margin-left: 76px;               /* ancho del nav lateral compacto */
    margin-top: 70px;                /* altura del header */
    padding: 24px 32px 40px;
    min-height: calc(100vh - 70px);
    box-sizing: border-box;
    position: relative;

    /* Fondo con un poco más de vida */
    background:
        radial-gradient(circle at 0 0, rgba(59,130,246,0.10), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(245,158,11,0.10), transparent 55%),
        linear-gradient(135deg, #f8fafc, #e5edf6);
    transition: margin-left 0.22s ease, padding 0.22s ease;
}

/* Contenedor interno del panel */
.divContainer {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1; /* por encima del fondo y la marca de agua */
}

/* Marca de agua con el logo (más visible y mejor colocada) */
.divContainer::after {
    content: "";
    position: absolute;
    right: -10px;    /* mueve en X */
    bottom: -20px;   /* mueve en Y */
    width: 220px;
    height: 220px;
    background-image: url("../img/2.png"); /* aquí tu logo */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.06;
    pointer-events: none;
    filter: drop-shadow(0 10px 24px rgba(15,23,42,0.25));
}
/* ================================
   GRID RESUMEN (PANEL SUPERIOR)
   ================================ */

.overview-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.5fr);
    grid-auto-rows: minmax(140px, auto);
    gap: 18px;
}

/* Tarjeta base */
.ov-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
    padding: 16px 18px;
    overflow: hidden;
}

.ov-card--profile {
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 16px;

    /* Color base oscuro por si la imagen tarda */
    background-color: #020617;

    /* 👇 AQUÍ la ruta correcta: dos puntos arriba */
    background-image: url("../../img/r2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: #f9fafb;
}


.ov-card--profile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.80),
        rgba(15, 23, 42, 0.55)
    );
    pointer-events: none;
}


/* encabezado de perfil */
.ov-profile-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ov-avatar {
    width: 64px;
    height: 64px;
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.8);
}

.ov-avatar img {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    object-fit: cover;
}

.ov-profile-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ov-name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.ov-role {
    margin: 0;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    opacity: 0.95;
}

/* pastilla de usuario */
.ov-pill {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    font-size: 11px;
}

/* Meta inferior dentro de la tarjeta de perfil */
.ov-profile-meta {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ov-meta-item {
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.40);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.ov-meta-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.7;
}

.ov-meta-value {
    font-size: 13px;
    font-weight: 500;
    word-break: break-word;
}

/* Tarjeta base: todos los ov-card usan esta fuente */
.ov-card {
    position: relative;
    border-radius: 20px;
    padding: 14px 16px 16px;
    overflow: hidden;
    font-family: 'GothamBook', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* PERFIL (solo tipografía y bordes, el fondo ya lo tienes con la imagen) */
.ov-card--profile {
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #f9fafb;

    /* estos dos ya los tenías, los dejo aquí para que sigan aplicando */
    background-color: #020617;
    background-image: url("../../img/r2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.32);
    border: 1px solid rgba(15, 23, 42, 0.5);
}

/* overlay oscuro encima de la imagen para que el texto se lea bien */
.ov-card--profile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.80),
        rgba(15, 23, 42, 0.55)
    );
    pointer-events: none;
}

/* aseguramos que el contenido esté encima del overlay */
.ov-card--profile > * {
    position: relative;
    z-index: 1;
}

/* ============ TARJETAS PEQUEÑAS ============ */

/* base para info, usuario y empresa */
.ov-card--info,
.ov-card--user,
.ov-card--company {
    background: radial-gradient(circle at top left, rgba(148,163,184,0.12), #f9fafb);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

/* pequeño borde de color en la parte superior */
.ov-card--info::before,
.ov-card--user::before,
.ov-card--company::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 10px;
    height: 3px;
    border-radius: 999px;
    opacity: 0.7;
}

/* colores por tarjeta */
.ov-card--info::before {
    background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
}

.ov-card--user::before {
    background: linear-gradient(90deg, #6366f1, #a855f7);
}

.ov-card--company::before {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

/* cabecera de las tarjetas pequeñas */
.ov-card-header {
    margin-top: 8px; /* para que no choque con la barra de arriba */
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* ícono dentro de una “pastilla” redonda */
.ov-card-header i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    font-size: 14px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}

/* listas de datos */
.ov-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ov-card-list li span {
    font-weight: 600;
    color: #111827;
}

/* grid de datos de empresa */
.ov-card--company {
    grid-column: 1 / span 2;  /* sigue ocupando todo el ancho bajo el perfil */
}

.ov-company-grid {
    margin-top: 4px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    font-size: 13px;
    color: #4b5563;
}

.ov-company-grid p {
    margin: 0;
}

.ov-company-grid span {
    font-weight: 600;
    color: #111827;
}

/* responsive */
@media screen and (max-width: 992px) {
    .ov-card--company {
        grid-column: 1 / span 2;
    }

    .ov-company-grid {
        grid-template-columns: 1fr;
    }
}

body.nav-open::before {
    content: "";
    position: fixed;
    inset: 70px 0 0 0;
    background: rgba(15, 23, 42, 0.38);
    z-index: 880;
}

.containerTable {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.containerTable table {
    min-width: 720px;
}

@media screen and (max-width: 1024px) {
    header {
        padding-left: 68px;
        padding-right: 18px;
    }

    .header {
        gap: 12px;
    }

    .header-brand-text .brand-main {
        gap: 8px;
        padding: 4px 10px;
    }

    .brand-main-primary,
    .brand-main-secondary {
        font-size: 11px;
        letter-spacing: 0.12em;
    }

    .header-brand-text .brand-sub {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    #sidebar {
        transform: translateX(-100%);
        width: min(320px, 88vw);
        top: 70px;
        left: 0;
        height: calc(100vh - 70px);
        border-right: none;
        border-radius: 0 18px 18px 0;
        box-shadow: 8px 0 28px rgba(15, 23, 42, 0.22);
        transition: transform 0.28s ease-in-out;
    }

    #sidebar.active {
        transform: translateX(0);
    }

    #menu-toggle {
        display: block;
        position: fixed;
        top: 14px;
        left: 14px;
        background: #ffffff;
        border-radius: 999px;
        border: 1px solid #dbe3ef;
        font-size: 20px;
        cursor: pointer;
        padding: 8px 12px;
        z-index: 1000;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
    }

    #container {
        margin-left: 0;
        padding: 20px 18px 30px;
    }

    .divContainer {
        gap: 18px;
    }

    .divContainer::after {
        width: 180px;
        height: 180px;
        right: 0;
        bottom: 0;
    }

    .panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .panel-actions a {
        flex: 1 1 220px;
        justify-content: center;
    }

    .overview-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }

    .ov-card--profile,
    .ov-card--company {
        grid-row: auto;
        grid-column: auto;
    }

    .ov-company-grid {
        grid-template-columns: 1fr;
    }

    .form_register {
        max-width: 100%;
        margin: 24px auto;
        padding: 24px 20px;
    }

    .form_search,
    .form_search_date {
        float: none;
        width: 100%;
        margin: 10px 0;
    }

    .form_search_date {
        margin-right: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
    }

    .form_search_date input {
        flex: 1 1 180px;
        min-width: 0;
        width: auto;
    }
}

@media screen and (max-width: 640px) {
    header {
        padding-right: 12px;
    }

    .header-left {
        gap: 8px;
    }

    .header-logos .logo-mit,
    .header-logos .logo-graditi {
        width: 34px;
        height: 34px;
    }

    .header-brand-text .brand-main {
        gap: 6px;
        padding: 3px 8px;
    }

    .brand-main-primary,
    .brand-main-secondary {
        font-size: 10px;
        letter-spacing: 0.09em;
    }

    .header-brand-text .brand-sub {
        display: none;
    }

    #container {
        padding: 16px 12px 24px;
    }

    .form_search {
        flex-wrap: wrap;
        padding: 0;
        gap: 8px;
    }

    .form_search input,
    .form_search .btn_search,
    .form_search_date input,
    .form_search_date .btn_view {
        width: 100%;
        margin-left: 0;
    }

    .titlePanelControl,
    #container h1.title_list {
        font-size: 18px !important;
    }

    .containerTable table {
        min-width: 640px;
    }
}

@media screen and (max-width: 768px) {
    .ov-card--company {
        grid-column: auto;
    }
}


/* ================================
   ENCABEZADO DEL PANEL
   ================================ */

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

.panel-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.titlePanelControl {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    text-align: left;
}

.panel-subtitle {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

/* Botones de la derecha */
.panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botón principal */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: none;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #f9fafb;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-primary i { font-size: 14px; }

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.4);
    filter: brightness(1.03);
}

/* Botón secundario */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    background: #ffffff;
    color: #4b5563;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-secondary i {
    font-size: 14px;
    color: #1d4ed8;
}

.btn-secondary:hover {
    background: #f9fafb;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

/* ================================
   TARJETA DE PERFIL / PANEL CENTRAL
   (solo pequeños ajustes de layout)
   ================================ */

.perfilContainer {
    max-width: 900px;
    margin: 0 auto;
}
/* ================================
   PANEL DE PERFIL (tarjeta azul + 3 columnas)
   ================================ */

.perfilContainer {
    max-width: 1000px;
    margin: 0 auto;
}

/* Tarjeta general */
.perfilCard {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

/* Encabezado azul */
.perfilCard-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #f9fafb;
}

/* Avatar redondo */
.perfilAvatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.35);
}

.perfilAvatar img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
}

/* Texto del encabezado */
.perfilHeaderInfo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.perfilName {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.perfilRole {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
}

/* Cuerpo de la tarjeta */
.perfilCard-body {
    padding: 18px 20px 20px;
    background: #f9fafb;
}

/* Grid con 3 bloques */
.perfilGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* Cada bloque */
.perfilBlock {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    padding: 12px 14px 14px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

/* Borde superior de color como acento */
.perfilBlock::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 8px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
    opacity: 0.35;
}

/* Header del bloque */
.perfilBlock-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.perfilBlock-header i {
    font-size: 14px;
    color: #1d4ed8;
}

/* Lista de datos */
.perfilBlock-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.perfilBlock-list li span {
    font-weight: 600;
    color: #111827;
}

/* Responsive: 2 columnas y luego 1 */
@media screen and (max-width: 960px) {
    .perfilGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 640px) {
    .perfilGrid {
        grid-template-columns: 1fr;
    }
}


/* ===== TARJETAS DEL DASHBOARD (CUADRADAS) ===== */

/* ===== TARJETAS DEL DASHBOARD (AUTO-DISTRIBUCIÓN) ===== */
.dashboard {
    margin-top: 0;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    display: grid;
    /* Se acomodan solitas según el ancho disponible */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
}


/* Tarjeta base */
.dash-card {
    position: relative;
    display: flex;
    flex-direction: column;              /* icono arriba, texto abajo */
    align-items: flex-start;
    justify-content: space-between;
    min-height: 170px;                  /* más “cuadradas” */
    padding: 16px 16px 18px;
    border-radius: 18px;
    text-decoration: none;
    color: #f9fafb;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* brillo */
.dash-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255,255,255,0.22), transparent 60%);
    opacity: 0.7;
    pointer-events: none;
}

.dash-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.28);
}

/* Ícono en círculo arriba */
.dash-card-icon {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.dash-card-icon i {
    font-size: 20px;
    color: #fefefe;
}

/* texto */
.dash-card-info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dash-card-label {
    font-size: 14px;
    font-weight: 600;
}

.dash-card-number {
    font-size: 24px;
    font-weight: 700;
}

/* Colores de cada tarjeta */
.dash-card--usuarios {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.dash-card--clientes {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.dash-card--proveedores {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.dash-card--cabinas {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
}

.dash-card--cotizaciones {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

/* Tablet: 2 ó 3 columnas según espacio, sin cambiar nada más */
@media screen and (max-width: 992px) {
    .dashboard {
        max-width: 100%;
    }
}

/* Móvil: siempre 2 columnas */
@media screen and (max-width: 600px) {
    .dashboard {
        max-width: 100%;
        padding: 0 4px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .dash-card {
        min-height: 120px;
        padding: 10px 10px 12px;
        border-radius: 16px;
    }

    .dash-card-icon {
        width: 34px;
        height: 34px;
        margin-bottom: 6px;
    }

    .dash-card-icon i {
        font-size: 18px;
    }

    .dash-card-label {
        font-size: 11px;
    }

    .dash-card-number {
        font-size: 18px;
    }
}

/* Muy pequeño (<= 380px): 1 columna, centradas */
@media screen and (max-width: 380px) {
    .dashboard {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ================================
   AJUSTE VISUAL PANEL DE CONTROL
   ================================ */

.panel-header {
    align-items: center;
    gap: 22px;
    padding: 22px 24px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(250, 201, 10, 0.16), transparent 38%),
        linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.94));
    border: 1px solid rgba(250, 201, 10, 0.16);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
}

.panel-title-block {
    gap: 10px;
}

.panel-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(250, 201, 10, 0.12);
    border: 1px solid rgba(250, 201, 10, 0.28);
    color: #f8d24b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.titlePanelControl {
    font-size: 34px;
    font-weight: 800;
    color: #f9fafb;
    letter-spacing: -0.03em;
}

.panel-subtitle {
    display: none;
}

.panel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.panel-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #d1d5db;
    font-size: 12px;
    font-weight: 600;
}

.panel-chip i {
    color: #fac90a;
    font-size: 12px;
}

.panel-actions {
    gap: 12px;
}

.btn-primary,
.btn-secondary {
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    font-weight: 700;
}

.btn-primary {
    border: 1px solid rgba(250, 201, 10, 0.45);
    background: linear-gradient(135deg, #fac90a, #e6b400);
    color: #111827;
    box-shadow: 0 14px 28px rgba(230, 180, 0, 0.22);
}

.btn-primary:hover {
    box-shadow: 0 18px 32px rgba(230, 180, 0, 0.3);
}

.btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #f9fafb;
    box-shadow: none;
}

.btn-secondary i {
    color: #fac90a;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.overview-grid {
    margin-top: 20px;
    gap: 18px;
}

.ov-card {
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.ov-card--profile {
    background:
        linear-gradient(180deg, rgba(17, 24, 39, 0.86), rgba(17, 24, 39, 0.78)),
        url("../img/portada-login.jpg") center/cover no-repeat;
}

.ov-card--profile::before {
    background: linear-gradient(90deg, rgba(250, 201, 10, 0.85), rgba(255, 255, 255, 0.2));
    opacity: 1;
}

.ov-pill {
    background: rgba(250, 201, 10, 0.18);
    color: #f9fafb;
    border: 1px solid rgba(250, 201, 10, 0.3);
}

.ov-card--info,
.ov-card--user,
.ov-card--company {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.ov-card-header {
    font-size: 15px;
    font-weight: 700;
}

.ov-card-header i {
    color: #b88900;
}

.ov-card-list li,
.ov-company-grid p {
    line-height: 1.6;
}

.dashboard {
    margin-top: 18px;
    gap: 16px;
}

.dash-card {
    min-height: 160px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
}

.dash-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 55%);
    pointer-events: none;
}

.dash-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dash-card-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.88;
}

.dash-card-number {
    font-size: 32px;
    line-height: 1;
}

@media screen and (max-width: 1024px) {
    .panel-header {
        padding: 18px;
    }

    .titlePanelControl {
        font-size: 28px;
    }
}

@media screen and (max-width: 640px) {
    .panel-header {
        border-radius: 20px;
    }

    .panel-meta {
        gap: 8px;
    }

    .panel-chip {
        width: 100%;
        justify-content: flex-start;
    }

    .titlePanelControl {
        font-size: 24px !important;
    }
}

/* ================================
   REDISENO INTEGRAL PANEL CONTROL
   ================================ */

#container {
    background:
        radial-gradient(circle at top right, rgba(250, 201, 10, 0.08), transparent 22%),
        linear-gradient(180deg, #f4f1e8 0%, #ece7dc 100%);
}

.divContainer {
    max-width: 1240px;
    margin: 0 auto;
    gap: 22px;
}

.panel-header {
    padding: 22px 24px;
    border-radius: 26px;
    border: 1px solid rgba(180, 145, 26, 0.18);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.92), rgba(247,242,231,0.98)),
        radial-gradient(circle at top left, rgba(250, 201, 10, 0.12), transparent 40%);
    box-shadow: 0 18px 42px rgba(36, 31, 20, 0.10);
}

.panel-title-block {
    gap: 6px;
}

.titlePanelControl {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #1f2937;
}

.panel-actions {
    gap: 12px;
}

.btn-primary,
.btn-secondary {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.btn-primary {
    border: 1px solid #e0b100;
    background: linear-gradient(135deg, #fac90a, #e8b406);
    color: #1f2937;
    box-shadow: 0 12px 24px rgba(180, 145, 26, 0.24);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(180, 145, 26, 0.30);
}

.btn-secondary {
    border: 1px solid #ddd3bf;
    background: #fffdf8;
    color: #3b3529;
    box-shadow: 0 8px 18px rgba(36, 31, 20, 0.08);
}

.btn-secondary i {
    color: #b68b00;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    background: #fffaf0;
    box-shadow: 0 12px 22px rgba(36, 31, 20, 0.10);
}

.overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
    gap: 18px;
    align-items: stretch;
}

.ov-card {
    border-radius: 24px;
    border: 1px solid rgba(103, 86, 38, 0.12);
    background: linear-gradient(180deg, #fffdf8 0%, #f7f2e7 100%);
    box-shadow: 0 14px 28px rgba(36, 31, 20, 0.08);
}

.ov-card--profile {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 100%;
    background:
        linear-gradient(135deg, rgba(25, 25, 25, 0.92), rgba(54, 47, 33, 0.86)),
        url("../img/portada-login.jpg") center/cover no-repeat;
    color: #f8f5ef;
    overflow: hidden;
}

.ov-card--profile::before {
    left: 18px;
    right: 18px;
    top: 14px;
    height: 4px;
    background: linear-gradient(90deg, #fac90a, rgba(255,255,255,0.2));
    opacity: 1;
}

.ov-profile-header {
    gap: 18px;
}

.ov-avatar {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.ov-avatar img {
    width: 64px;
    height: 64px;
}

.ov-name {
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.03em;
}

.ov-role {
    color: rgba(248, 245, 239, 0.86);
}

.ov-pill {
    background: rgba(250, 201, 10, 0.16);
    border: 1px solid rgba(250, 201, 10, 0.26);
    color: #fff6d6;
}

.ov-profile-meta {
    margin-top: 18px;
    gap: 12px;
}

.ov-meta-item {
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    padding: 14px 16px;
}

.ov-meta-label {
    color: rgba(248, 245, 239, 0.66);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}

.ov-meta-value {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.ov-card--info,
.ov-card--user,
.ov-card--company {
    position: relative;
    overflow: hidden;
}

.ov-card--info::before,
.ov-card--user::before,
.ov-card--company::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 14px;
    height: 4px;
    border-radius: 999px;
}

.ov-card--info::before {
    background: linear-gradient(90deg, #fac90a, #d5ab1a);
}

.ov-card--user::before {
    background: linear-gradient(90deg, #b48a00, #e6c659);
}

.ov-card--company::before {
    background: linear-gradient(90deg, #242424, #4b4b4b, #fac90a);
}

.ov-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #241f14;
    font-size: 15px;
    font-weight: 700;
}

.ov-card-header i {
    color: #b68b00;
}

.ov-card-list {
    gap: 10px;
    font-size: 14px;
    color: #4d4638;
}

.ov-card-list li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(103, 86, 38, 0.08);
}

.ov-card-list li:last-child {
    border-bottom: 0;
}

.ov-card-list li span,
.ov-company-grid span {
    color: #201c14;
    font-weight: 700;
}

.ov-card--company {
    grid-column: 1 / -1;
}

.ov-company-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
    color: #4d4638;
}

.ov-company-grid p {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid rgba(103, 86, 38, 0.08);
}

.dashboard {
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
}

.dash-card {
    --card-accent: #fac90a;
    min-height: 168px;
    padding: 20px 18px;
    border-radius: 22px;
    border: 1px solid rgba(103, 86, 38, 0.12);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,242,231,0.98));
    color: #241f14;
    box-shadow: 0 14px 28px rgba(36, 31, 20, 0.08);
}

.dash-card::after {
    inset: auto 0 0 0;
    height: 5px;
    background: linear-gradient(90deg, var(--card-accent), rgba(255,255,255,0));
    opacity: 1;
}

.dash-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 34px rgba(36, 31, 20, 0.12);
}

.dash-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, #242424, #3a3327);
    box-shadow: 0 12px 22px rgba(36, 31, 20, 0.18);
}

.dash-card-icon i {
    color: #fac90a;
    font-size: 20px;
}

.dash-card-info {
    gap: 8px;
}

.dash-card-label {
    font-size: 12px;
    font-weight: 700;
    color: #6b614d;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.dash-card-number {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: #1f2937;
}

.dash-card--usuarios { --card-accent: #fac90a; }
.dash-card--clientes { --card-accent: #d9b454; }
.dash-card--proveedores { --card-accent: #9c7b1f; }
.dash-card--cabinas { --card-accent: #4b4b4b; }
.dash-card--cotizaciones { --card-accent: #c89a13; }

@media screen and (max-width: 1024px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }

    .ov-card--profile,
    .ov-card--company {
        grid-column: auto;
        grid-row: auto;
    }

    .panel-header {
        padding: 18px;
    }

    .titlePanelControl {
        font-size: 28px;
    }
}

@media screen and (max-width: 640px) {
    .panel-header {
        border-radius: 22px;
    }

    .panel-actions a {
        width: 100%;
    }

    .ov-name {
        font-size: 28px;
    }

    .ov-company-grid {
        grid-template-columns: 1fr;
    }

    .dashboard {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .dash-card {
        min-height: 132px;
        padding: 14px 14px 16px;
        border-radius: 18px;
    }

    .dash-card-number {
        font-size: 26px;
    }
}

/* ================================
   REDISENO PANEL CONTROL V2
   ================================ */

#container {
    background:
        radial-gradient(circle at top left, rgba(215, 179, 66, 0.10), transparent 22%),
        linear-gradient(180deg, #efebe2 0%, #e7e1d6 100%);
}

.divContainer {
    max-width: 1280px;
    margin: 0 auto;
    gap: 24px;
}

.panel-header {
    padding: 26px 28px;
    border-radius: 30px;
    border: 1px solid rgba(82, 67, 26, 0.12);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(245,238,226,0.98)),
        radial-gradient(circle at top right, rgba(250, 201, 10, 0.12), transparent 30%);
    box-shadow: 0 20px 44px rgba(31, 24, 12, 0.10);
}

.titlePanelControl {
    font-size: 38px;
    font-weight: 800;
    color: #221d14;
}

.panel-actions {
    gap: 14px;
}

.btn-primary,
.btn-secondary {
    min-height: 50px;
    padding: 0 20px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
}

.btn-primary {
    border: 1px solid #d6a700;
    background: linear-gradient(135deg, #fac90a 0%, #efbb00 100%);
    color: #211b10;
    box-shadow: 0 14px 28px rgba(156, 122, 23, 0.22);
}

.btn-secondary {
    border: 1px solid rgba(82, 67, 26, 0.14);
    background: rgba(255,255,255,0.86);
    color: #352f22;
    box-shadow: 0 10px 20px rgba(31, 24, 12, 0.07);
}

.ov-card {
    border-radius: 28px;
    border: 1px solid rgba(82, 67, 26, 0.10);
    background: linear-gradient(180deg, #fffdf9 0%, #f5efe4 100%);
    box-shadow: 0 18px 36px rgba(31, 24, 12, 0.08);
}

.ov-card--profile {
    position: relative;
    overflow: hidden;
    padding: 26px;
    background:
        radial-gradient(circle at top right, rgba(250, 201, 10, 0.18), transparent 24%),
        linear-gradient(135deg, #24211b 0%, #3c3425 55%, #1f1b14 100%);
    color: #faf6ee;
}

.overview-grid {
    display: block;
}

.ov-card--profile::before {
    display: none;
}

.ov-profile-hero {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    gap: 22px;
    align-items: stretch;
}

.ov-profile-header {
    align-items: flex-start;
    gap: 18px;
}

.ov-avatar {
    width: 86px;
    height: 86px;
    border-radius: 24px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 16px 28px rgba(0,0,0,0.20);
}

.ov-avatar img {
    width: 68px;
    height: 68px;
    border-radius: 20px;
}

.ov-profile-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ov-name {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.ov-role {
    margin: 0;
    font-size: 15px;
    color: rgba(250, 246, 238, 0.78);
}

.ov-pill {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(250, 201, 10, 0.14);
    border: 1px solid rgba(250, 201, 10, 0.24);
    color: #fff6d2;
    font-weight: 700;
}

.ov-profile-actions {
    display: grid;
    gap: 12px;
}

.ov-action-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 0 16px;
    border-radius: 18px;
    text-decoration: none;
    color: #faf6ee;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.ov-action-card i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #fac90a, #dca600);
    color: #231c10;
    font-size: 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}

.ov-action-card span {
    font-size: 14px;
    font-weight: 700;
}

.ov-action-card:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.12);
    border-color: rgba(250, 201, 10, 0.20);
}

.ov-profile-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ov-profile-lower {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
    margin-top: 18px;
}

.ov-meta-item {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
}

.ov-meta-label {
    display: block;
    margin-bottom: 8px;
    color: rgba(250, 246, 238, 0.62);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.ov-meta-value {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.ov-company-strip {
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.10);
}

.ov-company-strip-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 800;
    color: #fff6de;
}

.ov-company-strip-title i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #fac90a, #dbab00);
    color: #251d11;
}

.ov-company-inline {
    display: grid;
    gap: 10px;
}

.ov-company-inline span {
    display: block;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(250, 246, 238, 0.88);
    font-size: 13px;
}

.ov-company-inline strong {
    color: #ffffff;
}

.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.dash-card {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 16px;
    min-height: 156px;
    padding: 22px 20px;
    border-radius: 26px;
    background: linear-gradient(180deg, #fffdfa 0%, #f3ede2 100%);
    border: 1px solid rgba(82, 67, 26, 0.10);
    box-shadow: 0 16px 32px rgba(31, 24, 12, 0.08);
    text-decoration: none;
    color: #231e15;
    overflow: hidden;
}

.dash-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 6px;
    background: linear-gradient(90deg, var(--card-accent), rgba(255,255,255,0));
    opacity: 1;
}

.dash-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 38px rgba(31, 24, 12, 0.11);
}

.dash-card-icon {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 68%, #ffffff 32%));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 14px 24px rgba(31, 24, 12, 0.14);
}

.dash-card-icon i {
    font-size: 28px;
    color: #1d170d;
    opacity: 1;
}

.dash-card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-card-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #746a56;
}

.dash-card-number {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: #1f2937;
}

.dash-card-caption {
    font-size: 13px;
    font-weight: 600;
    color: #544b3a;
}

.dash-card-arrow {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(35, 30, 21, 0.06);
    color: #463c2c;
}

.dash-card--usuarios { --card-accent: #f1c232; }
.dash-card--clientes { --card-accent: #d7b25a; }
.dash-card--proveedores { --card-accent: #8d7f58; }
.dash-card--cabinas { --card-accent: #c6a449; }
.dash-card--cotizaciones { --card-accent: #af8a1d; }

@media screen and (max-width: 1080px) {
    .ov-profile-hero {
        grid-template-columns: 1fr;
    }

    .ov-profile-lower {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 720px) {
    .panel-header {
        padding: 18px;
        border-radius: 24px;
    }

    .titlePanelControl {
        font-size: 30px !important;
    }

    .panel-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .panel-actions a {
        flex: 1 1 220px;
    }

    .ov-profile-meta {
        grid-template-columns: 1fr;
    }

    .dashboard {
        grid-template-columns: 1fr;
    }

    .dash-card {
        grid-template-columns: 64px 1fr auto;
        min-height: 132px;
        padding: 18px 16px;
    }

    .dash-card-icon {
        width: 64px;
        height: 64px;
        border-radius: 20px;
    }

    .dash-card-number {
        font-size: 34px;
    }
}

/* ================================
   VENTANAS CLARAS PARA LISTAS Y REGISTROS
   ================================ */

.sidebar-top {
    display: none;
}

.form_register {
    max-width: 760px;
    margin: 34px auto;
    padding: 54px 32px 28px;
    border-radius: 24px;
    background: linear-gradient(180deg, #fffdf9 0%, #f7f2e7 100%);
    border: 1px solid rgba(88, 70, 24, 0.12);
    box-shadow: 0 20px 38px rgba(31, 24, 12, 0.09);
}

.form_register::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 44px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(180deg, #f3ede0 0%, #ece5d7 100%);
    border-bottom: 1px solid rgba(88, 70, 24, 0.08);
}

.form_register::after {
    display: none;
}

.form_register h1 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 28px;
    font-weight: 800;
    color: #221d14;
    letter-spacing: -0.02em;
}

.form_register h1 i {
    color: #b88b0a;
}

.form_register .subtitle {
    color: #6a604e;
    margin-bottom: 18px;
}

.form_register hr {
    margin: 14px 0 22px 0;
    background: linear-gradient(90deg, rgba(184,139,10,0.26), rgba(88,70,24,0.08));
}

.form_register label {
    margin: 12px 0 6px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6a604e;
}

.form_register input,
.form_register select {
    border-radius: 14px;
    border: 1px solid rgba(88, 70, 24, 0.12);
    background: #fffdfa;
    padding: 12px 14px;
    color: #231d14;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.form_register input:hover,
.form_register select:hover {
    border-color: rgba(184, 139, 10, 0.28);
}

.form_register input:focus,
.form_register select:focus {
    border-color: #d2a000;
    box-shadow: 0 0 0 4px rgba(250, 201, 10, 0.16);
    background: #ffffff;
}

.btn_save {
    background: linear-gradient(135deg, #fac90a, #e4b100);
    color: #221d14;
    font-weight: 700;
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(184, 139, 10, 0.24);
}

.btn_save:hover {
    box-shadow: 0 18px 34px rgba(184, 139, 10, 0.30);
}

#container h1.title_list {
    position: relative;
    width: 100%;
    justify-content: center;
    margin: 10px 0 18px 0 !important;
    padding: 18px 24px;
    border-radius: 24px;
    background: linear-gradient(180deg, #fffdf9 0%, #f4ede0 100%);
    border: 1px solid rgba(88, 70, 24, 0.12);
    box-shadow: 0 16px 30px rgba(31, 24, 12, 0.08);
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #221d14 !important;
}

#container h1.title_list::before {
    display: none;
}

#container h1.title_list i {
    color: #b88b0a !important;
    font-size: 22px !important;
}

.form_search,
.form_search_date {
    float: none;
    width: auto;
    margin: 0 0 14px auto;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fffdf9 0%, #f4ede0 100%);
    border: 1px solid rgba(88, 70, 24, 0.10);
    box-shadow: 0 12px 24px rgba(31, 24, 12, 0.06);
}

.form_search input,
.form_search_date input {
    border-radius: 12px;
    border: 1px solid rgba(88, 70, 24, 0.12);
    background: #fffdfa;
    min-height: 40px;
}

.form_search .btn_search,
.form_search_date .btn_view {
    border-radius: 12px;
    background: linear-gradient(135deg, #fac90a, #e4b100);
    color: #221d14;
    min-width: 42px;
    justify-content: center;
    box-shadow: 0 10px 18px rgba(184, 139, 10, 0.18);
}

.client-filter-select {
    min-height: 40px;
    min-width: 190px;
    border-radius: 12px;
    border: 1px solid rgba(88, 70, 24, 0.12);
    background: #fffdfa;
    color: #221d14;
    font-weight: 700;
    padding: 0 12px;
}

.client-filter-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fffdf9 0%, #f4ede0 100%);
    border: 1px solid rgba(88, 70, 24, 0.10);
    box-shadow: 0 12px 24px rgba(31, 24, 12, 0.06);
}

.client-filter-chip,
.survey-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.client-filter-chip {
    background: rgba(250, 201, 10, 0.18);
    color: #7a5900;
    border: 1px solid rgba(184, 139, 10, 0.18);
}

.client-filter-chip.is-active,
.survey-status.is-sold {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.survey-status.is-pending {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.client-filter-help {
    color: #6a604e;
    font-size: 12px;
    font-weight: 700;
}

.survey-toggle-form {
    display: inline-flex;
    margin: 0 6px;
}

.survey-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    border: 0;
    border-radius: 999px;
    padding: 0 10px;
    cursor: pointer;
    background: #fff4c2;
    color: #7a5900;
    font-size: 12px;
    font-weight: 800;
}

.survey-toggle-btn.is-sold {
    background: #e0f2fe;
    color: #075985;
}

.table-empty {
    padding: 22px !important;
    text-align: center;
    color: #6a604e;
    font-weight: 700;
}

.form_excel,
.form_pdf {
    display: inline-flex;
    margin: 0 8px 10px 0;
}

.btn_excel,
.btn_pdf {
    border-radius: 12px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(88, 70, 24, 0.10);
    box-shadow: 0 10px 18px rgba(31, 24, 12, 0.08);
}

.containerTable {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 46px 0 0;
    border-radius: 24px;
    background: linear-gradient(180deg, #fffdf9 0%, #f6efe2 100%);
    border: 1px solid rgba(88, 70, 24, 0.12);
    box-shadow: 0 18px 34px rgba(31, 24, 12, 0.08);
}

.containerTable::before {
    display: none;
}

.form_register::before,
#container h1.title_list,
.containerTable {
    background-clip: padding-box;
}

.form_register {
    padding-top: 42px;
}

.form_register::before {
    height: 6px;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(90deg, #f0c54a, #dca316, #8c6a12);
}

#container h1.title_list {
    padding-top: 24px;
    border-top: 6px solid #e0b138;
}

.containerTable {
    padding-top: 0;
    border-top: 6px solid #e0b138;
}

table th {
    background: linear-gradient(180deg, #efd477 0%, #dfbb47 100%);
}

.window-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(360px, 1.2fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
}

.window-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.form_search--inline,
.form_search_date--inline {
    margin: 0;
    width: 100%;
}

.form_search--inline {
    justify-content: stretch;
}

.form_search--inline input {
    min-width: 0;
    flex: 1 1 auto;
}

.form_search_date--inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.form_search_date--inline label {
    margin: 0;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    color: #6a604e;
}

.form_search_date--inline input {
    min-width: 0;
    width: auto;
    flex: 1 1 150px;
}

.form_search_date--inline .btn_view,
.form_search--inline .btn_search {
    flex: 0 0 auto;
}

.form_excel,
.form_pdf {
    margin: 0;
}

@media screen and (max-width: 1100px) {
    .window-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .window-toolbar-actions {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 720px) {
    .form_search_date--inline {
        flex-wrap: wrap;
    }

    .form_search_date--inline input {
        flex: 1 1 160px;
    }
}

.containerTable table {
    min-width: 760px;
    background: transparent;
}

table th {
    background: linear-gradient(180deg, #f3df9a 0%, #e8c85a 100%);
    color: #2a2419;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    border-bottom: 1px solid rgba(88, 70, 24, 0.12);
}

table tr:nth-child(even),
table tr:nth-child(odd) {
    background: transparent;
}

table td {
    padding: 12px 12px;
    border-bottom: 1px solid rgba(88, 70, 24, 0.08);
    color: #322b1e;
}

table tbody tr:hover {
    background: rgba(250, 201, 10, 0.10);
}

.link_edit,
.link_delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.link_edit {
    background: rgba(37, 99, 235, 0.10);
}

.link_delete {
    background: rgba(239, 68, 68, 0.10);
}

.paginador ul {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fffdf9 0%, #f4ede0 100%);
    border: 1px solid rgba(88, 70, 24, 0.10);
    box-shadow: 0 12px 24px rgba(31, 24, 12, 0.06);
}

.paginador a,
.pageSelected {
    border-radius: 10px;
    border: 1px solid rgba(88, 70, 24, 0.10);
}

.paginador a {
    color: #7a621f;
    background: #fffdfa;
}

.paginador a:hover {
    background: rgba(250, 201, 10, 0.14);
}

.pageSelected {
    background: linear-gradient(135deg, #fac90a, #e4b100);
    border-color: #d2a000;
    color: #221d14;
}

/*============ Lista Productos ============*/
.img_producto img {
	width: 100px;
	height: 100px;
}

.zoom {
	transition: transform .2s;
}

.zoom:hover {
	transform: scale(1.1);
}


/*============ Botones exportar data============*/
.form_excel {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	float: left;
	background: initial;
	padding: 10px;

}

.form_excel .btn_excel {
	background: #1D6F42;
	color: #FFF;
	padding: 10px;
	border: 0;
	cursor: pointer;
	display: flex;
	border-radius: 5px;
}

.form_pdf {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	float: left;
	background: initial;
	padding: 10px;

}

.form_pdf .btn_pdf {
	background: #F40F02;
	color: #FFF;
	padding: 10px;
	border: 0;
	cursor: pointer;
	display: flex;
	border-radius: 5px;
}





/* === PANEL DE PERFIL === */
.perfilContainer {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1200px; /* Igual que las tarjetas */
    margin: 30px auto;
    overflow: hidden;
    font-family: inherit;
}

/* Encabezado */
.perfilHeader {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(90deg, #10437e, #1f73c8);
    color: #fff;
    padding: 25px 40px;
}

.perfilFoto {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
}

.perfilHeaderInfo h2 {
    margin: 0;
    font-size: 1.5rem;
}

.perfilHeaderInfo p {
    margin: 5px 0 0;
    font-size: 1rem;
    opacity: 0.9;
}

/* Pestañas */
.perfilTabs {
    display: flex;
    background: #f6f8fa;
    border-bottom: 1px solid #ddd;
}

.perfilTabs .tabBtn {
    flex: 1;
    padding: 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: #10437e;
    transition: all 0.3s ease;
}

.perfilTabs .tabBtn:hover {
    background: #eaf0fb;
}

.perfilTabs .tabBtn.active {
    background: #fff;
    border-bottom: 3px solid #10437e;
    color: #000;
}

/* Contenido */
.tabContent {
    display: none;
    padding: 25px 40px;
    color: #333;
    background: linear-gradient(135deg, #ffffff, #f8faff);
}



.tabContent.active {
    display: block;
}

.tabContent h4 {
    color: #10437e;
    margin-bottom: 15px;
}

.tabContent p {
    margin: 8px 0;
    font-size: 0.95rem;
}

.tabContent strong {
    color: #10437e;
}




/* ==== RESPONSIVE PANEL SUPERIOR (perfil + tarjetas blancas) ==== */
@media screen and (max-width: 768px) {

    /* el grid del overview se vuelve una sola columna */
    .overview-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 14px;
    }

    /* la tarjeta de perfil ya no “ocupa dos filas” */
    .ov-card--profile {
        grid-row: auto;
    }

    /* meta del perfil: una sola columna para que no se aplaste */
    .ov-profile-meta {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* la tarjeta de empresa ya no ocupa 2 columnas */
    .ov-card--company {
        grid-column: auto;
    }

    /* un poquito más pequeña la letra para que no se corte raro */
    .ov-meta-label {
        font-size: 10px;
    }

    .ov-meta-value {
        font-size: 12px;
        word-break: normal;      /* evita cortar palabras muy feo */
        overflow-wrap: anywhere; /* si es muy largo, se parte suave */
    }

    .ov-company-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   DASHBOARD SAAS 2026 - rediseño visual de Inicio
   Solo estilos de la pantalla index.php
   ========================================================= */
body.dashboard-page {
    background: #f4f7fb;
    color: #0f172a;
}

.dashboard-saas {
    width: min(100%, 1500px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.saas-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 2px;
}

.saas-eyebrow {
    display: inline-flex;
    margin-bottom: 6px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.saas-hero h1 {
    margin: 0;
    color: #071936;
    font-size: clamp(24px, 2.1vw, 34px);
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.saas-hero p {
    margin: 6px 0 0;
    color: #5d6b82;
    font-size: 15px;
}

.saas-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.saas-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 750;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.saas-btn:hover {
    transform: translateY(-1px);
}

.saas-btn--light {
    color: #071936;
    background: rgba(255,255,255,0.82);
    border: 1px solid #d9e2ef;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.saas-btn--primary {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28);
}

.saas-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.saas-metric-card,
.saas-panel {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(214, 225, 239, 0.95);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.075);
}

.saas-metric-card {
    min-height: 116px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}

.saas-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.11);
}

.saas-metric-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: linear-gradient(135deg, #eaf1ff, #dbeafe);
    font-size: 22px;
}

.saas-metric-content {
    display: grid;
    gap: 3px;
}

.saas-metric-label {
    color: #1f2a44;
    font-size: 14px;
    font-weight: 650;
}

.saas-metric-content strong {
    color: #071936;
    font-size: clamp(28px, 2.4vw, 38px);
    line-height: 1;
    letter-spacing: -0.05em;
}

.saas-metric-content small {
    color: #059669;
    font-size: 12px;
    font-weight: 700;
}

.saas-dashboard-grid {
    display: grid;
    gap: 16px;
}

.saas-dashboard-grid--charts {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .95fr);
}

.saas-dashboard-grid--lower {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
}

.saas-panel {
    padding: 22px;
    min-width: 0;
}

.saas-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.saas-panel-header h2 {
    margin: 0;
    color: #071936;
    font-size: 19px;
    font-weight: 820;
    letter-spacing: -0.03em;
}

.saas-panel-header span,
.saas-panel-header a {
    color: #5d6b82;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.saas-panel-header a {
    color: #2563eb;
}

.saas-chart-placeholder {
    position: relative;
    height: 210px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff, #f6f9fe);
    border: 1px dashed #cdd9eb;
}

.saas-line-grid {
    position: absolute;
    inset: 18px 20px;
    background-image: linear-gradient(#e6edf7 1px, transparent 1px), linear-gradient(90deg, #eef3fb 1px, transparent 1px);
    background-size: 100% 44px, 68px 100%;
}

.saas-fake-line {
    position: absolute;
    left: 36px;
    right: 36px;
    height: 3px;
    border-radius: 999px;
    opacity: .86;
    transform-origin: left center;
}

.saas-fake-line--blue {
    top: 82px;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
    transform: skewY(-9deg);
}

.saas-fake-line--navy {
    top: 128px;
    background: linear-gradient(90deg, #1d2d67, #071936);
    transform: skewY(6deg);
}

.saas-chart-placeholder p {
    position: absolute;
    left: 20px;
    bottom: 14px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.saas-bars-list {
    display: grid;
    gap: 18px;
    padding-top: 4px;
}

.saas-bars-list div {
    display: grid;
    grid-template-columns: 122px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    color: #17233d;
    font-size: 14px;
    font-weight: 700;
}

.saas-bars-list b {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.saas-bars-list em {
    color: #071936;
    font-style: normal;
    text-align: right;
}

.saas-table-wrap {
    overflow-x: auto;
}

.saas-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
}

.saas-table th,
.saas-table td {
    padding: 13px 10px;
    border-bottom: 1px solid #edf2f8;
    text-align: left;
    font-size: 13px;
}

.saas-table th {
    color: #607089;
    font-weight: 800;
}

.saas-table td {
    color: #15213a;
    font-weight: 650;
}

.saas-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.saas-status--blue { background: #dbeafe; color: #1d4ed8; }
.saas-status--green { background: #dcfce7; color: #15803d; }

.saas-status-panel {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.saas-donut-placeholder {
    width: 154px;
    height: 154px;
    border-radius: 50%;
    margin: 0 auto;
    display: grid;
    place-content: center;
    text-align: center;
    background:
        radial-gradient(circle, #ffffff 0 43%, transparent 44%),
        conic-gradient(#3b82f6 0 38%, #5eead4 38% 66%, #fbbf24 66% 88%, #f87171 88% 100%);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.saas-donut-placeholder span {
    color: #071936;
    font-size: 30px;
    font-weight: 850;
    line-height: 1;
}

.saas-donut-placeholder small {
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
}

.saas-status-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.saas-status-panel li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #17233d;
    font-size: 14px;
    font-weight: 700;
}

.saas-status-panel li strong {
    margin-left: auto;
    color: #071936;
}

.dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}
.dot-blue { background: #3b82f6; }
.dot-green { background: #34d399; }
.dot-yellow { background: #f59e0b; }
.dot-red { background: #ef4444; }

.saas-activity-panel {
    padding: 20px 22px;
}

.saas-activity-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.saas-activity-item {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.saas-activity-item span {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: #eaf1ff;
}

.saas-activity-item p {
    margin: 0;
    display: grid;
    gap: 3px;
    min-width: 0;
}

.saas-activity-item strong {
    color: #071936;
    font-size: 14px;
}

.saas-activity-item small {
    color: #64748b;
    font-size: 12px;
}

@media screen and (max-width: 1280px) {
    .saas-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .saas-dashboard-grid--charts,
    .saas-dashboard-grid--lower {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 1024px) {
    body.dashboard-page #container.dashboard-saas-container {
        padding: 24px 18px 26px;
    }

    .saas-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .saas-hero-actions {
        width: 100%;
        justify-content: stretch;
    }

    .saas-hero-actions .saas-btn {
        flex: 1 1 220px;
    }
}

@media screen and (max-width: 720px) {
    .saas-metrics-grid,
    .saas-activity-list {
        grid-template-columns: 1fr;
    }

    .saas-metric-card {
        min-height: 104px;
        padding: 18px;
    }

    .saas-panel {
        padding: 18px;
    }

    .saas-status-panel {
        grid-template-columns: 1fr;
    }

    .saas-donut-placeholder {
        width: 138px;
        height: 138px;
    }
}
/* =========================================================
   SHELL GLOBAL UNIFICADO
   Fuente unica para header, sidebar, navegacion y layout.
   ========================================================= */
:root {
    --shell-header-height: 82px;
    --shell-sidebar-width: 268px;
    --shell-navy: #071936;
    --shell-navy-dark: #06142c;
    --shell-blue: #2563eb;
    --shell-content-bg: #f4f7fb;
}

body {
    background: var(--shell-content-bg);
}

header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1100;
    height: var(--shell-header-height);
    padding: 0 24px 0 22px;
    background: linear-gradient(120deg, var(--shell-navy) 0%, var(--shell-navy-dark) 55%, #091f44 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 34px rgba(7, 25, 54, 0.22);
}

.header {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    min-width: 0;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-logos .logo-graditi {
    width: 52px;
    height: 52px;
    padding: 6px;
    object-fit: contain;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.header-brand-text .brand-main {
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.brand-main-separator {
    display: none;
}

.brand-main-secondary {
    max-width: 260px;
    overflow: hidden;
    color: #fff;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-brand-text .brand-sub {
    display: block;
    margin-top: 2px;
    color: rgba(226, 232, 240, 0.82);
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: none;
}

.optionsBar {
    width: auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #e5edf7;
}

.header-date-chip,
.header-notification,
.header-user-profile {
    display: inline-flex;
    align-items: center;
}

.header-date-chip {
    gap: 8px;
    color: rgba(241, 245, 249, 0.92);
    font-size: 13.5px;
}

.header-notification,
.header-profile-menu {
    color: #e5edf7;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.header-notification {
    position: relative;
    width: 38px;
    height: 38px;
    justify-content: center;
    border-radius: 50%;
}

.header-notification span {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    background: #ef4444;
    border-radius: 50%;
}

.header-user-profile {
    gap: 10px;
}

.header-user-text {
    display: grid;
    text-align: right;
}

.header-user-name {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.header-user-text small {
    color: #cbd5e1;
    font-size: 12px;
}

.photouser {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

#sidebar {
    position: fixed;
    top: var(--shell-header-height);
    left: 0;
    z-index: 1000;
    width: var(--shell-sidebar-width);
    height: calc(100vh - var(--shell-header-height));
    margin: 0;
    padding: 18px 14px 20px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--shell-navy) 0%, var(--shell-navy-dark) 48%, #09214a 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 16px 0 34px rgba(7, 25, 54, 0.18);
    transition: transform 0.22s ease;
}

.sidebar-brand-card,
.sidebar-mini-toggle {
    display: none;
}

#sidebar > ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
}

#sidebar li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar .menu-title {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #d8e4f6;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#sidebar .menu-title > i:first-child,
#sidebar .menu-title > svg.svg-inline--fa:first-child {
    width: 22px;
    min-width: 22px;
    color: #e6eefb;
    font-size: 19px;
    text-align: center;
}

#sidebar .menu-title:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

#sidebar .menu-title.active,
#sidebar > ul > li.submenu-open > .menu-title {
    color: #fff;
    background: linear-gradient(135deg, var(--shell-blue), #3b82f6);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.3);
}

#sidebar .menu-caret {
    width: auto;
    min-width: 0;
    margin-left: auto;
    color: rgba(226, 232, 240, 0.72);
    font-size: 11px;
    transition: transform 0.2s ease;
}

#sidebar li.submenu-open > .menu-title .menu-caret {
    transform: rotate(90deg);
}

#sidebar ul.submenu {
    position: static;
    width: auto;
    max-height: 0;
    margin: 0 0 0 52px;
    padding: 0 0 0 12px;
    display: grid;
    gap: 2px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: none;
    transition: max-height 0.22s ease, margin 0.22s ease, opacity 0.18s ease;
}

#sidebar > ul > li.submenu-open > ul.submenu {
    max-height: 260px;
    margin-top: 6px;
    margin-bottom: 8px;
    visibility: visible;
    opacity: 1;
}

#sidebar ul.submenu li a {
    min-height: 32px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #c5d3e8;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
    border-radius: 10px;
}

#sidebar ul.submenu li a i {
    display: none;
}

#sidebar ul.submenu li a::before {
    content: '';
    width: 5px;
    min-width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.62);
}

#sidebar ul.submenu li a:hover,
#sidebar ul.submenu li a.active {
    color: #fff;
    background: rgba(37, 99, 235, 0.2);
}

#sidebar ul.submenu li a.active::before {
    background: #3b82f6;
}

.sidebar-help-card {
    margin-top: 18px;
    padding: 16px;
    display: grid;
    justify-items: start;
    gap: 5px;
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.sidebar-help-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(59, 130, 246, 0.45);
    border-radius: 11px;
}

.sidebar-help-card strong {
    font-size: 14px;
}

.sidebar-help-card span:not(.sidebar-help-icon) {
    color: #cbd5e1;
    font-size: 12px;
}

.sidebar-help-card a {
    margin-top: 7px;
    padding: 8px 13px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: var(--shell-blue);
    border-radius: 9px;
}

#container {
    width: auto;
    min-height: calc(100vh - var(--shell-header-height));
    margin-top: var(--shell-header-height);
    margin-left: var(--shell-sidebar-width);
    background: radial-gradient(circle at 18% 0%, rgba(59, 130, 246, 0.08), transparent 34%), linear-gradient(180deg, #f8fbff 0%, #f3f6fb 100%);
}

#menu-toggle {
    display: none;
}

@media screen and (max-width: 1024px) {
    :root {
        --shell-header-height: 72px;
    }

    header {
        padding-right: 14px;
        padding-left: 66px;
    }

    .brand-main-secondary {
        max-width: 160px;
        font-size: 16px;
    }

    .header-date-chip,
    .separador,
    .header-user-text {
        display: none;
    }

    #menu-toggle {
        position: fixed;
        top: 17px;
        left: 16px;
        z-index: 1201;
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
    }

    #sidebar {
        width: min(286px, 88vw);
        transform: translateX(-100%);
    }

    #sidebar.active,
    body.nav-open #sidebar {
        transform: translateX(0);
    }

    #container {
        width: 100%;
        margin-left: 0;
    }
}

@media screen and (max-width: 520px) {
    .header-left {
        max-width: 210px;
    }

    .header-logos .logo-graditi {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .header-brand-text .brand-sub,
    .header-notification {
        display: none;
    }

    .photouser {
        width: 40px;
        height: 40px;
    }
}