/* =====================================================================
 * app-modern.css — modernización de las vistas internas (panel/editor)
 * Editor de biolink, link settings, QR codes, analytics.
 * Estética coherente con la landing: esquinas suaves, sombras suaves,
 * inputs limpios, botones pill, micro-interacciones. Sin tocar el HTML.
 * ===================================================================== */

:root {
    --am-radius: 16px;
    --am-radius-sm: 12px;
    --am-shadow: 0 2px 12px rgba(16, 24, 40, 0.06);
    --am-shadow-hover: 0 8px 28px rgba(16, 24, 40, 0.12);
    --am-border: 1px solid rgba(16, 24, 40, 0.07);
    --am-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --am-primary: #FF9900;
    --am-primary-blue: #146EB4;
}

/* ---- Cards del panel: más redondeadas, sombra suave, borde sutil ---- */
.app-container .card,
.app .card {
    border-radius: var(--am-radius) !important;
    border: var(--am-border) !important;
    box-shadow: var(--am-shadow) !important;
    transition: box-shadow 0.3s var(--am-ease), transform 0.3s var(--am-ease);
}
.app-container .card:hover { box-shadow: var(--am-shadow-hover) !important; }

/* ---- Filas de bloques del editor (Avatar, Divider, links...) ---- */
/* cada bloque es una card; le damos hover lift y handle más claro */
.app-container [data-biolink-block-id],
.app-container .biolink-block,
.app-container .sortable-item {
    border-radius: var(--am-radius-sm) !important;
    transition: transform 0.25s var(--am-ease), box-shadow 0.25s var(--am-ease);
}
.app-container [data-biolink-block-id]:hover,
.app-container .biolink-block:hover {
    transform: translateX(2px);
    box-shadow: var(--am-shadow-hover) !important;
}

/* ---- Inputs y selects: limpios y con focus de color ---- */
.app-container .form-control,
.app-container .custom-select,
.app .form-control {
    border-radius: var(--am-radius-sm) !important;
    border: 1.5px solid rgba(16, 24, 40, 0.10) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.app-container .form-control:focus,
.app .form-control:focus {
    border-color: var(--am-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.15) !important;
}

/* ---- Botones: pill, con micro-interacción ---- */
.app-container .btn,
.app .btn {
    border-radius: 999px !important;
    font-weight: 600;
    transition: transform 0.2s var(--am-ease), box-shadow 0.2s var(--am-ease), filter 0.2s ease;
}
.app-container .btn:hover,
.app .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.14);
    filter: brightness(1.02);
}
.app-container .btn-primary { background: linear-gradient(135deg, var(--am-primary), #FF7700) !important; border: none !important; }

/* "Add block" y botones de acción: que destaquen */
.app-container .btn-success,
.app-container a[href*="add"] .btn { background: linear-gradient(135deg, #10b981, #059669) !important; border: none !important; }

/* ---- Botones secundarios tipo "Pixels / Temporary URL / Protection" ---- */
/* (esos rectángulos grises) → cards suaves con hover */
.app-container .btn-block.btn-light,
.app-container .btn-block[class*="secondary"] {
    background: #f6f8fb !important;
    border: var(--am-border) !important;
    border-radius: var(--am-radius-sm) !important;
    padding: 0.85rem !important;
    text-align: center;
    font-weight: 600;
}
.app-container .btn-block.btn-light:hover { background: #eef2f7 !important; }

/* ---- Toggles/switches: color de marca ---- */
.app-container .custom-control-input:checked ~ .custom-control-label::before,
.app-container input:checked + .slider,
.app-container .toggle.on {
    background: var(--am-primary) !important;
    border-color: var(--am-primary) !important;
}

/* ---- Iconos circulares de los bloques (avatar morado, divider verde...) ---- */
/* mantienen su color pero con un poco de glow al hover de la fila */
.app-container [data-biolink-block-id]:hover .rounded-circle,
.app-container .biolink-block:hover .rounded-circle {
    box-shadow: 0 0 0 4px rgba(255, 153, 0, 0.10);
}

/* ---- Títulos de página: más peso y aire ---- */
.app-container h1, .app-container .h1 { font-weight: 800; letter-spacing: -0.01em; }

/* ---- QR codes list: cards con hover y QR redondeado ---- */
.app-container img[src*="qr"],
.app-container .qr-code img { border-radius: 10px; }

/* ---- Tablas de analytics (Countries/Devices): filas con hover ---- */
.app-container .table tbody tr { transition: background 0.15s ease; }
.app-container .table tbody tr:hover { background: rgba(255, 153, 0, 0.04); }

/* ---- Barras de progreso (analytics %) → redondeadas con gradiente ---- */
.app-container .progress { border-radius: 999px !important; height: 8px !important; background: #eef2f7; }
.app-container .progress-bar {
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--am-primary), var(--am-primary-blue)) !important;
}

/* ---- Breadcrumb (Links > Link Settings): más sutil ---- */
.app-container .breadcrumb { background: transparent !important; padding-left: 0; }

/* ---- MODO OSCURO: fondos claros fijos → tonos oscuros legibles ---- */
[data-theme-style="dark"] .app-container .btn-block.btn-light,
[data-theme-style="dark"] .app-container .btn-block[class*="secondary"] {
    background: #2a2f37 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e6e8eb !important;
}
[data-theme-style="dark"] .app-container .btn-block.btn-light:hover { background: #333942 !important; }
[data-theme-style="dark"] .app-container .progress { background: #2a2f37; }
[data-theme-style="dark"] .app-container .form-control,
[data-theme-style="dark"] .app .form-control {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---- Accesibilidad ---- */
@media (prefers-reduced-motion: reduce) {
    .app-container *, .app * { transition: none !important; animation: none !important; }
}