/* Variables para mantener consistencia */
:root {
    --primary: #FE6E00; /* El naranja que venimos usando */
    --primary-hover: #e56300;
    --bg-body: #f4f7f6;
    --bg-card: #ffffff;
    --text-main: #333333;
    --text-muted: #666666;
    --border-color: #dddddd;
    --error: #d9534f;
    --success: #5cb85c;
}
*, *:before, *:after {
    box-sizing: border-box;margin: 0; padding: 0;
}


body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
}
ul{list-style:none;}
a{text-decoration:none;}
#contenedor {
    width:100%; 
    margin-left: auto; 
    margin-right: auto;
	text-align:left;
	overflow:auto;
	z-index:200;
	clear:both;}

#contenido{border:0;margin:45px auto 10px auto;overflow:auto;width:100%;max-width:1200px}
#top_r header {display:block;width:100%; height:60px; overflow:auto;margin:0 0 0 0; padding:0 1%; background-color:#fe6e00; color:#000;}
#top_r header span.iso img{height:50px;}
/* Contenedor de Login */
#i-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

#i-sesion {
    background: var(--bg-card);
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    text-align: center;
}

#i-sesion h1 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    color: var(--text-main);
    font-weight: 700;
}

/* Formulario */
#i-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#i-form input[type="text"],
#i-form input[type="password"],
#i-form input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

#i-form input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(254, 110, 0, 0.15);
}

/* Botón Acceder */
.acceder {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 10px;
}

.acceder:hover {
    background-color: var(--primary-hover);
}

/* Links y Mensajes */
.i-pass {
    display: block;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--primary);
    text-decoration: none;
}

.i-pass:hover { text-decoration: underline; }

.msg-error {
    background-color: #fff5f5;
    color: var(--error);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ffcccc;
    margin-bottom: 20px;
    font-size: 0.9rem;
}


/*admin*/
/* Header General */
.admin-header {
    background: #fff;
    border-bottom: 2px solid #eee;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.brand-zone { display: flex; align-items: center; gap: 15px; }
.logo-admin img { height: 45px; width: auto; }

/* Menú de navegación */
.nav-list {
    display: flex;
    list-style: none;
    gap: 5px;
}

.nav-list a {
    text-decoration: none;
    color: #555;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.nav-list a i { color: #aaa; transition: 0.3s; }
.nav-list a:hover { background: #f0f0f0; color: var(--primary); }
.nav-list a:hover i { color: var(--primary); }

.logout-item a { color: #d9534f; }
.logout-item a:hover { background: #fff5f5; }

/* Responsive: Menú Hamburguesa */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--primary);
    cursor: pointer;
}


/* Contenedor de la cuadrícula de avisos */
#home-admin ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
}

/* Estilo base de cada tarjeta de aviso */
#home-admin li {
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    border-left: 6px solid #ddd; /* Color por defecto */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease;
}

#home-admin li:hover {
    transform: translateY(-5px);
}

/* Colores temáticos para cada tipo de aviso */
#home-admin li.wa { border-left-color: #25D366; } /* WhatsApp Green */
#home-admin li.pv { border-left-color: #3498db; } /* Blue */
#home-admin li.av-tar { border-left-color: var(--primary); } /* Tu Naranja */
#home-admin li.up-un { border-left-color: #9b59b6; } /* Purple */
#home-admin li.ayuda { border-left-color: #f1c40f; } /* Yellow */

/* Títulos y textos dentro de las tarjetas */
#home-admin h4 {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 12px;
    line-height: 1.3;
}

#home-admin li br { display: block; content: ""; margin-top: 8px; }

/* Botones de acción dentro de las tarjetas */
#home-admin li a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 18px;
    background-color: #f8f9fa;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 8px;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

#home-admin li a:hover {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

.top-bar-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.top-bar div p{margin-bottom:10px}
.alerta-resena {
    background: #fff3cd; /* Amarillo suave */
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 10px 20px;
    border-radius: 50px; /* Estilo píldora */
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    animation: pulse 2s infinite;
}

