/* =========================================
   MAYAB SELECT — ESTÉTICA "PIEDRA CALIZA" (CSS GLOBAL)
   -----------------------------------------
   Paleta única basada en tonos de piedra caliza (la misma piedra de las
   ruinas mayas de la región). Todo el sitio toma sus colores de las
   variables de abajo y de las clases utilitarias que le siguen — para
   cambiar el tono del sitio completo, se edita solo esta sección.
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@600;700&family=Inter:wght@400;600;700&display=swap');

:root {
    /* Escala de piedra caliza, de más clara a más oscura */
    --stone-50:  #F6F0E4;   /* crema pálido — texto principal sobre fondo oscuro */
    --stone-100: #ECE0C9;   /* piedra clara — bordes, resplandor de foco */
    --stone-300: #D4C09A;   /* piedra media — acentos, links, etiquetas */
    --stone-500: #B29A6C;   /* piedra caliza "core" — usar con moderación */
    --stone-700: #6B5A3E;   /* piedra oscura — divisores secundarios */
    --stone-900: #2C2418;   /* sombra de piedra — base de los paneles glass */
    --stone-950: #1A1510;   /* casi negro cálido — velo de fondo, sombras */

    /* Colores semánticos, entonados para no romper la paleta cálida */
    --clay-danger:  #C1694B; /* terracota — error / suspendido */
    --sage-success: #7E9471; /* salvia — éxito / activo */
    --gold-warning: #C9A227; /* ocre — pendiente / advertencia */
    --slate-info:   #7E93A6; /* pizarra suave — informativo / rol de agente */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

/* Clase exclusiva para el nombre de la marca */
.font-brand {
    font-family: 'IBM Plex Mono', monospace !important;
    text-transform: uppercase !important;
}

/* =========================================
   FONDO GENERAL
   Velo de piedra caliza oscura, translúcido, para que las fotos de
   fondo se sigan apreciando (antes era un velo negro casi opaco).
   ========================================= */
