/* Importar Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Work+Sans:wght@400;500;700&display=swap');

/* Corrección para íconos de Google Material Symbols */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
}

/* Estilo principal del cuerpo */
body {
    background-color: var(--background-light, #fdfaf6);
    /* Textura sutil */
    background-image: url('https://www.transparenttextures.com/patterns/subtle-white-feathers.png');
}

/* Estilo y efecto para las tarjetas del Panel de Control */
.control-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease;
    border: 1px solid #f0e9e0; /* Borde muy sutil inicial */
    cursor: pointer;
    /* Asegura que los elementos internos no rompan el layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Efecto Hover (ratón) y Active (toque en celular) */
.control-card:hover, .control-card:active {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 168, 150, 0.1), 0 4px 6px -4px rgba(0, 168, 150, 0.1);
    border-color: #00a896; /* Borde verde al interactuar */
}

/* Ajuste para scrollbars en móviles si fuera necesario */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #999;
}