/* ==========================================================================
   ESTILOS GENERALES DEL PANEL DE ADMINISTRACIÓN
   ========================================================================== */

body {
    background-color: #f9fbfd;
    margin: 0;
    padding: 0;
    font-family: 'Quicksand', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-wrapper {
    flex: 1;
    padding:20px 20px 40px;
    display: flex; /* Ayuda a centrar el login cuando es necesario */
    flex-direction: column;
    align-items: center;
}

/* Contenedor Principal (Dashboard) */
.admin-dashboard {
    width: 100%;
    max-width: 1200px; /* Ancho máximo por defecto para abarcar bien las tablas */
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 30px;
    padding-top: 20px;
}

.dash-xl{
	max-width: 1800px;
}
/* ==========================================================================
   ESTILOS DEL HEADER ADMIN UNIFICADO
   ========================================================================== */

/* Cinta Fija Superior */
body { padding-top: 40px; /* Deja espacio para que la cinta no tape contenido */ }
.cintaTopAdmin {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	background-color: #111;
	z-index: 9999;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0 25px;
	box-sizing: border-box;
	box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.cintaTopRight { display: flex; align-items: center; gap: 20px; }
.user-welcome { color: #aaa; font-family: 'Quicksand', sans-serif; font-size: 13px; font-weight: bold;}
.cintaTopRight a { color: #fff; text-decoration: none; font-weight: bold; transition: color 0.3s; }

/* Paleta de Colores en Gradiente para los Botones */
.bg-clientes  { background: linear-gradient(135deg, #3498db, #2980b9); }
.bg-productos { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.bg-canjes    { background: linear-gradient(135deg, #f39c12, #d35400); }
.bg-ventas    { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.bg-trabajo   { background: linear-gradient(135deg, #1abc9c, #16a085); }
.bg-encuestas { background: linear-gradient(135deg, #00bcd4, #0097a7); }
.bg-listas    { background: linear-gradient(135deg, #f1c40f, #f39c12); }
.bg-tienda    { background: linear-gradient(135deg, #e91e63, #c2185b); }
.bg-ajustes   { background: linear-gradient(135deg, #7f8c8d, #636e72); }
.bg-logout    { background: linear-gradient(135deg, #e74c3c, #c0392b); }

/* Comportamiento Base del Botón */
.btn-admin-dash {
	color: #ffffff !important;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
	border: none;
}
.btn-admin-dash:hover { filter: brightness(1.15); }

/* ==========================================================================
   DISEÑO A: ESTAMOS EN EL INICIO (paneladmin.php)
   ========================================================================== */
.admin-header.is-dashboard {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 50px 20px;
	background: transparent;
}

.admin-header.is-dashboard .cont_logo { margin-bottom: 40px; text-align: center; }
.admin-header.is-dashboard .cont_logo img { width: 280px; transition: transform 0.3s;}
.admin-header.is-dashboard .cont_logo img:hover { transform: scale(1.02); }

.admin-header.is-dashboard .admin-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.admin-header.is-dashboard .btn-admin-dash {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 160px; /* Ancho fijo para que sean todos cuadrados iguales */
	height: 140px;
	border-radius: 16px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.admin-header.is-dashboard .btn-admin-dash:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }

.admin-header.is-dashboard .btn-admin-dash i.material-icons { font-size: 46px; margin-bottom: 12px; display: block; text-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.admin-header.is-dashboard .btn-admin-dash span { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; text-shadow: 0 1px 3px rgba(0,0,0,0.2); }


/* ==========================================================================
   DISEÑO B: ESTAMOS EN CUALQUIER OTRA PÁGINA (Inner Pages)
   ========================================================================== */
.admin-header.is-inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 15px 30px;
	background: #ffffff;
	box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.admin-header.is-inner .cont_logo img { width: 160px; }

.admin-header.is-inner .admin-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.admin-header.is-inner .btn-admin-dash {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.admin-header.is-inner .btn-admin-dash:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,0.15); }

.admin-header.is-inner .btn-admin-dash i.material-icons { font-size: 16px; margin-bottom: 0; }
.admin-header.is-inner .btn-admin-dash span { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }


/* --- RESPONSIVE GENERAL --- */
@media (max-width: 992px) {
	.admin-header.is-inner { flex-direction: column; gap: 20px; padding: 20px; }
	.admin-header.is-inner .admin-nav { justify-content: center; }
}
@media (max-width: 600px) {
	.admin-header.is-dashboard .btn-admin-dash { flex: 0 0 calc(50% - 10px); height: 110px; } /* Celular: 2 columnas */
	.admin-header.is-dashboard .btn-admin-dash i.material-icons { font-size: 36px; }
	.cintaTopRight .user-welcome { display: none; } /* Ocultar "Hola Admin" en celu para ahorrar espacio */
}




/* ==========================================================================
   CABECERAS Y TÍTULOS (MODULE HEADERS)
   ========================================================================== */
.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}

.module-title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.module-title span {
    color: var(--color1, #0877D3);
    font-size: 18px;
    background: #eef5fb;
    padding: 5px 12px;
    border-radius: 20px;
}

.btn-back {
    color: #777;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s;
}
.btn-back:hover { color: var(--color1, #0877D3); }

/* ==========================================================================
   FORMULARIOS E INPUTS
   ========================================================================== */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    position: relative;
    text-align: left;
}

.form-group.full-width { grid-column: 1 / -1; }

.form-group label {
    font-weight: 700;
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.form-group p { margin: 0 0 10px 0; font-size: 13px; color: #777; }

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    color: #333;
    outline: none;
    background-color: #fafafa;
    transition: all 0.3s ease;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color1, #0877D3);
    background-color: #fff;
    box-shadow: 0 0 8px rgba(8, 119, 211, 0.1);
}

.input-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.input-wrapper input, .input-wrapper select { padding-left: 40px !important; font-weight: bold;}
.input-wrapper i { position: absolute; left: 12px; color: #aaa; font-size: 18px; transition: color 0.3s; }
.input-wrapper input:focus + i { color: var(--color1, #0877D3); }

/* Ojito de Contraseña (Login) */
.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s;
}
.toggle-password:hover { opacity: 1; }

.search-box { display: flex; margin-bottom: 20px; background: #fff; }
.search-box input { flex: 1; padding: 14px 20px; border: 2px solid #eee; border-radius: 8px; font-size: 15px; outline: none; transition: 0.3s; }
.search-box input:focus { border-color: var(--color1, #0877D3); }


/* ==========================================================================
   BOTONES
   ========================================================================== */
.action-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

.btn, .btn-action, .btn-submit, .btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Quicksand', sans-serif;
}

/* Estilos de Botones Específicos */
.btn-action {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-action:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); filter: brightness(1.1);}

.btn-submit {
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 15px;
    width: 100%;
    margin-top: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background-color: var(--color1, #0877D3); 
    color: white;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); filter: brightness(1.1);}

.btn-login {
    background-color: #333;
    color: white;
    padding: 15px;
    border-radius: 30px;
    font-size: 15px;
    width: 100%;
    margin-top: 10px;
}
.btn-login:hover { background-color: #000; transform: translateY(-2px); }

/* Colores de Botones Modificadores */
.btn-add, .btnVerde, .btn-action { background-color: #2ecc71; color: white;} 
.btn-add:hover, .btnVerde:hover { background-color: #27ae60; }
.btn-purple { background-color: #612BC4; color: white;} 
.btn-purple:hover { background-color: #4a1f9e; }
.btn-green2 { background-color: #2AC462; color: white;} 
.btn-green2:hover { background-color: #219e4f; }
.btnCyan { background-color: #00bcd4; color: white;} 
.btnCyan:hover { background-color: #0097a7; }
.btn-blue, .btnAzul { background-color: var(--color1, #0877D3); color: white;} 
.btn-blue:hover, .btnAzul:hover { background-color: #065b99; }
.btn-danger { background-color: #e74c3c; color: white;} 
.btn-danger:hover { background-color: #c0392b; }

.btn { padding: 12px 25px; border-radius: 30px; font-size: 13px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.btn:hover { transform: translateY(-2px); }

.btn-cancelar {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px;
    color: #e74c3c; background: transparent; border: 1px solid #e74c3c; padding: 4px 8px; border-radius: 4px; font-weight: bold; text-decoration: none;
}
.btn-cancelar:hover { background: #e74c3c; color: white; }

/* Botones de Tablas / Redes */
.btn-cv, .btn-mail, .btn-wsp, .btn-social {
    padding: 6px 10px; border-radius: 6px; text-decoration: none; font-weight: bold; display: inline-flex; align-items: center; gap: 4px; transition: 0.3s; font-size: 11px; width: fit-content; word-break: break-all;
}
.btn-cv { background: #eef5fb; color: var(--color1, #0877D3); }
.btn-cv:hover { background: var(--color1, #0877D3); color: #fff; }
.btn-mail { background: #fdfdfd; border: 1px solid #ddd; color: #555; }
.btn-mail:hover { background: #eef5fb; border-color: var(--color1, #0877D3); color: var(--color1, #0877D3); }
.btn-wsp { color: #25D366; background: #e8f5e9; }
.btn-wsp:hover { background: #25D366; color: #fff; }
.btn-social { color: #555; background: #f4f4f4; }
.btn-social:hover { background: #1877f2; color: #fff; }
.btn-error-back { display: inline-block; background: #eef5fb; color: var(--color1, #0877D3); padding: 10px 25px; border-radius: 20px; font-weight: bold; text-decoration: none; margin-top: 20px;}

/* ==========================================================================
   TABLAS Y LISTADOS
   ========================================================================== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 0 0 1px #eee;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 800px;
	table-layout: fixed;
}

.admin-table th {
    background-color: #333;
    color: #fff;
    padding: 15px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-table th a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 5px; justify-content: center; }
.admin-table th a:hover { text-decoration: underline; color: #00bcd4; }

.admin-table td {
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
    word-wrap: break-word;
}

.admin-table tbody tr:hover { background-color: #fcfcfc; }
.clickable-row { cursor: pointer; transition: background-color 0.2s; }
.clickable-row:hover { background-color: #f0f7ff !important; }
.clickable-row:hover td .icon-action, .clickable-row:hover td .icon-edit { color: var(--color1, #0877D3) !important; transform: translateX(3px); }

.td-center { text-align: center !important; }
.td-right { text-align: right !important; }

/* ==========================================================================
   BADGES Y ETIQUETAS
   ========================================================================== */
.status-badge, .badge-canje, .badge-encuesta, .badge-ncr, .badge-fact {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Colores de Estados */
.status-si, .status-4 { background-color: #2ecc71; }
.status-no, .status-1 { background-color: #e74c3c; }
.status-2 { background-color: #f1c40f; color: #333;}
.status-3 { background-color: #e67e22; }

/* Badges de Ventas */
.badge-canje { background-color: #e74c3c; margin-right: 5px; }
.badge-encuesta { background-color: #2ecc71; margin-right: 5px; }
.badge-ncr { background-color: #e67e22; margin-right: 5px; }
.badge-fact { background-color: #3498db; margin-right: 5px; }

/* Badges Informativos */
.sucursal-tag, .badge-id { background: #f0f0f0; color: #777; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: bold; font-family: monospace; }
.badge-puntos { background: #00bcd4; color: white; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; display: inline-flex; align-items: center; gap: 4px; }
.total-badge { background-color: #e0f7fa; color: #00bcd4; font-size: 14px; padding: 5px 12px; border-radius: 20px; font-weight: bold; }
.badge-score { padding: 6px 12px; border-radius: 20px; font-size: 14px; font-weight: 600; color: white; display: inline-block; min-width: 40px; text-align: center;}
.score-high { background-color: #2ecc71; }
.score-med  { background-color: #f39c12; }
.score-low  { background-color: #e74c3c; }


/* ==========================================================================
   ALERTAS Y CARGADORES
   ========================================================================== */
.alert-box, .alert-error, .alert-success {
    padding: 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
    display: none;
    text-align: left;
}
.alert-error { background-color: #ffebee; color: #c62828; border-left: 4px solid #e53935; }
.alert-success { background-color: #e8f5e9; color: #2e7d32; border-left: 4px solid #4caf50; }

#oculto { display: none; text-align: center; padding: 30px 0; }
#oculto p { color: #777; font-weight: bold; margin-top: 15px; font-size: 14px; }

.error-card { text-align: center; padding: 50px 20px; }
.error-card i { font-size: 50px; color: #e74c3c; margin-bottom: 15px; }
.error-card h2 { color: #333; margin: 0 0 10px 0; }


/* ==========================================================================
   ACORDEONES (SECCIONES Y CATEGORÍAS)
   ========================================================================== */
.secciones-container { display: flex; flex-direction: column; gap: 15px; }
.section-card { border: 1px solid #eee; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.03); transition: border-color 0.3s; }
.section-card:hover { border-color: #d0d0d0; }
.section-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: #fdfdfd; cursor: pointer; transition: background 0.2s; margin-bottom: 0; }
.section-header:hover { background: #f4f7f6; }
.section-title { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: #333; display: flex; align-items: center; gap: 10px; }
.section-actions { display: flex; align-items: center; gap: 15px; }
.btn-edit-section { color: var(--color1, #0877D3); background: #eef5fb; padding: 6px; border-radius: 6px; display: inline-flex; transition: all 0.3s; }
.btn-edit-section:hover { background: var(--color1, #0877D3); color: #fff; }

.toggle-icon { color: #aaa; transition: transform 0.3s; }
.toggle-icon.open { transform: rotate(180deg); }

.section-body { display: none; padding: 20px; background: #fff; border-top: 1px solid #eee; }
.form-list { display: flex; flex-direction: column; gap: 10px; }
.form-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; background: #f9fbfd; border-radius: 8px; text-decoration: none; color: #444; font-weight: 600; font-size: 14px; transition: all 0.3s; border-left: 3px solid transparent; }
.form-item-left { display: flex; align-items: center; gap: 10px; }
.form-item i { color: #bbb; font-size: 18px; transition: color 0.3s; }
.form-item:hover { background: #f0f7ff; border-left-color: var(--color1, #0877D3); color: var(--color1, #0877D3); transform: translateX(4px); }
.form-item:hover i { color: var(--color1, #0877D3); }
.empty-forms { color: #a5a5a5; font-size: 13px; font-style: italic; display: flex; align-items: center; gap: 5px; }


/* ==========================================================================
   CONSTRUCTOR DE FORMULARIOS Y ENCUESTAS (DRAG & DROP)
   ========================================================================== */
.ulPreguntas, .ulOpciones { list-style: none; padding: 0; margin: 0; }
.containerPregunta { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 25px; background: #fdfdfd; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.containerPregunta:hover { border-color: #bbb; }
.legendPregunta { font-family: 'Montserrat', sans-serif; font-weight: 900; color: var(--color1, #0877D3); padding: 0 10px; font-size: 16px; background: #fdfdfd;}

.divTituloPregunta { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.divTituloPregunta input.tituloPregunta { flex: 1; padding: 12px; font-size: 16px; font-weight: bold; border: 2px solid #eee; border-radius: 8px; background: #fff;}
.divTituloPregunta input.tituloPregunta:focus { border-color: var(--color1, #0877D3); }

.divIconosPregunta { position: absolute; top: 15px; right: 15px; cursor: pointer; color: #e74c3c; transition: transform 0.2s;}
.divIconosPregunta:hover { transform: scale(1.1); }

.pregunta-options-bar { display: flex; gap: 15px; background: #f4f7f6; padding: 10px; border-radius: 8px; margin-bottom: 15px; flex-wrap: wrap;}
.pregunta-options-bar .form-group { margin-bottom: 0; flex: 1; min-width: 150px;}

.containerOpciones { margin-top: 15px; }
.divFilaOpcion { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; background: #fff; padding: 10px; border-radius: 6px; border: 1px dashed #ccc; cursor: grab;}
.divFilaOpcion:active { cursor: grabbing; background: #e0f7fa; }
.divTituloOpcion { flex: 1; display: flex; gap: 10px; align-items: center; }
.divTituloOpcion input[type="text"] { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 6px; }
.divTituloOpcion select { width: 80px; padding: 10px; border: 1px solid #ddd; border-radius: 6px; }
.divIconosOpcion { color: #e74c3c; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.divIconosOpcion:hover { color: #c0392b; }

/* Drag Placeholders */
.placeholder-pregunta { border: 2px dashed var(--color1, #0877D3); background-color: #f0f7ff; border-radius: 10px; margin-bottom: 25px; visibility: visible !important; }
.placeholder-opcion { border: 2px dashed #bbb; background-color: #fafafa; border-radius: 6px; margin-bottom: 10px; visibility: visible !important; }
.drag-handle-pregunta, .drag-handle-opcion { cursor: grab; color: #ccc; transition: color 0.3s; }
.drag-handle-pregunta { font-size: 28px; margin-right: 10px; }
.drag-handle-pregunta:hover, .drag-handle-opcion:hover { color: var(--color1, #0877D3); }
.divTituloPregunta:active .drag-handle-pregunta { cursor: grabbing; }


/* ==========================================================================
   COMPONENTES ESPECÍFICOS (Uploads, Banners, Login, Ajustes)
   ========================================================================== */

/* Login Card */
.login-card { background: #ffffff; width: 100%; max-width: 450px; padding: 40px; border-radius: 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); text-align: center; }
.login-card h2 { font-family: 'Montserrat', sans-serif; color: #333; font-size: 24px; font-weight: 900; margin-top: 0; margin-bottom: 25px; text-transform: uppercase; }

/* Cajas de Subida de Archivos (Upload Area) */
.info-box { background-color: #eef5fb; border-left: 4px solid var(--color1, #0877D3); padding: 15px 20px; border-radius: 8px; margin-bottom: 30px; display: flex; align-items: center; gap: 10px; color: #444; font-size: 14px; font-weight: 600; }
.upload-area { display: block; border: 2px dashed #ccc; border-radius: 12px; padding: 40px 20px; text-align: center; background-color: #fdfdfd; cursor: pointer; transition: all 0.3s ease; position: relative; margin-bottom: 20px; }
.upload-area:hover { border-color: #27ae60; background-color: #f0fbf4; }
.upload-area i { font-size: 50px; color: #aaa; margin-bottom: 10px; transition: color 0.3s; }
.upload-area:hover i { color: #27ae60; }
.upload-area span { display: block; color: #555; font-weight: bold; font-size: 15px; }
.file-name-display { margin-top: 15px; font-size: 14px; color: #27ae60; font-weight: bold; display: none; background: #e8f5e9; padding: 5px 15px; border-radius: 20px; display: inline-block; }

/* Banners e Imágenes */
.banner-preview-container { width: 100%; background-color: #f4f4f4; border: 2px dashed #ddd; border-radius: 12px; overflow: hidden; margin-bottom: 15px; display: flex; justify-content: center; align-items: center; position: relative; aspect-ratio: 4 / 1; }
.banner-preview-container img { width: 100%; height: 100%; object-fit: cover; }
.image-edit-container { display: flex; align-items: center; gap: 20px; background: #fdfdfd; border: 2px dashed #ccc; padding: 20px; border-radius: 12px; }
.image-edit-container img { width: 100px; height: 100px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid #eee; padding: 5px; }
.upload-btn-wrapper { text-align: center; flex: 1; margin-bottom: 30px;}
.btn-change-img { display: inline-flex; align-items: center; gap: 6px; background-color: #fdfdfd; border: 2px solid #ddd; color: #555; padding: 10px 20px; border-radius: 30px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.3s; }
.btn-change-img:hover { border-color: var(--color1, #0877D3); color: var(--color1, #0877D3); background-color: #f0f7ff; }

/* Productos */
.prod-thumb { width: 50px; height: 50px; object-fit: contain; border-radius: 8px; border: 1px solid #eee; background: #fff; padding: 2px; }
.prod-desc { font-size: 12px; color: #888; font-weight: 400; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Ajustes Generales */
.settings-section { border: 1px solid #eaeaea; border-radius: 12px; padding: 30px; background: #fdfdfd; margin-bottom: 25px; transition: box-shadow 0.3s; }
.settings-section:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.settings-section-title { margin: 0 0 20px 0; font-family: 'Montserrat', sans-serif; font-size: 18px; color: #222; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #f0f0f0; padding-bottom: 15px; }


/* ==========================================================================
   MEDIA QUERIES (RESPONSIVE)
   ========================================================================== */
@media (max-width: 992px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .admin-dashboard { padding: 20px; border-radius: 0; }
    .module-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .action-buttons { width: 100%; justify-content: space-between; }
    .btn-action { flex: 1; justify-content: center; text-align: center; font-size: 11px; padding: 8px; }
    .form-grid { grid-template-columns: 1fr; gap: 15px; }
    .divFilaOpcion { flex-direction: column; align-items: stretch; }
    .divTituloOpcion { flex-direction: column; }
    .divTituloOpcion select { width: 100%; }
    .banner-preview-container { aspect-ratio: auto; min-height: 150px; }
    .image-edit-container { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .login-card { padding: 30px 20px; }
    .login-card h2 { font-size: 20px; }
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS DE "MI CUENTA" (CLIENTE)
   ========================================================================== */
.client-welcome-card {
    background: linear-gradient(135deg, var(--color1, #0877D3), #065b99);
    color: white;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 25px rgba(8,119,211,0.2);
    flex-wrap: wrap;
    gap: 20px;
}
.client-welcome-card h2 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 24px; }
.client-welcome-card p { margin: 5px 0 0 0; font-size: 15px; opacity: 0.9; }
.client-points { text-align: right; }
.client-points span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; opacity: 0.8; margin-bottom: 5px;}
.client-points strong { font-size: 40px; font-family: 'Montserrat', sans-serif; line-height: 1; }

.survey-banner {
    background: linear-gradient(to right, #f778a3, #ffd84a);
    border-radius: 12px;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(247,120,163,0.3);
    flex-wrap: wrap;
    gap: 20px;
}
.survey-banner-text { display: flex; align-items: center; gap: 15px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.1);}
.survey-banner-text h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 900;}
.btn-survey { background: #fff; color: #f778a3; font-weight: bold; padding: 12px 25px; border-radius: 30px; text-decoration: none; text-transform: uppercase; font-size: 13px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: all 0.3s;}
.btn-survey:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); color: #e91e63; }

.image-banner { width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); line-height: 0; }
.image-banner img { width: 100%; height: auto; display: block; }

.section-subtitle { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 20px; color: #333; margin: 40px 0 20px 0; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #eee; padding-bottom: 10px;}
.text-green { color: #2ecc71; font-weight: bold; }
.text-red { color: #e74c3c; font-weight: bold; }

@media (max-width: 768px) {
    .client-welcome-card { flex-direction: column; text-align: center; }
    .client-points { text-align: center; }
    .survey-banner { flex-direction: column; text-align: center; justify-content: center; }
    .survey-banner-text { flex-direction: column; }
}


/* ==========================================================================
   ESTILOS TRABAJA CON NOSOTROS (OFERTAS)
   ========================================================================== */
.job-hero { text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #1abc9c, #16a085); color: white; border-radius: 15px; margin-bottom: 40px; box-shadow: 0 5px 15px rgba(26,188,156,0.2); }
.job-hero h1 { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 28px; margin: 0 0 10px 0; }
.job-hero p { margin: 0; font-size: 16px; opacity: 0.9; }

.job-category-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; color: #333; margin: 40px 0 20px 0; border-bottom: 2px solid #eee; padding-bottom: 10px; display: flex; align-items: center; gap: 10px; }

.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; }

.job-item-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 20px; display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: #333; transition: all 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.job-item-card:hover { transform: translateY(-3px); border-color: #1abc9c; box-shadow: 0 8px 20px rgba(26,188,156,0.15); }

.job-item-info strong { font-family: 'Montserrat', sans-serif; font-size: 16px; display: block; margin-bottom: 5px; color: #222;}
.job-item-info span { font-size: 13px; color: #777; display: flex; align-items: center; gap: 5px;}

.job-item-icon { background: #eafaf1; color: #1abc9c; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s;}
.job-item-card:hover .job-item-icon { background: #1abc9c; color: #fff; }

.empty-jobs { text-align: center; padding: 60px 20px; background: #fff; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.empty-jobs i { font-size: 60px; color: #ccc; margin-bottom: 15px; }
.empty-jobs h3 { font-family: 'Montserrat', sans-serif; color: #333; margin: 0 0 10px 0; }
.empty-jobs p { color: #777; font-size: 16px; margin: 0; }