body {
    background:
        linear-gradient(180deg, rgba(26, 21, 16, 0.55) 0%, rgba(26, 21, 16, 0.72) 100%),
        url('background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--stone-50);
    min-height: 100vh;
}

/* =========================================
   SUPERFICIES — tarjetas, campos y botones "glass"
   ========================================= */

/* Tarjeta / Formulario en cristal de piedra caliza */
.card-glass {
    background: rgba(38, 31, 21, 0.58) !important;
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    border: 1px solid rgba(236, 224, 201, 0.18) !important;
    box-shadow: 0 25px 50px -12px rgba(26, 21, 16, 0.65);
}

/* Panel "hundido" dentro de una tarjeta (cajas de código SKU, thead de tablas, etc.) */
.surface-sunken {
    background: rgba(26, 21, 16, 0.35) !important;
    border: 1px solid rgba(236, 224, 201, 0.12) !important;
}

/* Campos e inputs translúcidos */
.input-glass {
    background: rgba(246, 240, 228, 0.08) !important;
    border: 1px solid rgba(236, 224, 201, 0.22) !important;
    color: var(--stone-50) !important;
}

.input-glass::placeholder {
    color: rgba(246, 240, 228, 0.42) !important;
}

.input-glass:focus {
    border-color: rgba(212, 192, 154, 0.75) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(212, 192, 154, 0.18) !important;
}

/* Opciones del desplegable (Select) */
.input-glass option {
    background-color: var(--stone-950);
    color: var(--stone-50);
}

/* Botón principal — estética blanca cálida, como pide la marca */
.btn-glass-primary {
    background: rgba(246, 240, 228, 0.94) !important;
    color: var(--stone-950) !important;
    font-weight: 700;
    transition: all 0.2s ease;
}

.btn-glass-primary:hover {
    background: var(--stone-50) !important;
    box-shadow: 0 0 18px rgba(212, 192, 154, 0.35);
}

/* Botón secundario translúcido */
.btn-glass-translucent {
    background: rgba(246, 240, 228, 0.10) !important;
    border: 1px solid rgba(236, 224, 201, 0.28) !important;
    color: var(--stone-50) !important;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.btn-glass-translucent:hover {
    background: rgba(246, 240, 228, 0.18) !important;
    border-color: rgba(236, 224, 201, 0.45) !important;
}

/* Chip pequeño (ej. "Editar" en la tabla de usuarios) */
.chip {
    background: rgba(246, 240, 228, 0.10);
    border: 1px solid rgba(236, 224, 201, 0.18);
    color: var(--stone-50);
    transition: all 0.2s ease;
}

.chip:hover {
    background: rgba(246, 240, 228, 0.18);
}

/* Fila de tabla con hover sutil */
.row-hover:hover {
    background: rgba(246, 240, 228, 0.05);
}

/* =========================================
   TIPOGRAFÍA — reemplaza los text-gray-*/text-white sueltos
   ========================================= */
.text-stone       { color: var(--stone-50) !important; }              /* títulos, igual que antes text-white */
.text-stone-soft  { color: rgba(246, 240, 228, 0.82) !important; }     /* texto secundario de mayor contraste */
.text-stone-muted { color: rgba(246, 240, 228, 0.60) !important; }     /* etiquetas, texto secundario */
.text-stone-faint { color: rgba(246, 240, 228, 0.40) !important; }     /* texto terciario / ayuda */
.text-accent      { color: var(--stone-300) !important; }              /* acentos, antes era ámbar */

.link-quiet {
    color: rgba(246, 240, 228, 0.60);
    transition: color 0.2s ease;
}
.link-quiet:hover {
    color: var(--stone-50);
}

/* Divisores y bordes sutiles */
.divider { border-color: rgba(236, 224, 201, 0.14) !important; }

/* Tarjetas de números rápidos (dashboard.php) */
.stat-tile {
    background: rgba(26, 21, 16, 0.35);
    border: 1px solid rgba(236, 224, 201, 0.14);
    border-radius: 0.75rem;
    padding: 0.85rem 0.25rem;
    text-align: center;
}
.stat-num {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}
.stat-label {
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0.25rem 0 0;
}

/* =========================================
   ESTADOS SEMÁNTICOS — mismos matices en todo el sitio
   ========================================= */
.text-success { color: #9DBB8E !important; }
.text-danger  { color: #D98F76 !important; }
.text-warning { color: #DDC15D !important; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.badge-admin   { background: rgba(212, 192, 154, 0.16); color: var(--stone-300); border-color: rgba(212, 192, 154, 0.35); }
.badge-agente  { background: rgba(126, 147, 166, 0.16); color: #A9C0D1; border-color: rgba(126, 147, 166, 0.35); }
.badge-success { background: rgba(126, 148, 113, 0.18); color: #B9CBAE; border-color: rgba(126, 148, 113, 0.40); }
.badge-danger  { background: rgba(193, 105, 75, 0.18);  color: #E3AE9B; border-color: rgba(193, 105, 75, 0.40); }
.badge-warning { background: rgba(201, 162, 39, 0.18);  color: #E4C769; border-color: rgba(201, 162, 39, 0.40); }

/* Estatus de propiedad (catalogo.php / editar_propiedad.php) */
.badge-disponible { background: rgba(126, 148, 113, 0.18); color: #B9CBAE; border-color: rgba(126, 148, 113, 0.40); }
.badge-apartada    { background: rgba(201, 162, 39, 0.18);  color: #E4C769; border-color: rgba(201, 162, 39, 0.40); }
.badge-vendida     { background: rgba(212, 192, 154, 0.16); color: var(--stone-300); border-color: rgba(212, 192, 154, 0.35); }
.badge-rentada     { background: rgba(126, 147, 166, 0.16); color: #A9C0D1; border-color: rgba(126, 147, 166, 0.35); }

.btn-chip-danger  { background: rgba(193, 105, 75, 0.16); color: #EFC3B2; transition: background 0.2s ease; }
.btn-chip-danger:hover  { background: rgba(193, 105, 75, 0.32); }
.btn-chip-success { background: rgba(126, 148, 113, 0.16); color: #D2E1C6; transition: background 0.2s ease; }
.btn-chip-success:hover { background: rgba(126, 148, 113, 0.32); }

.icon-circle-success {
    background: rgba(126, 148, 113, 0.18);
    border: 1px solid rgba(126, 148, 113, 0.40);
}

.alert {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
}
.alert-danger  { background: rgba(193, 105, 75, 0.16);  border-color: rgba(193, 105, 75, 0.40);  color: #F0C7B7; }
.alert-success { background: rgba(126, 148, 113, 0.16); border-color: rgba(126, 148, 113, 0.40); color: #D7E4CC; }

/* Scrollbar sutil en tono piedra */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(26, 21, 16, 0.35);
}
::-webkit-scrollbar-thumb {
    background: rgba(212, 192, 154, 0.35);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 192, 154, 0.55);
}