.alerta-resena i { color: #e67e22; }
.alerta-resena a {
    color: #856404;
    font-weight: bold;
    text-decoration: underline;
}

.soporte-info {
    font-size: 0.8rem;
    color: #777;
    display: flex;
    gap: 15px;
}

.soporte-info a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
/*avisos*/
/* Estilo para los avisos manuales de avisos.php */
.novedad-post {
    background: #ffffff;
    border: 1px solid #e1e8ed; /* Borde sutil, no sombra pesada */
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.novedad-post:hover {
    border-color: var(--primary);
    background: #fffaf5; /* Un fondo apenas naranja al pasar el mouse */
}

/* Una cintilla pequeña para indicar que es "Novedad" */
.novedad-post::before {
    content: "Novedad";
    position: absolute;
    top: 0;
    right: 0;
    background: #34495e;
    color: white;
    font-size: 0.65rem;
    padding: 2px 10px;
    border-radius: 0 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.novedad-post h4 {
    color: #2c3e50;
    font-size: 1rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.novedad-post p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

.novedad-fecha {
    display: block;
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 10px;
}

/*modificar info*/
/* Cuadrícula de información */
/* Reset de caja para evitar el desborde de imagen_10.png */
.mi-info-card, .mi-info-card *, .mi-info-card *:after, .mi-info-card *:before {
    box-sizing: border-box !important;
}

.mi-info-grid {
    display: grid;
    /* Forzamos 2 columnas exactamente iguales */
    grid-template-columns: repeat(2, 1fr); 
    gap: 25px;
    width: 100%;
    /* Eliminamos cualquier max-width que pueda estar achicando el grid arriba */
    max-width: 100%; 
    margin: 20px 0;
}

.mi-info-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    /* Importante: quitamos anchos fijos */
    width: 100%; 
}

.mi-full-width {
    grid-column: 1 / -1; /* Esto hace que se estire al ancho total de las 2 de arriba */
}

/* El arreglo para los teléfonos de la imagen_10.png */
.mi-form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
}

.mi-form-group input {
    width: 100% !important;
    max-width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

/* Responsive */
@media (max-width: 900px) {
    .mi-info-grid {
        grid-template-columns: 1fr;
    }
}
.info-grid {
    display: grid;
    /* Bajamos a 350px para que haya margen de maniobra */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    width: 100%;
    align-items: start; /* Evita que una tarjeta estire a la otra si tienen distinto alto */
}

.full-width { 
    grid-column: 1 / -1; 
    width: 100%; /* Fuerza a que no herede anchos menores */
}

.info-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.info-card h3 {
    border-bottom: 2px solid #f8f9fa;
    padding-bottom: 15px;
    margin-bottom: 20px;
    color: var(--primary);
    font-size: 1.1rem;
}

.data-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.data-item label {
    display: block;
    font-size: 0.8rem;
    color: #999;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 3px;
}

.data-item p {
    font-size: 1rem;
    color: #333;
    margin: 0;
}

.no-data { color: #ccc; font-style: italic; }

/* Grilla de Servicios en Vista */
.servicios-view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.serv-cat h4 {
    font-size: 0.85rem;
    color: #555;
    background: #f8f9fa;
    padding: 5px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.serv-cat p { font-size: 0.9rem; line-height: 1.6; }

.condiciones-text {
    background: #fdfdfd;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

.it-serv {
    display: inline-block;
    background: #eef2f7;
    padding: 2px 8px;
    border-radius: 4px;
    margin: 2px;
    font-size: 0.85rem;
}
.no-data {
    color: #ffa500; /* Un naranja suave o un gris cálido */
    font-size: 0.9rem;
    font-style: italic;
    background: #fff8ed; /* Un fondo muy tenue para que resalte el área vacía */
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px dashed #ffd8a8;
}
/*editar mi informacion*/

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 5px;
    color: #444;
}
.form-group input {
    width: 100%;
    box-sizing: border-box; /* Crucial: para que el padding no agrande el input */
    max-width: 100%;        /* No permite que desborde el padre */
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
}

.form-group-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px;
    width: 100%;
}
/* Contenedor de cada grupo (ej: Información General) */
.grid-checks {
    display: grid;
    /* Creamos columnas automáticas de mínimo 220px */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 20px; /* Espacio entre filas y columnas */
    padding: 15px 0;
}

/* Estilo para cada item (label que envuelve el input y el texto) */
.check-item {
    display: flex;
    align-items: center; /* Centra el cuadradito con el texto verticalmente */
    gap: 8px;
    font-size: 0.9rem;
    color: #444;
    cursor: pointer;
    line-height: 1.2;
}

/* Para que el cuadradito no se achique si el texto es largo */
.check-item input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary); /* El color naranja que venimos usando */
}

/* Efecto al pasar el mouse sobre la fila */
.check-item:hover {
    color: var(--primary);
}
.mi-footer-actions {
    position: sticky;
    bottom: 20px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    z-index: 100;
}

.btn-guardar {
    background: #27ae60;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.btn-guardar:hover { background: #219150; }

.btn-cancelar {
    background: #e74c3c;
    color: white;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}
/*reseñas individuales*/
/* Estilos para el input de link */
.copy-link-container {
    display: flex;
    gap: 10px;
    background: #f4f4f4;
    padding: 10px;
    border-radius: 8px;
}
.copy-link-container input {
    flex-grow: 1;
    border: none;
    background: transparent;
    font-family: monospace;
    color: #555;
}
.btn-copiar {
    background: var(--primary);
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
}

/* Tags de estado */
.tag {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}
.tag.pendiente { background: #fff3cd; color: #856404; }
.tag.aprobado { background: #d4edda; color: #155724; }

.btn-si { color: #27ae60; font-weight: bold; text-decoration: none; margin-right: 10px; }
.btn-no { color: #e74c3c; font-weight: bold; text-decoration: none; }
/*check in online*/
/* Contenedor principal del generador */
#checkin {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
}

/* El bloque de alerta cuando no hay unidades */
.alerta-error {
    background-color: #fff5f5;
    border-left: 5px solid #e53e3e;
    color: #c53030;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.alerta-error a {
    color: #c53030;
    text-decoration: underline;
    font-weight: bold;
}

/* Estilo de las filas del formulario */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end; /* Alinea el botón con los selects */
}

.form-group {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-weight: 600;
    color: #4a5568;
    font-size: 0.9rem;
}

.form-group select {
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f8fafc;
    font-size: 1rem;
    color: #2d3748;
    transition: border-color 0.2s;
}

.form-group select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

/* El cuadro de resultado (donde aparece el link) */
.resultado-generador {
    background: #f0fff4;
    border: 1px solid #c6f6d5;
    padding: 20px;
    border-radius: 10px;
    margin-top: 10px;
}

.resultado-generador p {
    color: #2f855a;
    margin-bottom: 10px;
}

/* Botones específicos */
.btn-primario {
    background: var(--primary);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

.btn-primario:hover {
    background: #2b6cb0;
    transform: translateY(-1px);
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25d366;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
}

.btn-whatsapp:hover {
    background: #128c7e;
}

.btn-limpiar {
    color: #718096;
    text-decoration: none;
    font-size: 0.9rem;
    margin-left: 15px;
}

/* Animación de entrada */
.animar-entrada {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/*agregar/editar unidades*/
/* Contenedor principal */
.lista-unidades-moderna {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* El item de cada unidad */
.unidad-item {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.unidad-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #cbd5e0;
}

/* Bloque de información */
.info-principal {
    flex: 1;
    padding-right: 20px;
}

.info-principal .nn {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #2d3748;
    margin-bottom: 5px;
}

.info-principal .hb {
    display: inline-block;
    background: #edf2f7;
    color: #4a5568;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.desc-unidad {
    color: #718096;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* Desplegable de Equipamiento */
.desplegable-equip {
    margin-top: 10px;
}

.btn-toggle-equip {
    background: none;
    border: 1px solid #cbd5e0;
    color: #4a5568;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-toggle-equip:hover {
    background: #f8fafc;
    border-color: var(--primary);
    color: var(--primary);
}

.mcaract {
    background: #f8fafc;
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid #edf2f7;
}

.grid-equip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.eq-list {
    font-size: 0.85rem;
    color: #4a5568;
}

/* Botones de acción lateral */
.acciones-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 170px;
}

.btn-accion {
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-accion.edit {
    background: #ebf8ff;
    color: #3182ce;
}

.btn-accion.fotos {
    background: #faf5ff;
    color: #805ad5;
}

.btn-accion.del {
    background: #fff5f5;
    color: #e53e3e;
}

.btn-accion:hover {
    filter: brightness(0.95);
    transform: scale(1.02);
}

/* Responsive */

/* Contenedor del Formulario */
.form-moderno {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 900px;
    margin: 0 auto;
}

/* Filas y Grupos */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.flex-2 { flex: 2; min-width: 300px; }
.form-group { display: flex; flex-direction: column; gap: 8px; flex: 1; }

.form-group label {
    font-weight: 700;
    color: #34495e;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

/* Inputs y Selects */
.form-group input[type="text"],
.form-group select,
.form-group textarea {
    padding: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    background: #fdfdfd;
    transition: all 0.3s ease;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
    outline: none;
}

/* Grid de Checkboxes (Equipamiento) */
.grid-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border: 1px dashed #cbd5e0;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.check-item:hover {
    background: #edf2f7;
}

.check-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary); /* Cambia el color del check al de tu marca */
}

/* Acciones */
.form-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 2px solid #f1f5f9;
}

.btn-link {
    color: #718096;
    text-decoration: none;
    font-weight: 600;
}

.btn-link:hover {
    color: #2d3748;
    text-decoration: underline;
}
/*subir fotos*/
/* Contenedor de la cuadrícula */
.grid-fotos-moderno {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

/* Tarjeta de cada foto */
.card-foto {
    background: #fff;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    min-height: 250px;
}

.card-foto:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
    border-color: #3182ce;
}

/* El número de la foto arriba a la izquierda */
.badge-nro {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(26, 32, 44, 0.8);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    z-index: 10;
    backdrop-filter: blur(4px);
}

/* Contenedor de la imagen */
.img-container {
    width: 100%;
    height: 180px;
    background: #edf2f7;
    overflow: hidden;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card-foto:hover .img-container img {
    transform: scale(1.1);
}

/* Área de subida cuando está vacía */
.upload-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #a0aec0;
    gap: 10px;
    padding: 20px;
    text-align: center;
}

.upload-area i {
    font-size: 2.5rem;
    color: #cbd5e0;
    transition: color 0.3s;
}

.upload-area:hover i {
    color: #3182ce;
}

.upload-area span {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Pie de la tarjeta con acciones */
.footer-card {
    padding: 12px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: center;
}

.btn-borrar {
    color: #e53e3e;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.2s;
}

.btn-borrar:hover {
    background: #fff5f5;
}

/* Estado vacío - Estilo de "Dashed" */
.card-foto.vacia {
    border: 2px dashed #cbd5e0;
    background: #fbfcfd;
}

.card-foto.vacia:hover {
    background: #f0f7ff;
    border-style: solid;
}
/*tarifas individuales*/
/* Contenedor principal de tarifas */
.lista-paquetes {
    list-item-style: none;
    padding: 0;
    margin: 20px 0;
}

.item-paquete {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 15px;
    padding: 20px;
    transition: all 0.2s ease;
}

.item-paquete:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: #cbd5e0;
}

/* Grilla interna de la tarjeta */
.grid-tarifa {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr;
    gap: 20px;
    align-items: center;
}

/* Columna de Precios */
.precios-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.precio-tag {
    background: #f1f5f9;
    color: #475569;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    border: 1px solid #e2e8f0;
}

.precio-tag strong {
    color: #1e293b;
}

/* Badges de Meses */
.badge-mes {
    background: #ebf8ff;
    color: #3182ce;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 4px;
}

/* Columna de Detalle (Estadía y Fechas) */
.col-detalle p {
    margin: 0 0 5px 0;
    font-size: 0.95rem;
}

.fechas-rango {
    color: #718096;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-principal {
    display: inline-block;
    background: #fefcbf;
    color: #b7791f;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    margin-top: 8px;
}

/* Columna de Acciones */
.col-acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.btn-acc {
    width: 100%;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    transition: 0.2s;
}

/* Colores de botones de estado */
.btn-acc.blue { background: #3182ce; color: white; }
.btn-acc.gold { background: #d69e2e; color: white; }
.btn-acc.green { background: #38a169; color: white; }
.btn-acc.blue:hover, .btn-acc.gold:hover, .btn-acc.green:hover { opacity: 0.9; }

.btn-disabled {
    width: 100%;
    text-align: center;
    padding: 8px;
    background: #edf2f7;
    color: #a0aec0;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: not-allowed;
}

/* Botones de gestión (Editar/Borrar) */
.botones-gestion {
    display: flex;
    gap: 10px;
}

.btn-edit, .btn-del {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: white;
    text-decoration: none;
}

.btn-edit { background: #4a5568; }
.btn-del { background: #e53e3e; }

/* Responsive */

.btn-acc.orange { 
    background: #ed8936; 
    color: white; 
}
.btn-acc.orange:hover { 
    background: #dd6b20; 
}
/* Contenedor Principal */
.contenedor-admin {
    background: #f8fafc;
    padding: 30px;
    border-radius: 15px;
    font-family: 'Segoe UI', Roboto, sans-serif;
    color: #1e293b;
    width: 100%;
    margin: 20px auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.header-formulario {
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 30px;
    padding-bottom: 15px;
}

.header-formulario h1 {
    color: #2563eb;
    margin: 0;
    font-size: 1.8rem;
}

/* Secciones del Formulario */
.seccion-form {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: 1px solid #e2e8f0;
}

.seccion-form h3 {
    margin-top: 0;
    font-size: 1.1rem;
    color: #334155;
    border-left: 4px solid #2563eb;
    padding-left: 10px;
    margin-bottom: 20px;
}

/* Grillas y Layouts */
.flex-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.grid-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

/* Inputs y Selects */
.grupo-input {
    flex: 1;
    min-width: 200px;
}

.grupo-input label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

input[type="text"], 
input[type="number"], 
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

input:focus, select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Precios (Grilla de Valores) */
.grid-valores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.caja-precio {
    background: #f1f5f9;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

.caja-precio label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
    color: #475569;
}

.input-dinero {
    font-weight: 700;
    color: #059669;
    text-align: center;
    font-size: 1.2rem !important;
}

/* Checkboxes Estilizados */
.lab-check, .lab-check-dia {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.lab-check:hover, .lab-check-dia:hover {
    background: #eff6ff;
    border-color: #2563eb;
}

/* Checkboxes Estilizados */
.lab-check, .lab-check-dia {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.lab-check:hover, .lab-check-dia:hover {
    background: #eff6ff;
    border-color: #2563eb;
}

/* AQUÍ ESTABA EL CORTE: Ahora cerrado correctamente */
.lab-check input {
    width: 18px;
    height: 18px; /* Valor agregado */
}

/* Estilo para unificar los inputs de fecha */
input[type="date"], .input-moderno-fecha {
    appearance: none;
    -webkit-appearance: none;
    color: #1e293b;
    font-family: inherit;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
    outline: none;
}

input[type="date"]:focus, .input-moderno-fecha:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Para que el ícono del calendario combine con tu diseño */
::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.4); /* Le da un tono grisáceo más suave */
}

/* Estilo para unificar los inputs de fecha */
.input-moderno-fecha {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.95rem;
    color: #334155;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
    outline: none;
}

.input-moderno-fecha:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Personalización del icono del calendario (Webkit) */
::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
}

::-webkit-calendar-picker-indicator:hover {
    background-color: #f1f5f9;
}
/* Contenedor de botones al final del formulario */
.acciones-finales {
    display: flex;
    justify-content: flex-start; /* Alineados a la izquierda */
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    padding: 25px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Botón Principal (Publicar) */
.btn-principal {
    background-color: var(--primary); /* El naranja de tu marca */
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px 0 rgba(254, 110, 0, 0.39);
}

.btn-principal:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(254, 110, 0, 0.23);
}

.btn-principal:active {
    transform: translateY(0);
}

/* Botón Secundario (Cancelar) */
.btn-secundario {
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.btn-secundario:hover {
    color: #0f172a;
    text-decoration: underline;
}

/*estadisticas individuales*/
#estad_user h1 { color: #333; margin-bottom: 20px; text-transform: uppercase; font-size: 22px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 30px; }
.card-stat { background: #fff; padding: 20px; border-radius: 8px; border-left: 5px solid #007bff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: center; }
.card-stat i { font-size: 24px; color: #007bff; margin-bottom: 10px; display: block; }
.card-stat span { display: block; font-size: 14px; color: #666; text-transform: uppercase; }
.card-stat b { font-size: 22px; color: #333; }
.card-stat small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-weight: normal;
}
.historial-stats { list-style: none; padding: 0; }
.stats-item-v26 {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 15px;
}
.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f8f9fa;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.grid-detalles-v26 {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 20px;
}
.detalles-col h5 {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.detalles-col ul { list-style: none; padding: 0; }
.detalles-col li { font-size: 1rem; margin-bottom: 5px; }
.ratio-box {
    background: #fcfcfc;
    border-left: 3px solid #eee;
    padding-left: 15px;
    font-style: italic;
    display: flex;
    align-items: center;
}
.stats-item { background: #f9f9f9; margin-bottom: 15px; padding: 15px; border-radius: 10px; border: 1px solid #eee; }
.stats-item h4 { margin: 0 0 10px 0; color: #d35400; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
.grid-detalles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.v-st-box { font-size: 13px; color: #555; background: #fff; padding: 8px; border-radius: 5px; box-shadow: inset 0 0 3px rgba(0,0,0,0.05); }
.wa-box { background: #e7f9ee; border: 1px solid #25d366; padding: 12px; border-radius: 8px; margin-top: 10px; }
.wa-title { color: #128c7e; font-weight: bold; margin-bottom: 8px; display: block; }
.wa-flex { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.wa-bar-bg { background: #ddd; height: 8px; border-radius: 4px; overflow: hidden; display: flex; }
.wa-bar-mobile { background: #25d366; height: 100%; }
.wa-bar-web { background: #34b7f1; height: 100%; }
.wa-legend { font-size: 11px; margin-top: 5px; color: #666; }
.dot { height: 8px; width: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }

.wa-bar-bg {
    background: #e9ecef;
    height: 10px;
    border-radius: 50px; /* Barras redondeadas tipo cápsula */
    overflow: hidden;
    display: flex;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.wa-bar-mobile {
    background: linear-gradient(90deg, #25d366, #128c7e);
    transition: width 0.5s ease-in-out;
}

.wa-bar-web {
    background: linear-gradient(90deg, #34b7f1, #075e54); /* Un azulado que vira al verde */
    transition: width 0.5s ease-in-out;
}
.conversion-box {
    background: #fff;
    padding: 10px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.conversion-box b { text-transform: uppercase; letter-spacing: 0.5px; }
/* Badge de Efectividad v26 */
.badge-efectividad {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 50px; /* Estilo píldora */
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Un suave degradado para que el color plano no sea tan "crudo" */
    background-image: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.1) 100%);
}

.badge-efectividad:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Opcional: Un pequeño puntito titilante si la efectividad es alta */
.badge-efectividad::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
}
/*ayuda*/
#m-ayuda { width: 100%; margin: 20px auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
#m-ayuda h1 { color: #2c3e50; font-size: 24px; margin-bottom: 20px; border-bottom: 3px solid #d35400; display: inline-block; padding-bottom: 5px; }

.ayuda-container { background: #fff; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden; list-style: none; padding: 0; }

.ayuda-item { border-bottom: 1px solid #edf2f7; }
.ayuda-header { 
    width: 100%; padding: 18px 25px; background: #fff; border: none; 
    display: flex; justify-content: space-between; align-items: center; 
    cursor: pointer; transition: background 0.2s;
}
.ayuda-header:hover { background: #f8fafc; }
.ayuda-header h3 { margin: 0; font-size: 17px; color: #4a5568; display: flex; align-items: center; gap: 10px; }
.ayuda-header i.arrow { transition: transform 0.3s; color: #cbd5e0; }

.ayuda-content { 
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #fcfcfc; 
}
.ayuda-body { padding: 25px; color: #4a5568; line-height: 1.7; font-size: 15px; }
.ayuda-body b { color: #2d3748; }
.ayuda-body h4 { color: #d35400; margin-top: 0; margin-bottom: 10px; }

/* Estado Activo */
.ayuda-item.active .ayuda-content { max-height: 2000px; } /* Un valor alto para que entre todo */
.ayuda-item.active .ayuda-header { background: #f1f5f9; border-left: 4px solid #d35400; }
.ayuda-item.active i.arrow { transform: rotate(180deg); color: #d35400; }

.enlaces-ayuda { color: #3182ce; text-decoration: underline; font-weight: bold; }
/*modificar horarios*/
/* Contenedor Principal */
#horarios {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    font-family: Arial, sans-serif;
    overflow: hidden; /* Limpia floats anteriores */
}

#horarios h1 {
    color: #333;
    font-size: 22px;
    margin-bottom: 20px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
    width: 100%;
}

/* El botón ahora no flota, se queda en su lugar */
.clic-acc {
    display: inline-block;
    background-color: #3498db;
    color: #fff !important;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 30px; /* Espacio antes de los días */
}

/* La lista de días */
#horarios ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Para que bajen si no entran */
    gap: 15px;
}

/* Cada tarjeta de día */
.grilla-dias {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none; /* Quita los puntitos */
    padding: 0;
    margin: 0;
}

.mhor {
    flex: 1;
    min-width: 140px; /* Evita que se aplasten */
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
}

.mhor h4 {
    color: #3498db;
    margin: 0 0 8px 0;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 5px;
    text-align: center;
}

.mhor span {
    display: block;
    font-size: 13px;
    color: #666;
    text-align: center;
    line-height: 1.6;
}

.mhor em {
    color: #bbb;
    font-style: italic;
}
/* --- CONTENEDOR DE FORMULARIO (EDICIÓN/NUEVO) --- */
#m-horarios {
    background: #ffffff;
    border: 1px solid #dce1e5;
    border-radius: 10px;
    padding: 30px;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

#m-horarios h1 {
    font-size: 20px;
    color: #333;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Instrucciones */
.f-datos {
    background: #fff9db;
    border-left: 4px solid #fcc419;
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 4px;
}

.f-datos h4 {
    margin: 0;
    font-size: 14px;
    color: #856404;
    line-height: 1.5;
}

/* Grilla del Formulario */
.grilla-form {
    list-style: none;
    padding: 0;
}

.fila-dia {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f1f3f5;
}

.fila-dia:last-child { border-bottom: none; }

.fila-dia h4 {
    width: 140px;
    margin: 0;
    color: #495057;
    font-size: 16px;
    font-weight: 600;
}

.inputs-dia {
    display: flex;
    gap: 30px;
}

.mhore label {
    font-size: 12px;
    color: #adb5bd;
    text-transform: uppercase;
    font-weight: bold;
}

.mhore input {
    margin-top: 5px;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    font-size: 14px;
    color: #495057;
    transition: border-color 0.2s;
}

.mhore input:focus {
    border-color: #339af0;
    outline: none;
    box-shadow: 0 0 0 3px rgba(51, 154, 240, 0.1);
}

/* --- ASIGNADOR MASIVO --- */
.asignador-masivo {
    background: #f8f9fa !important;
    border: 2px dashed #ced4da !important;
    padding: 20px !important;
    transition: all 0.3s ease;
}

.asignador-masivo:hover {
    border-color: #339af0 !important;
    background: #f1f7ff !important;
}

.asignador-masivo h4 {
    color: #228be6;
    margin-bottom: 15px !important;
}
.btn-fast {
    width: 100%;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    transition: opacity 0.2s;
}

.btn-fast:hover {
    opacity: 0.9;
}

#check_dias label {
    display: inline-block;
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 4px;
    margin: 2px;
    font-size: 12px;
    cursor: pointer;
}

#check_dias input { margin-right: 5px; }


/* Botones de Acción Final */
.acciones-form {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #f1f3f5;
    display: flex;
    gap: 15px;
}

.boton-guardar {
    background: #40c057;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.boton-guardar:hover { background: #37b24d; }

.boton-cancelar {
    background: #f1f3f5;
    color: #495057;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: bold;
}

.boton-cancelar:hover { background: #e9ecef; }

/*propiedades en venta*/
/* Contenedor Principal */
.lista-propiedades {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

/* Tarjeta de Propiedad */
.item-propiedad {
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.item-propiedad:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #3498db;
}

/* Estado Suspendido */
.item-propiedad.suspendida {
    background-color: #fcfcfc;
    border-left: 5px solid #95a5a6;
    opacity: 0.8;
}

/* Bloque de Información (Izquierda) */
.i-paq {
    flex: 1;
}

.i-paq .dd {
    font-size: 0.85rem;
    color: #7f8c8d;
    text-transform: uppercase;
    font-weight: 600;
}

.i-paq .nn {
    font-size: 1.2rem;
    color: #2c3e50;
    font-weight: bold;
    display: block;
    margin: 5px 0;
}

.i-paq .tt {
    font-size: 1.1rem;
    color: #27ae60;
    font-weight: bold;
}

.stats-mini {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #95a5a6;
    background: #f8f9fa;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
}

/* Bloque de Acciones (Derecha) */
.acc-paq {
    max-width: 450px; /* Un poco más de aire */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* gap: 8px; */ /* Si usas margin en los botones, podés comentar el gap */
}

/* Botones Estilizados */
.aa, .adel {
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    transition: background 0.2s;
    border: 1px solid transparent;
    display: inline-block;
margin:5px;
}

/* Colores por acción */
.edit { background: #3498db; color: white; }
.dest { background: #f1c40f; color: #000; } /* Destacado */
.norm { background: #bdc3c7; color: #fff; } /* Normalizar */
.res  { background: #e67e22; color: white; } /* Reservar */
.vend { background: #27ae60; color: white; } /* Vendida */
.hab  { background: #2ecc71; color: white; } /* Habilitar */
.susp { background: #95a5a6; color: white; } /* Suspender */
.fotos { background: #34495e; color: white; }
.adel { background: #fff; color: #e74c3c; border-color: #e74c3c; } /* Eliminar */
.adel:hover { background: #e74c3c; color: #fff; }

.aa:hover { opacity: 0.9; }

/* Mensajes de Estado Superior */
.status-msg {
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 0.9rem;
}
.status-msg.info { background: #e1f5fe; color: #01579b; border: 1px solid #b3e5fc; }
.status-msg.warning { background: #fff3e0; color: #e65100; border: 1px solid #ffe0b2; }

/* Paginación */
.pagination {
    margin-top: 30px;
    text-align: center;
}
.page-link {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #3498db;
}
.page-link.active {
    background: #3498db;
    color: #fff;
    border-color: #3498db;
}
/* Contenedor del menú de agregar */
.container-agregar {
    margin-bottom: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* El botón principal que despliega */
.op {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #2980b9;
    color: #fff !important;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease;
}

.op:hover {
    background: #21618c;
}

/* El panel desplegable de tipos */
/* El panel desplegable ahora se expande horizontalmente */
.p-opciones {
    position: absolute;
    z-index: 100;
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 12px;
    padding: 15px;
    margin-top: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    
    /* Ajustes para horizontalidad */
    width: 1200px; /* Ancho fijo o máximo para que se estire */
    max-width: 90vw; /* Evita que se salga en pantallas chicas */
    left: 0; /* Alineado a la izquierda del botón padre */
}

/* La rejilla de opciones: priorizamos columnas */
.p-opciones ul {
    display: grid;
    /* Forzamos 4 o 5 columnas fijas para que se vea apaisado */
    grid-template-columns: repeat(5, 1fr); 
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.p-opciones li a {
    display: flex;
    /* Cambiamos a row si querés que el icono y el texto estén al lado, 
       o mantenemos column para que parezcan botones de dashboard */
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 8px;
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 8px;
    color: #34495e;
    text-decoration: none;
    font-size: 0.8rem; /* Un pelín más chico para que entre todo */
    font-weight: 600;
    transition: all 0.2s ease;
    min-height: 80px;
}

/* Si hay muchos elementos, esto evita que se haga el "chorro" */

/*cargar/editar propiedad*/
.container-form {
    max-width: 1200px;
    margin: 20px auto;
    background: #f4f7f9;
    padding: 20px;
    border-radius: 15px;
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.grid-form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.form-section {
    grid-column: span 12;
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    padding: 20px;
}

.form-section.col-6 { grid-column: span 6; }

.form-section legend {
    font-weight: bold;
    color: #2c3e50;
    padding: 0 10px;
    font-size: 1.1rem;
}

/* Rejilla de inputs técnicos */
.grid-tecnico {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* Estilos de Checkboxes */
.caract-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.check-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}

.check-item {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Botones de acción */
.btn-action {
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
}
.save { background: #27ae60; }
.cancel { background: #95a5a6; }

/* Helpers */
.full-width { grid-column: span 12; }
.row { display: flex; gap: 15px; width: 100%; }
.col-6 { flex: 0 0 50%; }
.col-3 { flex: 0 0 25%; }
.mt-10 { margin-top: 10px; }

.input-group { display: flex; }
.select-moneda { width: 80px !important; border-radius: 6px 0 0 6px !important; }
.input-group input { border-radius: 0 6px 6px 0 !important; }
/* Nuevo contenedor de botones al pie */
.form-actions-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 30px 0;
    margin-top: 20px;
    border-top: 2px solid #e0e6ed;
}

.btn-action {
    padding: 15px 40px;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.save { 
    background: #27ae60; 
    color: white; 
    border-radius: 8px;
}

.save:hover { background: #219150; transform: translateY(-2px); }

.cancel { 
    background: #ecf0f1; 
    color: #7f8c8d; 
    border-radius: 8px;
}

.cancel:hover { background: #bdc3c7; color: #2c3e50; }

/* Asegurar que las secciones ocupen todo el ancho */
.full-width {
    grid-column: span 12;
}
/*mapa prop venta*/
/* Instrucciones sutiles */
.map-instructions {
    background: #eef2f7;
    padding: 10px 15px;
    border-left: 4px solid #3498db;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #5d6d7e;
}

/* Panel de confirmación estilizado */
.map-floating-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    padding: 15px;
    border: 1px dashed #3498db;
    border-radius: 8px;
    margin-bottom: 15px;
}

.coords-display {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    color: #2c3e50;
}

.coords-display span { margin-right: 20px; }

/* Fila de inputs finales */
.coords-final-row {
    display: flex;
    gap: 20px;
    background: #fdfefe;
    padding: 10px;
}

.coords-final-row .form-group {
    flex: 1;
}

.coords-final-row input {
    background: #f4f6f7; /* Color grisáceo para indicar que es readonly */
    font-weight: bold;
    color: #2e86c1;
    text-align: center;
}

/* Botones específicos del mapa */
.btn-confirm-map { background: #27ae60; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; }
.btn-cancel-map { background: #e74c3c; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; margin-left: 10px; }

/*casas en alquiler inmobiliarias*/

    .card-propiedad {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 20px;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        transition: transform 0.2s;
    }
    .card-propiedad:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .card-header-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .btn-accion {
        display: inline-block;
        padding: 8px 15px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        font-size: 0.9rem;
        margin-left: 5px;
        transition: opacity 0.2s;
    }
    .btn-editar { background: #444; color: #fff; }
    .btn-tarifas { background: #28a745; color: #fff; }
    .btn-stats { background: #007bff; color: #fff; }
    .btn-accion:hover { opacity: 0.8; color: #fff; }
   /*estadisticas prop inmobiliarias*/ 
   .item-propiedad { 
    display: flex; 
    flex-wrap: wrap; /* Esto permite que los hijos bajen si no hay espacio */
    position: relative;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

/* El bloque de stats debe forzar el salto de línea */
.stats-container {
    flex: 0 0 100%; /* Ocupa el 100% del ancho del padre */
    width: 100%;
    margin-top: 20px; /* Separación de los botones */
    padding-top: 15px;
    border-top: 1px solid #eee;
    clear: both; /* Por las dudas si usás floats */
    background: #fcfcfc; /* Un tono apenas distinto para destacar el panel */
}

/* Para que la info interna no se amontone */
.stats-scroll-area {
    display: block;
    width: 100%;
}
 /* Contenedor que rompe la fila y ocupa el 100% */
.stats-full-width {
    width: 100%;
    background: #fdfdfd;
    border-top: 2px solid #3498db;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.05);
    margin-top: 10px;
    clear: both; /* Crucial para que baje después de los botones flotados */
}

.stats-content {
    padding: 15px 20px;
}

.stats-content h4 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    color: #2c3e50;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.stats-scroll-area {
    max-height: 300px;
    overflow-y: auto;
}

/* Fila de cada mes */
.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    transition: background 0.2s;
}

.stats-row:hover {
    background: #f9f9f9;
}

.stats-date {
    font-weight: 600;
    color: #555;
}

.stats-icons {
    display: flex;
    gap: 15px;
}

.stats-icons span {
    font-size: 0.9rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}

.stats-icons i {
    color: #3498db; /* Azul corporativo */
}

.fa-whatsapp {
    color: #25d366 !important;
}

.no-stats {
    padding: 20px;
    text-align: center;
    color: #999;
}

/*super admin*/
/* --- Estilos Super Admin (sa-) --- */

#sa-cuerpo-admin {
    background-color: #f4f7f6;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

.sa-top-bar {
    margin-bottom: 25px;
    display: flex;
    justify-content: flex-end;
}

.sa-btn-add {
    background-color: #2ecc71;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}

.sa-btn-add:hover { background-color: #27ae60; }

/* Grid Principal */
.sa-main-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Columna izquierda más ancha */
    gap: 25px;
}

/* Bloques (Cards) */
.sa-block {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: 25px;
}

.sa-title {
    font-size: 1.2rem;
    color: #2c3e50;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Cartas de Clientes (Últimos 3) */
.sa-card-mini {
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sa-card-info p { margin: 5px 0; font-size: 0.9rem; }
.sa-link-externo { color: #3498db; text-decoration: none; font-size: 1.1rem; }

.sa-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 250px;
    justify-content: flex-end;
}

/* Botones Versátiles */
.sa-btn {
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    background: #e0e0e0;
    color: #666;
    transition: all 0.2s;
}
.sa-btn-destacado {
    background-color: #f1c40f !important; /* Amarillo oro */
    color: #000 !important;
    font-weight: bold;
}
.sa-btn-edit { background: #3498db; color: white; }
.sa-btn-del { background: #e74c3c; color: white; }
.sa-active { background: #f39c12; color: white; } /* Para los destacados */

/* Buscador */
.sa-input-search {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}

/* Listas con Scroll (Vencimientos y Suspendidos) */
.sa-scroll-area {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
}

.sa-venc-item, .sa-item-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.sa-item-suspended {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    justify-content: flex-end;
}
.sa-item-suspended span{width:350px}
.sa-tag-warning { background: #fff3cd; color: #856404; padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; }

/* Resumen del Sitio (Stats) */
.sa-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.95rem;
    border-bottom: 1px dashed #eee;
}

.sa-summary-total {
    margin-top: 15px;
    padding-top: 10px;
    font-weight: bold;
    font-size: 1.1rem;
    color: #2c3e50;
    text-align: right;
}

/* Estilo para Clientes Suspendidos */
.sa-block-danger { border-top: 4px solid #e74c3c; }
.sa-btn-ok { 
    background: #2ecc71; 
    color: white; 
    padding: 4px 10px; 
    border-radius: 4px; 
    text-decoration: none; 
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 900px) {
    .sa-main-grid { grid-template-columns: 1fr; }
}
/*cargar/editar cliente*/
/* Contenedor Principal */
#altas {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f4f7f6;
    border-radius: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#altas h1 {
    color: #2c3e50;
    font-size: 24px;
    margin-bottom: 25px;
    border-left: 5px solid #3498db;
    padding-left: 15px;
}

/* Tarjetas de Agrupación */
.sa-card {
    background: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.sa-card h3 {
    margin-top: 0;
    color: #34495e;
    font-size: 18px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Grilla Responsiva */
.sa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

/* Campos de Entrada */
.sa-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.sa-field label {
    font-weight: 600;
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
}

.sa-field input[type="text"],
.sa-field input[type="email"],
.sa-field input[type="password"],
.sa-field input[type="date"],
.sa-field select,
.sa-textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 15px;
    transition: border-color 0.3s;
}

.sa-field input:focus, .sa-textarea:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.2);
}

/* Textareas */
.sa-textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
}

/* Checkboxes y Radios */
.sa-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
}

.sa-checkbox-group label {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #ddd;
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s;
}

.sa-checkbox-group label:hover {
    background: #ebf5fb;
}

.sa-checkbox-group input {
    margin-right: 8px;
}

/* Botones de Acción */
.sa-form-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #ddd;
}

.sa-btn {
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: transform 0.1s, opacity 0.2s;
}

.sa-btn:active { transform: scale(0.98); }

.sa-active { background-color: #27ae60; color: white; }
.sa-btn-del { background-color: #e74c3c; color: white; }

/* Estilo para la sección Gastronomía (Destacado) */
.sa-gastronomia {
    border-top: 4px solid #f39c12;
}
.sa-header-actions {
    position: -webkit-sticky; /* Soporte para Safari */
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #f4f7f6; /* El mismo color del fondo del contenedor */
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

.sa-btns-top {
    display: flex;
    gap: 10px;
}
/*horarios sa*/

.sa-hor-btn { 
    display: inline-block;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    border: none;
}
.sa-hor-active { background: #27ae60; color: white; }
.sa-hor-btn-del { background: #e74c3c; color: white; }

/*control de estadísticas*/
/* Contenedor Principal */
.sa-cirilo-container {
    max-width: 1200px;
    margin: 20px auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

/* Card de Resumen y Selector */
.sa-cirilo-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
    border-left: 5px solid #3498db;
}

.sa-cirilo-stats-global {
    display: flex;
    gap: 40px; /* Más espacio entre grupos */
    align-items: flex-start;
}

.sa-cirilo-stat-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sa-cirilo-stat-group span strong {
    font-size: 18px; /* Un poco más grande para los números */
}

.sa-cirilo-stats-global span {
    font-size: 14px;
    color: #555;
}

.sa-cirilo-stats-global strong {
    display: block;
    font-size: 20px;
    color: #2c3e50;
}

/* Grilla de Estadísticas */
.sa-cirilo-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.sa-cirilo-item {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #eee;
    transition: transform 0.2s, box-shadow 0.2s;
}

.sa-cirilo-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* Cabecera del Item */
.sa-cirilo-item-header {
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
}

.sa-cirilo-item-header .id {
    font-size: 11px;
    color: #999;
    font-weight: bold;
}

.sa-cirilo-item-header .nombre {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #2c3e50;
    margin: 3px 0;
}

/* Tags de Tipo */
.sa-cirilo-tag {
    display: inline-block;
    background: #e1f0fa;
    color: #3498db;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 5px;
}

/* Metas (Los numeritos) */
.sa-cirilo-metas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sa-cirilo-metas .meta {
    font-size: 12px;
    padding: 6px 10px;
    background: #f9f9f9;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
}

.sa-cirilo-metas .meta span {
    color: #7f8c8d;
}

.sa-cirilo-metas .color-wsp {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.sa-cirilo-metas .color-wsp-web {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #bbdefb;
}

/* Paginador Cirilo */
#sa-cirilo-paginar {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.pag-nav {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.pag-numeros a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    color: #555;
    border-radius: 50%;
    margin: 0 3px;
}

.pag-numeros a.active {
    background: #3498db;
    color: #fff;
    font-weight: bold;
}

.pag-numeros a:hover:not(.active) {
    background: #eee;
}
/*control de tarifas*/
<style>
/* Contenedor General */
#sa-tar-contenedor {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    max-width: 1200px;
    margin: 20px auto;
}

/* Menú de Filtros Superior */
#sa-tar-menu {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    line-height: 2;
}

.sa-tar-link {
    display: inline-block;
    background: #f0f3f5;
    color: #2c3e50;
    padding: 5px 12px;margin:5px 0 5px 0;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    margin-right: 8px;
    transition: all 0.3s;
    border: 1px solid #dcdde1;
}

.sa-tar-link:hover {
    background: #3498db;
    color: #fff;
    border-color: #2980b9;
}

.sa-tar-all {
    display: inline-block;
    margin-top: 15px;
    font-weight: bold;
    color: #e74c3c;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.sa-tar-all:hover {
    border-bottom-color: #e74c3c;
}

/* Lista de Paquetes */
.sa-tar-lista {
    list-style: none;
    padding: 0;
    width:98%;
}

.sa-tar-item {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-left: 5px solid #3498db;
    box-shadow: 0 3px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.sa-tar-item:hover {
    transform: translateX(5px);
}

/* Estado Deshabilitado */
.sa-tar-deshabilitado {
    border-left-color: #95a5a6;
    background: #fdfdfd;
    opacity: 0.8;
}

.sa-tar-deshabilitado .sa-tar-header {
    color: #7f8c8d;
}

/* Detalles de la Tarifa */
.sa-tar-header {
    font-size: 18px;
    color: #2c3e50;
    display: block;
    margin-bottom: 10px;
}

.sa-tar-mes, .sa-tar-dia {
    background: #ebf5fb;
    color: #2980b9;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    margin-right: 4px;
    text-transform: uppercase;
}

.sa-tar-precios {
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sa-tar-precio {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.sa-tar-promo {
    color: #e67e22;
    font-weight: bold;
    font-size: 14px;
}

/* Botonera de Acciones */
.sa-tar-acciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
}

.sa-tar-acciones a {
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    transition: 0.3s;
}

.sa-tar-btn-um { background: #f39c12; color: #fff; }
.sa-tar-btn-um-off { background: #7f8c8d; color: #fff; }
.sa-tar-btn-dest { background: #9b59b6; color: #fff; }
.sa-tar-btn-dest-off { background: #34495e; color: #fff; }
.sa-tar-btn-susp { background: #e74c3c; color: #fff; }
.sa-tar-btn-hab { background: #27ae60; color: #fff; }

.sa-tar-group-edit {
    display: grid;
    grid
}
/* la lista */
.sa-tar-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Cada Tarjeta de Tarifa */
.sa-tar-item {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 0; /* Quitamos padding para manejarlo por columnas */
    display: grid;
    grid-template-columns: 1.5fr 1fr 220px; /* Tres columnas: Info, Detalles, Acciones */
    border: 1px solid #e1e8ed;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    overflow: hidden;
    transition: all 0.25s ease;
}

.sa-tar-item:hover {
    box-shadow: 0 8px 15px rgba(0,0,0,0.08);
    border-color: #3498db;
}

/* Columna de Información Principal */
.sa-tar-col-info {
    padding: 20px;
    border-right: 1px solid #f0f0f0;
}

.sa-tar-cod {
    font-size: 14px;
    color: #7f8c8d;
    display: block;
    margin-bottom: 5px;
}

.sa-tar-cod strong {
    color: #2c3e50;
    font-size: 18px;
}

.sa-tar-bloque {
    margin-top: 12px;
}

.sa-tar-bloque small {
    text-transform: uppercase;
    font-weight: bold;
    color: #bdc3c7;
    font-size: 10px;
    letter-spacing: 0.5px;
}

/* Etiquetas de Meses y Días */
.sa-tar-tag-mes, .sa-tar-tag-dia {
    display: inline-block;
    padding: 3px 10px;
    background: #f1f8fe;
    color: #3498db;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    margin: 3px 2px 0 0;
}

.sa-tar-tag-dia {
    background: #fdf2e9;
    color: #e67e22;
}

/* Grilla de Precios Interna */
.sa-tar-grid-precios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-top: 15px;
}

.sa-tar-p-tag {
    background: #f8f9fa;
    padding: 6px;
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
    border: 1px solid #edf0f2;
}

.sa-tar-p-tag strong {
    color: #27ae60;
    display: block;
}

/* Columna de Detalles Técnicos */
.sa-tar-col-detalles {
    padding: 20px;
    background: #fafbfc;
    font-size: 13px;
    line-height: 1.6;
}

.sa-tar-hab-name {
    font-weight: bold;
    color: #2980b9;
    font-size: 14px;
}

.sa-tar-desc {
    display: inline-block;
    background: #e74c3c;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    margin: 8px 0;
}

.sa-tar-stats {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dotted #ccc;
    color: #95a5a6;
    font-size: 11px;
}

/* Columna de Acciones */
.sa-tar-col-acciones {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
}

.sa-tar-col-acciones a {
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    text-transform: uppercase;
    transition: 0.2s;
}

/* Botones de Estado */
.sa-tar-btn-um { background: #fff; color: #f39c12; border: 1px solid #f39c12; }
.sa-tar-btn-um-active { background: #f39c12; color: #fff; }

.sa-tar-btn-dest { background: #fff; color: #9b59b6; border: 1px solid #9b59b6; }
.sa-tar-btn-dest-active { background: #9b59b6; color: #fff; }

.sa-tar-btn-susp { background: #fff; color: #e74c3c; border: 1px solid #e74c3c; }
.sa-tar-btn-hab { background: #27ae60; color: #fff; }

/* Grupo Editar/Borrar */
.sa-tar-row-edit {
    display: flex;
    gap: 5px;
    margin-top: auto;
}

.sa-tar-btn-edit { background: #3498db !important; color: white !important; flex: 1; }
.sa-tar-btn-del { background: #f8f9fa !important; color: #c0392b !important; border: 1px solid #f1dada !important; }

/* Estado OFF */
.sa-tar-off {
    border-left: 6px solid #bdc3c7;
    opacity: 0.7;
}

.sa-tar-off .sa-tar-cod strong { color: #7f8c8d; }

/* Responsivo rápido */
@media (max-width: 900px) {
    .sa-tar-item { grid-template-columns: 1fr; }
    .sa-tar-col-info, .sa-tar-col-detalles { border-right: none; border-bottom: 1px solid #eee; }
}


/* Contenedor del Formulario */
#sa-tar-form-contenedor {
    background: #f8fafc;
    padding: 40px;
    border-radius: 16px;
    max-width: 1000px;
    margin: 30px auto;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    border: 1px solid #e2e8f0;
}

/* Cabecera del Form */
.sa-tar-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.sa-tar-form-header h1 {
    font-size: 24px;
    color: #1e293b;
    margin: 0;
}

/* Secciones (Cajas blancas) */
.sa-tar-form-section {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #edf2f7;
}

.sa-tar-form-section h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #3b82f6;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
}

/* Grillas de inputs */
.sa-tar-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 15px;
}

.sa-tar-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
}

.sa-tar-group input[type="text"], 
.sa-tar-group input[type="number"], 
.sa-tar-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.sa-tar-group input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Pastillas para Checkboxes (Meses, Días, Inclusiones) */
.sa-tar-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sa-tar-check-item {
    cursor: pointer;
}

.sa-tar-check-item input {
    display: none; /* Escondemos el check feo */
}

.check-label {
    display: inline-block;
    padding: 8px 16px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
}

.sa-tar-check-item input:checked + .check-label {
    background: #3b82f6;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

/* Grilla de Precios */
.sa-tar-grid-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
}

.sa-tar-input-addon {
    display: flex;
    align-items: center;
}

.sa-tar-input-addon span {
    background: #f1f5f9;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: #94a3b8;
    font-weight: bold;
}

.sa-tar-input-addon input {
    border-radius: 0 8px 8px 0 !important;
}

/* Botones de Acción Superior */
.sa-tar-form-nav {
    display: flex;
    gap: 12px;
}

.sa-tar-btn-save {
    background: #10b981;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.sa-tar-btn-save:hover { background: #059669; }

.sa-tar-btn-cancel {
    background: #ef4444;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.sa-tar-btn-cancel:hover { background: #dc2626; }
input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    color: #475569;
    font-family: inherit;
    cursor: pointer;
}

/* Para que el icono del calendario nativo no choque con el diseño */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px;
    filter: invert(0.5); /* Lo hace un poquito más sutil */
}
/*control reseñas*/

#sa-op-contenedor { font-family: 'Inter', sans-serif; max-width: 1100px; margin: 0 auto; padding: 20px; }

.sa-op-header { margin-bottom: 25px; border-bottom: 2px solid #e2e8f0; padding-bottom: 15px; }
.sa-op-header h1 { font-size: 22px; color: #1e293b; }
.sa-op-header h1 span { font-size: 14px; color: #64748b; font-weight: normal; }

.sa-op-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.sa-op-pendiente { border-left: 5px solid #f59e0b; background: #fffdf9; }

.sa-op-card-body { padding: 20px; }
.sa-op-user-info { display: flex; align-items: center; margin-bottom: 12px; }
.sa-op-user-name { font-weight: 700; color: #1e293b; }
.sa-op-user-mail { color: #94a3b8; font-size: 13px; margin-left: 12px; }

.sa-op-alojamiento-tag { background: #eff6ff; color: #3b82f6; padding: 4px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

.sa-op-title { font-size: 18px; margin: 15px 0 10px; color: #1e293b; font-weight: 600; }
.sa-op-text { color: #475569; font-style: italic; line-height: 1.6; border-left: 3px solid #f1f5f9; padding-left: 15px; }

.sa-op-metadata { display: flex; gap: 20px; margin-top: 15px; font-size: 13px; color: #64748b; }

.sa-op-ratings { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sa-op-rating-main { background: #334155; color: #fff; padding: 3px 10px; border-radius: 4px; font-weight: bold; font-size: 13px; }
.sa-op-rating-sub { background: #f8fafc; border: 1px solid #e2e8f0; padding: 3px 10px; border-radius: 4px; font-size: 12px; color: #64748b; }

/* Acciones */
.sa-op-actions { background: #f8fafc; padding: 15px 20px; border-top: 1px solid #e2e8f0; border-radius: 0 0 12px 12px; display: flex; justify-content: space-between; align-items: center; }
.sa-op-action-group { display: flex; gap: 10px; }

.sa-op-btn { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; }
.sa-op-btn-approve { background: #10b981; color: #fff; }
.sa-op-btn-suspend { background: #f59e0b; color: #fff; }
.sa-op-btn-edit { background: #3b82f6; color: #fff; }
.sa-op-btn-delete { background: #ef4444; color: #fff; padding: 8px 12px; }

.sa-op-btn-check { color: #059669; font-size: 13px; font-weight: 600; text-decoration: none; }
.sa-op-btn-cancel { color: #dc2626; font-size: 13px; font-weight: 600; text-decoration: none; }

/* Paginación */
.sa-op-pagination { margin-top: 30px; display: flex; justify-content: center; align-items: center; gap: 15px; }
.sa-op-pages-list { display: flex; gap: 6px; }
.sa-op-page-item { padding: 8px 14px; border: 1px solid #e2e8f0; border-radius: 8px; text-decoration: none; color: #64748b; font-weight: 500; }
.sa-op-active { background: #3b82f6; color: #fff; border-color: #3b82f6; }

/*control de banners*/

#sa-ba-contenedor { max-width: 1100px; margin: 0 auto; font-family: 'Inter', sans-serif; padding: 20px; }

/* Header */
.sa-ba-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.sa-ba-header h1 { font-size: 22px; color: #1e293b; margin: 0; }
.sa-ba-btn-nuevo { background: #1e293b; color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 600; }

/* Grid de 2 columnas */
.sa-ba-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; 
}

/* Responsive: 1 columna en móviles */
@media (max-width: 768px) {
    .sa-ba-grid { grid-template-columns: 1fr; }
}

/* Card Style */
.sa-ba-card { 
    background: white; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    display: flex; 
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.sa-ba-card-activo { border-top: 4px solid #10b981; }
.sa-ba-card-suspendido { border-top: 4px solid #ef4444; background: #fcfcfc; }

.sa-ba-card-top { padding: 15px; display: flex; justify-content: space-between; align-items: center; }
.sa-ba-cliente { font-weight: 700; color: #1e293b; font-size: 15px; }
.sa-ba-badge { font-size: 10px; background: #f1f5f9; padding: 3px 8px; border-radius: 4px; color: #64748b; font-weight: 700; }

/* Contenedor de la Imagen */
.sa-ba-visual-container { 
    background: #f8fafc; 
    height: 140px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 10px;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}
.sa-ba-img-preview { max-width: 100%; max-height: 100%; object-fit: contain; }

.sa-ba-no-img { text-align: center; color: #94a3b8; font-size: 12px; }
.sa-ba-no-img i { font-size: 24px; display: block; margin-bottom: 5px; }

/* Footer de la Card */
.sa-ba-card-footer { padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; background: #fff; }

.sa-ba-status-link { text-decoration: none; font-size: 11px; font-weight: 800; }
.status-on { color: #10b981; }
.status-off { color: #ef4444; }

.sa-ba-card-actions { display: flex; gap: 12px; }
.sa-ba-icon-btn { color: #64748b; font-size: 16px; transition: color 0.2s; }
.sa-ba-icon-btn.edit:hover { color: #3b82f6; }
.sa-ba-icon-btn.delete:hover { color: #ef4444; }

/* ==========================================================================
   RESPONSIVE UNIFICADO
   ========================================================================== */
@media (max-width: 1024px) {
    .menu-toggle { display: block; }
    .nav-container {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    }
    .nav-container.active { display: block; }
    .nav-list { flex-direction: column; padding: 20px; }
}

/* MÓVILES (Smartphone y Tablet Portrait) */
@media (max-width: 768px) {
    /* Ajustes de Header y Contenedor */
    .admin-header { position: fixed; width: 100%; left: 0; }
    #contenido { width: 95%; margin: 85px auto 20px auto; }

    /* Login Adaptado (Lo que tenías en 480px) */
    #i-sesion { padding: 30px 20px; }

    /* Grillas a una sola columna */
    .form-row, .grid-2-cols, .grid-tarifa {
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .form-group, .grupo-input { width: 100%;min-width:0 }

    /* Unidades: Acciones pasan a horizontal abajo */
    .unidad-item { flex-direction: column; }
    .acciones-vertical { 
        width: 100%; 
        flex-direction: row; 
        margin-top: 15px; 
        min-width: auto;
    }
    .btn-accion { flex: 1; }

    /* Tarifas: Acciones en fila */
    .col-acciones {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 15px;
    }

    /* Footer de botones fijos */
    .footer-actions {
        padding: 15px;
        gap: 10px;
        bottom: 10px;
    }
    .btn-guardar, .btn-cancelar { padding: 12px 15px; flex: 1; text-align: center; }
    .grid-tarifa {grid-template-columns: 1fr;}
        .p-opciones {
        width: 300px;
    }
    .p-opciones ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .full-width { grid-column: 1; }
    .alerta-error{display:block}
    .sa-cirilo-card{display:block}
    .sa-cirilo-stats-global {
    display: block;
    gap: 10px; /* Más espacio entre grupos */
    align-items: flex-start;
}
.sa-cirilo-stat-group {
    display: block;
    flex-direction: column;
    gap: 2px;
}

}
/*registro de accesos*/
.log-container { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; }
    .table-log { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
    .table-log tr { background: #f9f9f9; transition: 0.3s; }
    .table-log tr:hover { background: #f1f1f1; transform: scale(1.002); }
    .table-log td, .table-log th { padding: 12px; border: none; vertical-align: middle; }
    .badge-ip { background: #333; color: #fff; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 0.9em; }
    .status-active { color: #27ae60; font-weight: bold; animation: pulse 2s infinite; }
    @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
    .pagination-custom .page-link { color: #333; border: 1px solid #ddd; margin: 0 2px; border-radius: 4px; }
    .pagination-custom .active .page-link { background: #333; border-color: #333; color: #fff; }
</style>
/* --- RESEÑAS - SCONTENEDOR DE LA LISTA --- */
.lista-resenas {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* El ítem individual */
.resena-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s ease-in-out;
}

.resena-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* --- COLUMNA IZQUIERDA: INFORMACIÓN --- */
.resena-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.resena-info .nombre-user {
    font-size: 15px;
    color: #1e293b;
}

.resena-info .fecha-visita {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}
.resena-info .fecha-visita i {
    margin-right: 4px;
}

/* El bloque de las estrellas */
.calificacion {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    margin-top: 4px;
}
.calificacion img {
    height: 16px; /* Ajustá según el tamaño de tus gifs */
    width: auto;
}

/* --- COLUMNA DERECHA: ACCIONES Y ESTADOS --- */
.acc-res {
    display: flex;
    align-items: center;
}

/* Formulario de confirmación (SI / NO) */
.acciones-pendientes {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.acciones-pendientes span {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-right: 4px;
}

/* Botones SÍ y NO */
.acciones-pendientes a {
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.1s ease;
}

.acciones-pendientes .btn-si {
    background: #22c55e;
    color: #ffffff !important;
}
.acciones-pendientes .btn-si:hover { background: #16a34a; }

.acciones-pendientes .btn-no {
    background: #ef4444;
    color: #ffffff !important;
}
.acciones-pendientes .btn-no:hover { background: #dc2626; }

/* --- TAGS DE ESTADO (Pendiente / Publicado) --- */
.tag {
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tag.pendiente {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.tag.aprobado {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* --- RESPONSIVE PARA SMARTPHONES --- */
@media (max-width: 640px) {
    .resena-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .acc-res {
        width: 100%;
    }
    .acciones-pendientes {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .acciones-pendientes span {
        width: 100%;
        margin-bottom: 4px;
    }
    .acciones-pendientes a {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
}