/* =========================================================================
   BLOQUE 1: CORE & BASICS (LOS CIMIENTOS)
   ========================================================================= */

:root {
    /* Paleta Zape Zone */
    --zape-gray: #384043;
    /* Gris Maquidev (Fondo Base) */
    --zape-purple: #9b59b6;
    /* Morado Identidad */
    --zape-yellow: #ffcf00;
    /* Amarillo Identidad */

    /* Colores de Acento (Disruptivos) */
    --acid-green: #ccff00;
    --hot-pink: #ff0055;
    --electric-blue: #3498db;

    /* Neutros */
    --off-white: #f0f0f0;
    /* Blanco Hueso (Textos sobre oscuro) */
    --pure-white: #ffffff;
    /* Blanco Puro (Fondos de tarjetas) */
    --black: #000000;
    /* Negro Puro (Bordes y Sombras) */
    --dark-text: #222222;
    /* Texto Oscuro (Para leer sobre blanco) */
}

/* Reset Básico */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--zape-gray);
    font-family: 'Space Mono', monospace;
    /* Fuente técnica para lectura */
    color: var(--off-white);
    overflow-x: hidden;
    /* Evita scroll horizontal accidental */
    line-height: 1.6;
}

/* --- TIPOGRAFÍA --- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Syne', sans-serif;
    /* Fuente artística para títulos */
    text-transform: uppercase;
    line-height: 0.9;
    margin: 0;
    font-weight: 800;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- UTILIDADES GLOBALES --- */

/* Efecto de TV Vieja / Ruido (Textura de fondo) */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
    /* Sutil */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Scrollbar Personalizado (Estilo Cyberpunk) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--black);
}

::-webkit-scrollbar-thumb {
    background: var(--zape-purple);
    border: 2px solid var(--black);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--acid-green);
}

/* =========================================================================
   BLOQUE 2: UI COMPONENTS (LOS LADRILLOS)
   ========================================================================= */

/* --- BOTONES BRUTALES --- */
.btn-brutal {
    display: inline-block;
    background-color: var(--zape-yellow);
    color: var(--black);
    padding: 15px 40px;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    text-decoration: none;
    text-transform: uppercase;
    border: 3px solid var(--black);
    box-shadow: 6px 6px 0px var(--black);
    /* Sombra dura */
    transition: all 0.1s ease;
    cursor: pointer;
    text-align: center;
}

.btn-brutal:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px var(--black);
    background-color: var(--acid-green);
}

.btn-brutal:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px var(--black);
}

/* Variaciones de Botones */
.btn-brutal.small {
    font-size: 1rem;
    padding: 10px 25px;
    box-shadow: 4px 4px 0px var(--black);
}

.btn-brutal.outline {
    background: transparent;
    color: var(--black);
    box-shadow: none;
}

.btn-brutal.outline:hover {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: none;
    transform: none;
}

.btn-brutal.full-width {
    width: 100%;
}

/* Botones Mini (Dashboard) */
.btn-mini {
    background: var(--black);
    color: var(--pure-white);
    border: none;
    padding: 8px 15px;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
}

.btn-mini:hover {
    background: var(--acid-green);
    color: var(--black);
}

.btn-tiny {
    background: var(--black);
    color: var(--pure-white);
    border: none;
    padding: 2px 8px;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    cursor: pointer;
}

.btn-tiny:hover {
    background: var(--zape-purple);
}

/* --- FORMULARIOS (INPUTS & SELECTS) --- */
.zape-input-group {
    margin-bottom: 20px;
    position: relative;
}

.zape-input-group label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-weight: bold;
    color: var(--black);
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.zape-input-group input,
.zape-select-brutal,
.zape-input,
.zape-select {
    width: 100%;
    padding: 15px;
    background: var(--pure-white);
    border: 2px solid var(--black);
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    color: var(--black);
    outline: none;
    transition: all 0.2s;
}

/* Estilo específico para Selects (Flecha custom) */
.zape-select-brutal,
.zape-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}

.zape-input-group input:focus,
.zape-select-brutal:focus {
    background: var(--black);
    color: var(--acid-green);
    border-color: var(--acid-green);
}

/* Toggle Password (Ojito) */
.toggle-btn {
    position: absolute;
    right: 15px;
    top: 42px;
    cursor: pointer;
    color: var(--black);
    opacity: 0.6;
    z-index: 5;
}

.toggle-btn:hover {
    opacity: 1;
    color: var(--zape-purple);
}

/* Checkbox Brutal (Para Modales y Forms) */
.brutal-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    color: var(--black);
    user-select: none;
}

.brutal-checkbox input {
    display: none;
}

.brutal-checkbox .box {
    font-weight: bold;
    color: var(--zape-purple);
    font-size: 1.2rem;
}

.brutal-checkbox input:checked~.box {
    color: var(--black);
}

/* --- ALERTAS (FLASH MESSAGES) --- */
.zape-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    padding: 15px 25px;
    border: 3px solid var(--black);
    font-family: 'Space Mono', monospace;
    font-weight: bold;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 90%;
    background-color: var(--pure-white);
    color: var(--black);
}

.zape-alert.success {
    background-color: var(--acid-green);
}

.zape-alert.error {
    background-color: var(--hot-pink);
    color: var(--pure-white);
}

.zape-alert button {
    background: transparent;
    border: none;
    font-weight: 900;
    font-size: 1.2rem;
    cursor: pointer;
    color: inherit;
    margin-left: 10px;
}

.error-msg {
    color: var(--hot-pink);
    font-weight: bold;
    font-size: 0.9rem;
    margin-top: -10px;
    margin-bottom: 15px;
    background: #ffe6e6;
    padding: 5px 10px;
    border: 1px solid var(--hot-pink);
    display: none;
    /* Oculto por defecto */
}

/* --- MODALES (VENTANAS EMERGENTES) --- */
.zape-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.zape-modal-window {
    background: var(--off-white);
    border: 4px solid var(--black);
    width: 100%;
    max-width: 500px;
    box-shadow: 15px 15px 0px var(--zape-yellow);
}

.modal-header {
    background: var(--black);
    color: var(--zape-yellow);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-size: 1.5rem;
    margin: 0;
}

.close-modal {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: bold;
}

/* =========================================================================
   BLOQUE 3: LANDING PAGE (LA PORTADA)
   ========================================================================= */

/* 1. HERO SECTION */
.zape-hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
}

/* Fondo degradado loco */
.zape-hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, var(--zape-purple) 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, var(--hot-pink) 0%, transparent 40%);
    filter: blur(80px);
    opacity: 0.6;
    z-index: 0;
}

.hero-container {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 1200px;
}

.big-title {
    font-size: clamp(4rem, 15vw, 12rem);
    /* Responsivo gigante */
    font-weight: 800;
    color: var(--zape-purple);
    /* Morado Zape */
    text-shadow: 5px 5px 0px var(--black);
    position: relative;
    mix-blend-mode: normal;
    line-height: 0.85;
}

.big-title span {
    display: block;
    color: var(--zape-yellow);
    /* Amarillo Zape */
    -webkit-text-stroke: 2px var(--black);
}

.hero-tagline {
    font-size: 1.2rem;
    background: var(--black);
    color: var(--off-white);
    display: inline-block;
    padding: 10px 20px;
    transform: rotate(-2deg);
    margin: 20px 0 40px 0;
    border: 1px solid var(--off-white);
}

/* Stickers Flotantes */
.sticker {
    position: absolute;
    z-index: 5;
    filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.5));
    animation: float 6s ease-in-out infinite;
}

.s-1 {
    top: 10%;
    left: 5%;
    transform: rotate(-15deg);
    width: 150px;
}

.s-2 {
    bottom: 20%;
    right: 10%;
    transform: rotate(10deg);
    width: 180px;
    animation-delay: 1s;
}

.s-3 {
    top: 20%;
    right: 15%;
    transform: rotate(5deg);
    width: 100px;
    animation-delay: 2s;
}

/* 2. MARQUEE (CINTA EN MOVIMIENTO) */
.marquee-strip {
    background: var(--acid-green);
    color: var(--black);
    padding: 15px 0;
    border-top: 3px solid var(--black);
    border-bottom: 3px solid var(--black);
    overflow: hidden;
    white-space: nowrap;
    transform: rotate(-1deg) scale(1.05);
    position: relative;
    z-index: 20;
}

.marquee-content {
    display: inline-block;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    animation: scroll 20s linear infinite;
}

/* 3. SPLIT ZONE (COMERCIO VS CREADOR) */
.split-zone {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
}

.split-side {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border: 3px solid var(--black);
    transition: all 0.3s;
}

.side-business {
    background-color: var(--off-white);
    color: var(--black);
}

.side-creator {
    background-color: var(--zape-purple);
    color: var(--zape-yellow);
}

.side-title {
    font-size: 4rem;
    margin-bottom: 20px;
}

.side-desc {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 400px;
    line-height: 1.4;
}

.split-side:hover {
    z-index: 10;
    transform: scale(1.02);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

/* 4. FOOTER SIMPLE */
footer {
    background: var(--black);
    color: var(--off-white);
    padding: 40px;
    text-align: center;
    border-top: 5px solid var(--hot-pink);
}

/* =========================================================================
   BLOQUE 4: NAVEGACIÓN & AUTH (EL ACCESO)
   ========================================================================= */

/* --- NAVBAR SUPERIOR (TOP BAR) --- */
.zape-nav-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    pointer-events: none;
    /* Permite clicks a través del fondo transparente */
}

.zape-nav-top a,
.zape-nav-top button {
    pointer-events: auto;
    /* Reactiva clicks en los botones */
}

.nav-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.nav-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--off-white);
    margin-right: 10px;
    text-transform: uppercase;
    display: none;
    /* Oculto en móvil */
}

/* Botones Pequeños de Navegación */
.btn-zape-small {
    text-decoration: none;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 8px 15px;
    border: 2px solid var(--off-white);
    text-transform: uppercase;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-zape-small.black {
    background: var(--black);
    color: var(--off-white);
}

.btn-zape-small.purple {
    background: var(--zape-purple);
    color: var(--pure-white);
    border-color: var(--zape-purple);
}

.btn-zape-small.yellow {
    background: var(--zape-yellow);
    color: var(--black);
    border-color: var(--zape-yellow);
}

.btn-zape-small:hover {
    transform: translateY(-3px);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
}

/* --- AUTH CARDS (LOGIN & REGISTRO) --- */
.zape-auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 20px;
}

/* Formas flotantes de fondo */
.floating-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: var(--zape-purple);
    top: -50px;
    right: -50px;
    opacity: 0.4;
}

.shape-2 {
    width: 400px;
    height: 400px;
    background: var(--zape-yellow);
    bottom: -100px;
    left: -100px;
    opacity: 0.3;
}

/* La Tarjeta Principal */
.zape-auth-card {
    background: var(--off-white);
    border: 4px solid var(--black);
    padding: 40px;
    width: 100%;
    max-width: 450px;
    position: relative;
    z-index: 10;
    box-shadow: 15px 15px 0px var(--zape-purple);
    /* Sombra sólida morada */
}

.register-card {
    max-width: 600px;
    /* Más ancha para el registro */
}

/* Header del Formulario */
.auth-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px dashed var(--black);
    padding-bottom: 20px;
}

.auth-title {
    font-size: 3.5rem;
    color: var(--zape-purple);
    margin: 0;
    line-height: 0.8;
}

.auth-title span {
    color: var(--zape-yellow);
    -webkit-text-stroke: 1px var(--black);
}

.auth-subtitle {
    font-family: 'Space Mono', monospace;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--black);
    margin-top: 10px;
    background: var(--acid-green);
    display: inline-block;
    padding: 2px 10px;
}

/* Tornillos decorativos */
.screw {
    position: absolute;
    font-family: sans-serif;
    font-weight: bold;
    color: #aaa;
    font-size: 1.2rem;
    user-select: none;
}

.tl {
    top: 10px;
    left: 10px;
}

.tr {
    top: 10px;
    right: 10px;
}

.bl {
    bottom: 10px;
    left: 10px;
}

.br {
    bottom: 10px;
    right: 10px;
}

/* Footer del Form */
.auth-footer {
    margin-top: 25px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--black);
}

.auth-footer a {
    color: var(--black);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid var(--zape-purple);
}

.auth-footer a:hover {
    background: var(--zape-purple);
    color: var(--pure-white);
}

.divider {
    margin: 0 10px;
    color: #ccc;
}

/* --- BARRA DE PROGRESO (WIZARD) --- */
.progress-bar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.progress-step {
    width: 30px;
    height: 30px;
    background: #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--pure-white);
    border: 2px solid var(--black);
    z-index: 2;
}

.progress-step.active {
    background: var(--zape-yellow);
    color: var(--black);
}

.progress-line {
    width: 50px;
    height: 4px;
    background: #ccc;
    margin: 0 -5px;
    z-index: 1;
}

/* Pasos del Formulario */
.form-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.form-step.active {
    display: block;
}

.step-title {
    font-size: 1.5rem;
    color: var(--black);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--acid-green);
    display: inline-block;
}

/* Botones de Navegación del Form */
.form-actions {
    margin-top: 30px;
}

.form-actions.right {
    text-align: right;
}

.form-actions.split {
    display: flex;
    justify-content: space-between;
}

/* =========================================================================
   BLOQUE 5: CATÁLOGO / FEED (EL MERCADO)
   ========================================================================= */

/* --- HEADER FLOTANTE (STICKY) --- */
.zape-sticky-header {
    position: sticky;
    top: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 20px;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--acid-green);
}

.logo-mini {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--zape-purple);
}

.logo-mini span {
    color: var(--zape-yellow);
}

.auth-buttons {
    display: flex;
    gap: 10px;
}

.btn-auth {
    text-decoration: none;
    font-weight: 800;
    font-family: 'Syne', sans-serif;
    text-transform: uppercase;
    padding: 8px 20px;
    border: 2px solid var(--off-white);
    color: var(--off-white);
    transition: all 0.2s;
    font-size: 0.9rem;
}

.btn-auth.register {
    background-color: var(--zape-yellow);
    color: var(--black);
    border-color: var(--zape-yellow);
}

.btn-auth:hover {
    transform: translateY(-2px);
}

/* --- LAYOUT PRINCIPAL (GRID) --- */
.zape-layout-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 280px 1fr;
    /* Sidebar fijo | Contenido flexible */
    gap: 40px;
    align-items: start;
}

.zape-feed-content {
    width: 100%;
}

.feed-title {
    font-size: 3rem;
    margin: 40px 0;
    text-align: left;
    color: var(--off-white);
    line-height: 1;
}

.feed-title span {
    color: var(--hot-pink);
}

/* --- SIDEBAR DE FILTROS --- */
.zape-sidebar {
    position: sticky;
    top: 90px;
    /* Debajo del header */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-box {
    background: var(--black);
    border: 2px solid var(--off-white);
    padding: 20px;
    color: var(--off-white);
    box-shadow: 4px 4px 0px var(--zape-purple);
}

.sidebar-box h3 {
    font-size: 1rem;
    margin-bottom: 15px;
    color: var(--zape-yellow);
    border-bottom: 1px dashed #555;
    padding-bottom: 5px;
}

/* Filtros UI */
.filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-list li {
    margin-bottom: 8px;
}

.filter-list label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-family: 'Space Mono', monospace;
}

.filter-list input[type="checkbox"] {
    accent-color: var(--hot-pink);
    width: 16px;
    height: 16px;
}

.range-selector {
    display: flex;
    gap: 5px;
}

.range-btn {
    flex: 1;
    background: #222;
    border: 1px solid #555;
    color: white;
    padding: 5px;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
}

.range-btn:hover {
    background: var(--acid-green);
    color: var(--black);
}

/* --- TARJETA DE TALENTO (CARD) --- */
.talents-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.talent-card {
    background-color: var(--off-white);
    color: var(--black);
    text-decoration: none;
    border: 3px solid var(--black);
    box-shadow: 8px 8px 0px var(--black);
    transition: transform 0.2s;
    display: flex;
    overflow: hidden;
    height: auto;
    min-height: 280px;
    align-items: stretch;
}

.talent-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0px var(--zape-purple);
}

/* Bordes de Rango */
.rank-quasar {
    border-color: var(--zape-yellow);
}

.rank-supernova {
    border-color: var(--hot-pink);
}

.rank-star {
    border-color: var(--acid-green);
}

/* Video Vertical (Izquierda) */
.card-visual.vertical-mode {
    width: 160px;
    /* Ancho fijo desktop */
    flex-shrink: 0;
    border-right: 3px solid var(--black);
    position: relative;
    background: var(--black);
}

.video-loop {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rank-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--black);
    color: var(--zape-yellow);
    padding: 5px 10px;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.play-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: white;
    font-size: 1.2rem;
    opacity: 0.8;
}

/* Info (Derecha) */
.card-info {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.info-header {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 10px;
}

.profile-pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--black);
}

.name-box h2 {
    font-size: 1.2rem;
    margin: 0;
}

.category-tag {
    font-size: 0.8rem;
    background: #ddd;
    padding: 2px 8px;
    border-radius: 4px;
}

.verified {
    color: var(--electric-blue);
}

.bio-short {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.4;
}

.info-bottom {
    border-top: 1px dashed #ccc;
    padding-top: 15px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.stats-row {
    display: flex;
    gap: 15px;
    font-weight: bold;
    font-size: 0.9rem;
}

.price-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.price-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #777;
    font-weight: bold;
}

.price-tag {
    background: var(--acid-green);
    padding: 5px 10px;
    border: 2px solid var(--black);
    font-weight: bold;
}

.card-cta {
    font-weight: bold;
    color: var(--zape-purple);
    text-transform: uppercase;
}

/* =========================================================================
   BLOQUE 6: PERFIL PÚBLICO (EL CURRÍCULUM)
   ========================================================================= */

/* Botón Volver Flotante */
.back-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 200;
    background: var(--black);
    color: var(--pure-white);
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Space Mono', monospace;
    border: 2px solid var(--pure-white);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
}

/* Contenedor Principal del Perfil */
.profile-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--off-white);
    /* Fondo claro para el contenido */
    min-height: 100vh;
    border-left: 3px solid var(--black);
    border-right: 3px solid var(--black);
    color: var(--dark-text);
    /* Texto oscuro forzado para legibilidad */
}

/* --- HEADER DEL PERFIL --- */
.profile-header {
    position: relative;
    text-align: center;
    padding-bottom: 30px;
    border-bottom: 3px solid var(--black);
    background-color: var(--pure-white);
}

.cover-bg {
    height: 250px;
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--black);
    background-color: #333;
    /* Fallback */
}

.profile-identity {
    margin-top: -75px;
    /* Subir para solapar con la portada */
    position: relative;
    z-index: 2;
}

.pic-container {
    width: 150px;
    height: 150px;
    margin: 0 auto 15px auto;
    position: relative;
}

.pic-container img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--off-white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    object-fit: cover;
}

.crown {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    animation: float 3s ease-in-out infinite;
}

.profile-header h1 {
    font-size: 3rem;
    color: var(--black);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.badges {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.badges span {
    background: var(--black);
    color: var(--pure-white);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-family: 'Space Mono', monospace;
    font-weight: bold;
}

.badges .rank-tag {
    color: var(--zape-yellow);
}

/* --- CUERPO DEL PERFIL (GRID) --- */
.profile-body {
    display: grid;
    grid-template-columns: 300px 1fr;
    /* Sidebar fijo | Contenido fluido */
    align-items: start;
}

/* COLUMNA IZQUIERDA (SIDEBAR) */
.profile-stats-box {
    padding: 30px;
    background: #e0e0e0;
    /* Gris claro */
    border-right: 3px solid var(--black);
    height: 100%;
}

.stats-list {
    list-style: none;
    padding: 0;
    font-size: 1rem;
    margin-bottom: 30px;
    background: var(--pure-white);
    border: 2px solid var(--black);
    padding: 15px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.stats-list li {
    border-bottom: 1px dashed #ccc;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
}

.stats-list li:last-child {
    border-bottom: none;
}

.bio-section h4,
.talent-services h4 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--black);
    display: inline-block;
}

.full-bio {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Tickets de Servicio (Menú) */
.talent-services {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.service-ticket {
    background-color: var(--pure-white);
    border: 2px solid var(--black);
    padding: 15px;
    position: relative;
    transition: transform 0.2s;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.service-ticket:hover {
    transform: translateX(5px);
    border-color: var(--zape-purple);
}

.service-ticket.deal-ticket {
    background-color: #fffde7;
    /* Amarillo pálido */
    border-style: dashed;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.ticket-title {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--black);
    line-height: 1.2;
    max-width: 70%;
}

.ticket-price {
    background-color: var(--black);
    color: var(--zape-yellow);
    padding: 2px 6px;
    font-weight: bold;
    font-size: 0.85rem;
    transform: rotate(-2deg);
}

.deal-ticket .ticket-price {
    background-color: var(--hot-pink);
    color: var(--pure-white);
}

.ticket-desc {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.3;
}

.ticket-btn {
    display: block;
    width: 100%;
    text-align: center;
    background-color: transparent;
    border: 2px solid var(--black);
    color: var(--black);
    font-weight: bold;
    font-size: 0.8rem;
    padding: 8px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s;
}

.service-ticket:hover .ticket-btn {
    background-color: var(--black);
    color: var(--pure-white);
}

.btn-hire {
    width: 100%;
    text-align: center;
    font-size: 1rem;
}

/* COLUMNA DERECHA (CONTENIDO PRINCIPAL) */
.profile-main-content {
    padding: 0;
    /* El padding lo manejan las secciones internas */
}

/* Navegación Interna (Pills) */
.profile-inner-nav {
    display: flex;
    gap: 10px;
    padding: 20px 30px;
    background: var(--pure-white);
    border-bottom: 3px solid var(--black);
    overflow-x: auto;
}

.nav-pill {
    background: var(--off-white);
    color: var(--black);
    padding: 8px 20px;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Syne', sans-serif;
    border: 2px solid var(--black);
    white-space: nowrap;
    transition: 0.2s;
    font-size: 0.9rem;
}

.nav-pill.active,
.nav-pill:hover {
    background: var(--zape-purple);
    color: var(--pure-white);
    box-shadow: 4px 4px 0px var(--black);
    transform: translateY(-2px);
}

/* Sección Arsenal (Gear) */
.gear-section {
    background-color: var(--acid-green);
    border-bottom: 3px solid var(--black);
    padding: 30px;
    position: relative;
}

.gear-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--black);
    padding-bottom: 10px;
}

.gear-header h3 {
    font-size: 1.5rem;
    color: var(--black);
    margin: 0;
}

.gear-badge {
    background: var(--black);
    color: var(--acid-green);
    padding: 2px 8px;
    font-weight: bold;
    font-size: 0.8rem;
}

.gear-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.gear-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--black);
}

.gear-icon {
    font-size: 1.5rem;
    color: var(--black);
    min-width: 40px;
    text-align: center;
}

.gear-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.gear-name {
    font-weight: 800;
    color: var(--black);
    font-size: 0.9rem;
}

.gear-type {
    font-size: 0.75rem;
    color: #333;
    font-family: 'Space Mono', monospace;
}

/* Portafolio */
.profile-portfolio {
    padding: 30px;
    background: var(--pure-white);
}

.profile-portfolio h3 {
    color: var(--black);
    margin-bottom: 20px;
    font-size: 1.5rem;
    border-left: 5px solid var(--zape-purple);
    padding-left: 15px;
}

.portfolio-grid-zape {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.portfolio-item-zape {
    position: relative;
    aspect-ratio: 9/16;
    background: var(--black);
    border: 2px solid var(--black);
    overflow: hidden;
    cursor: pointer;
}

.portfolio-item-zape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: opacity 0.3s, transform 0.3s;
}

.portfolio-item-zape:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--pure-white);
    font-size: 2.5rem;
    pointer-events: none;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* --- FEED DE ACTIVIDAD (CORREGIDO) --- */
.profile-feed {
    padding: 30px;
    background: #f9f9f9;
    border-top: 3px solid var(--black);
}

.feed-header {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-dot {
    color: var(--hot-pink);
    animation: blink 2s infinite;
}

.feed-stream {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 650px;
    /* Ancho de lectura cómodo */
}

/* Estilos de los Posts Individuales */
.zape-post {
    background: var(--pure-white);
    /* Fondo blanco puro */
    border: 2px solid var(--black);
    padding: 20px;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.1);
    color: var(--dark-text);
    /* Texto oscuro */
    border-radius: 8px;
}

.post-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.mini-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--black);
}

.post-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.author-name {
    font-weight: 800;
    font-size: 1rem;
    color: var(--black);
}

.post-date {
    font-size: 0.8rem;
    color: #777;
}

.post-content p {
    color: var(--dark-text);
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 1rem;
}

/* Post Producto */
.badge-ad {
    margin-left: auto;
    background: var(--zape-yellow);
    font-size: 0.7rem;
    padding: 4px 8px;
    border: 1px solid var(--black);
    font-weight: bold;
    color: var(--black);
}

.product-card-embed {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;
    display: flex;
    background: #f4f4f4;
}

.product-card-embed img {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.prod-details {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.prod-details h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: var(--black);
}

.prod-price {
    font-weight: bold;
    color: var(--hot-pink);
    font-size: 1.2rem;
}

.btn-buy-demo {
    margin-top: 10px;
    background: var(--black);
    color: var(--pure-white);
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    align-self: flex-start;
}

/* Post Carrusel */
.carousel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.carousel-item {
    height: 200px;
    background-size: cover;
    background-position: center;
}

/* Post Video */
.video-embed-container {
    position: relative;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.video-thumb {
    width: 100%;
    display: block;
    opacity: 0.8;
}

.play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: var(--pure-white);
    opacity: 0.9;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Post Status (Excepción de color) */
.post-status {
    background-color: var(--zape-purple);
    color: var(--pure-white);
    border: none;
}

.post-status .post-content p {
    color: var(--pure-white);
    font-size: 1.2rem;
    font-weight: bold;
}

.status-quote i {
    font-size: 2rem;
    opacity: 0.3;
    color: var(--pure-white);
}

.post-footer-mini {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 10px;
    font-size: 0.85rem;
    opacity: 0.9;
    color: var(--pure-white);
    display: flex;
    justify-content: space-between;
}

/* Post Review */
.post-review {
    border-color: var(--acid-green);
    border-left-width: 6px;
}

.review-stars {
    color: var(--zape-yellow);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.review-text {
    font-style: italic;
    font-weight: 500;
    font-size: 1.1rem;
    color: #444;
}

/* Acciones */
.post-actions {
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 15px;
    display: flex;
    gap: 25px;
    font-size: 1.3rem;
    color: #888;
}

.post-actions i {
    cursor: pointer;
    transition: color 0.2s;
}

.post-actions i:hover {
    color: var(--zape-purple);
}

/* =========================================================================
   BLOQUE 7: DASHBOARD PRIVADO (EL CENTRO DE MANDO)
   ========================================================================= */

.zape-dashboard-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
}

/* --- HEADER DEL DASHBOARD --- */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--black);
    padding: 20px;
    border: 3px solid var(--zape-purple);
    margin-bottom: 40px;
    box-shadow: 10px 10px 0px var(--zape-purple);
    color: var(--pure-white);
}

.user-welcome {
    display: flex;
    gap: 15px;
    align-items: center;
}

.avatar-circle {
    width: 60px;
    height: 60px;
    background: var(--hot-pink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 2rem;
    color: var(--pure-white);
    border: 3px solid var(--pure-white);
    text-transform: uppercase;
}

.user-welcome h2 {
    font-size: 1.5rem;
    margin: 0;
}

.user-welcome p {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    margin: 0;
    opacity: 0.8;
}

/* --- GRID DE TARJETAS SUPERIOR --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.dash-card {
    background: var(--off-white);
    border: 3px solid var(--black);
    padding: 20px;
    color: var(--black);
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}

.dash-card:hover {
    transform: translateY(-2px);
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed var(--black);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.card-top h3 {
    font-size: 1.2rem;
    margin: 0;
    color: var(--black);
}

.icon-bg {
    font-size: 5rem;
    position: absolute;
    right: -10px;
    bottom: -10px;
    opacity: 0.05;
    color: var(--black);
    pointer-events: none;
}

/* Estilos Específicos de Tarjetas */
.big-number {
    font-family: 'Syne', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--acid-green);
    /* Verde dinero */
    -webkit-text-stroke: 1px var(--black);
    line-height: 1;
    margin-bottom: 5px;
}

.status-text {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Badge de Notificaciones */
.badge-count {
    background: var(--hot-pink);
    color: var(--pure-white);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: bold;
    border: 1px solid var(--black);
    font-size: 0.8rem;
}

/* Listas dentro de tarjetas */
.mini-list {
    list-style: none;
    padding: 0;
}

.mini-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    font-size: 0.9rem;
}

.mini-list li:last-child {
    border-bottom: none;
}

/* Lista de Contratos */
.contracts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.contract-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pure-white);
    padding: 10px;
    border: 1px solid var(--black);
    border-radius: 4px;
}

.contract-item i {
    font-size: 1.2rem;
    color: var(--black);
}

.contract-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.contract-info span {
    font-weight: bold;
    font-size: 0.85rem;
}

/* Etiquetas de Estado */
.tag-done {
    color: #27ae60;
    font-size: 0.7rem;
    font-weight: 800;
}

.tag-pending {
    color: var(--hot-pink);
    font-size: 0.7rem;
    font-weight: 800;
    animation: blink 2s infinite;
}

.btn-icon {
    color: var(--black);
    font-size: 1rem;
    padding: 5px;
    border: 1px solid transparent;
    transition: 0.2s;
}

.btn-icon:hover {
    color: var(--zape-purple);
    border-color: var(--zape-purple);
    background: #f9f9f9;
}

/* --- GESTOR DE CONTENIDO (FEED ADMIN) --- */
.content-manager-section {
    border-top: 4px solid var(--off-white);
    padding-top: 40px;
    margin-top: 40px;
}

.manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.manager-header h2 {
    font-size: 2.5rem;
    color: var(--zape-yellow);
    text-shadow: 2px 2px 0px var(--black);
}

.create-btn {
    background: var(--acid-green);
    color: var(--black);
    font-size: 1rem;
    padding: 12px 25px;
    box-shadow: 4px 4px 0px var(--pure-white);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.create-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--pure-white);
    background-color: var(--pure-white);
}

/* Grid de Posts Admin */
.admin-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.admin-post-wrapper {
    background: var(--black);
    /* Marco negro grueso */
    padding: 10px;
    border: 2px solid var(--off-white);
    box-shadow: 8px 8px 0px var(--zape-purple);
}

/* El post dentro del admin se ve un poco más pequeño */
.admin-post-wrapper .zape-post {
    border: none;
    box-shadow: none;
}

/* Barra de Control (Abajo del post) */
.admin-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #555;
}

.stat-group {
    color: var(--off-white);
    font-size: 0.85rem;
    display: flex;
    gap: 15px;
    font-family: 'Space Mono', monospace;
}

.stat-group i {
    color: var(--zape-yellow);
}

.action-group {
    display: flex;
    gap: 5px;
}

.ctrl-btn {
    background: #333;
    border: 1px solid #555;
    color: var(--pure-white);
    width: 35px;
    height: 35px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctrl-btn.reply:hover {
    background: var(--electric-blue);
    border-color: var(--electric-blue);
}

.ctrl-btn.mute:hover {
    background: var(--zape-yellow);
    color: var(--black);
    border-color: var(--zape-yellow);
}

.ctrl-btn.delete:hover {
    background: var(--hot-pink);
    border-color: var(--hot-pink);
}

/* =========================================================================
   ESTILOS DASHBOARD ACTUALIZADOS
   ========================================================================= */

/* Ajuste Header */
.header-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.header-actions {
    display: flex;
    gap: 10px;
}

/* Tarjeta de Perfil (Mini Preview) */
.profile-edit-card {
    border-color: var(--zape-purple);
    /* Borde morado para destacar */
}

.profile-preview-mini {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    background: #eee;
    padding: 10px;
    border: 1px solid var(--black);
}

.mini-loop {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid var(--black);
    background: black;
}

.mini-info {
    display: flex;
    flex-direction: column;
}

.mini-info strong {
    font-size: 1.1rem;
}

.mini-info small {
    color: #666;
    font-family: 'Space Mono';
}

.card-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Estilos del Formulario Modal */
.zape-form-modal {
    padding: 30px;
    max-height: 80vh;
    overflow-y: auto;
    /* Scroll si la pantalla es pequeña */
}

.zape-input-group {
    margin-bottom: 15px;
}

.zape-input-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.85rem;
    color: var(--zape-gray);
}

.zape-input-group input,
.zape-input-group textarea,
.zape-input-group select {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--black);
    background: white;
    font-family: 'Space Mono';
    font-size: 1rem;
}

.zape-input-group textarea {
    resize: vertical;
}

/* Input Deshabilitado (Nombre) */
.zape-input-group.disabled input {
    background-color: #e0e0e0;
    color: #777;
    cursor: not-allowed;
    border-style: dashed;
}

.zape-input-group.disabled small {
    color: var(--hot-pink);
    font-size: 0.75rem;
}

/* Botón Outline en Dashboard */
.btn-mini.outline {
    background: transparent;
    border: 2px solid var(--black);
    color: var(--black);
}

.btn-mini.outline:hover {
    background: var(--black);
    color: var(--acid-green);
}

/* --- INPUT FILE PERSONALIZADO --- */
.input-file-hidden {
    display: none;
    /* Ocultamos el input nativo feo */
}

.btn-upload-brutal {
    display: block;
    width: 100%;
    background-color: var(--black);
    color: var(--zape-yellow);
    border: 2px dashed var(--zape-yellow);
    padding: 15px;
    text-align: center;
    font-family: 'Space Mono';
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}

.btn-upload-brutal:hover {
    background-color: var(--zape-yellow);
    color: var(--black);
    border-style: solid;
}

.btn-upload-brutal i {
    margin-right: 8px;
    font-size: 1.2rem;
}

.file-info {
    margin-top: 8px;
    text-align: center;
    color: #666;
    font-size: 0.8rem;
}

/* --- INPUT FILE PERSONALIZADO --- */
.input-file-hidden {
    display: none;
    /* Ocultamos el input nativo feo */
}

.btn-upload-brutal {
    display: block;
    width: 100%;
    background-color: var(--black);
    color: var(--zape-yellow);
    border: 2px dashed var(--zape-yellow);
    padding: 15px;
    text-align: center;
    font-family: 'Space Mono';
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}

.btn-upload-brutal:hover {
    background-color: var(--zape-yellow);
    color: var(--black);
    border-style: solid;
}

.btn-upload-brutal i {
    margin-right: 8px;
    font-size: 1.2rem;
}

.file-info {
    margin-top: 8px;
    text-align: center;
    color: #666;
    font-size: 0.8rem;
}

/* =========================================================================
   ESTILOS DE PREVISUALIZACIÓN (DASHBOARD)
   ========================================================================= */

/* --- Tarjeta Mini Preview (Dashboard) --- */
.profile-preview-mini {
    border: 2px solid var(--black);
    margin-bottom: 15px;
    background: white;
}

.mini-visual {
    height: 100px;
    background: #333;
    overflow: hidden;
    position: relative;
    border-bottom: 2px solid var(--black);
}

.mini-loop-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.mini-loop-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 2rem;
}

.mini-info-row {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.mini-avatar-container {
    width: 50px;
    height: 50px;
    margin-top: -35px;
    /* Para que suba sobre el video */
    border-radius: 50%;
    border: 3px solid white;
    background: var(--zape-purple);
    z-index: 2;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-avatar-placeholder {
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
}

.mini-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.mini-text strong {
    font-size: 1rem;
    color: var(--black);
}

.mini-text small {
    font-size: 0.8rem;
    color: #777;
}


/* --- Previsualización en el Modal (Formulario) --- */
.current-media-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    background: #eee;
    padding: 5px;
    border: 1px dashed #999;
    width: fit-content;
}

.current-media-preview img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--black);
}

.current-media-preview.wide img {
    width: 80px;
    height: 45px;
    /* Formato video */
    border-radius: 4px;
}

.current-media-preview span {
    font-size: 0.75rem;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
    margin-right: 5px;
}

/* =========================================================================
   TICKER DE NOTICIAS (TRAPEZOIDE BRUTALISTA)
   ========================================================================= */

.ticker-wrapper {
    margin-bottom: 50px;
    padding: 10px 0;
    filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.5));
    /* Sombra al bloque entero */
}

/* La forma verde inclinada */
.ticker-shape {
    background-color: var(--acid-green);
    border-top: 3px solid var(--black);
    border-bottom: 3px solid var(--black);
    transform: skewY(-2deg);
    /* Inclinación: Derecha más alta */
    height: 60px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Oculta lo que sale de la barra */
}

/* Etiqueta estática a la izquierda */
.ticker-label {
    background-color: var(--black);
    color: var(--zape-yellow);
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    padding: 0 25px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    /* Encima del texto que corre */
    transform: skewY(2deg);
    /* Enderezamos el texto */
    border-right: 3px solid var(--off-white);
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
}

/* Contenedor de la animación */
.ticker-track-container {
    width: 100%;
    padding-left: 220px;
    /* Espacio para que no choque con el label */
    transform: skewY(2deg);
    /* Enderezamos el contenido */
}

.ticker-track {
    display: flex;
    gap: 30px;
    width: max-content;
    /* El ancho se ajusta al contenido */
    animation: ticker-scroll 20s linear infinite;
}

/* Las Tarjetas de Noticia */
.ticker-item {
    background-color: var(--off-white);
    color: var(--black);
    border: 2px solid var(--black);
    padding: 5px 15px;
    font-family: 'Space Mono', monospace;
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
}

/* Estilo especial para noticias importantes */
.ticker-item.highlight {
    background-color: var(--zape-purple);
    color: white;
    border-color: white;
}

/* Pausar al pasar el mouse */
.ticker-track:hover {
    animation-play-state: paused;
}

/* Estilo del botón dentro del Ticker */
.ticker-link {
    margin-left: 12px;
    background-color: var(--black);
    color: var(--acid-green);
    /* Alto contraste */
    text-decoration: none;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 900;
    border: 1px solid var(--black);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
    /* Sombra dura pequeña */
    display: inline-block;
    transition: all 0.2s ease;
}

.ticker-link:hover {
    transform: translate(-2px, -2px);
    /* Se levanta al pasar el mouse */
    box-shadow: 4px 4px 0px var(--zape-purple);
    /* Sombra morada al hover */
    color: #ffffff;
}

/* Ajuste para cuando el ticker item es morado (highlight) */
.ticker-item.highlight .ticker-link {
    background-color: var(--zape-yellow);
    color: var(--black);
    border-color: white;
}

/* =========================================================================
   ESTILOS DEL MODAL DE PERFIL (AVANZADO)
   ========================================================================= */

.zape-form-modal {
    padding: 30px;
    max-height: 80vh;
    /* Evita que se salga de pantalla en laptops */
    overflow-y: auto;
    /* Scroll interno si es muy largo */
}

/* Input Deshabilitado */
.zape-input-group.disabled input {
    background-color: #e0e0e0;
    color: #777;
    cursor: not-allowed;
    border-style: dashed;
}

.zape-input-group small {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 0.8rem;
}

/* Fila de Medios (Uploaders) */
.media-upload-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    /* Foto cuadrada | Video rectangular */
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px dashed #ccc;
}

.media-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.media-col label {
    font-weight: bold;
    font-size: 0.8rem;
    color: var(--black);
}

/* Previsualizaciones */
.current-preview {
    border: 2px solid var(--black);
    background: #000;
    overflow: hidden;
}

.preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zape-purple);
    color: white;
    font-size: 2rem;
    font-weight: bold;
}

/* Tamaños específicos */
.current-preview .square {
    height: 100px;
    width: 100px;
}

.current-preview .rect {
    height: 100px;
    width: 100%;
}

/* Botón de Upload Personalizado */
.hidden-input {
    display: none;
}

.btn-upload {
    display: inline-block;
    background: var(--off-white);
    border: 2px dashed var(--black);
    padding: 8px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.btn-upload:hover {
    background: var(--acid-green);
    border-style: solid;
}

/* Textarea */
.zape-textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--black);
    font-family: 'Space Mono';
    resize: vertical;
    font-size: 0.9rem;
}

.zape-textarea:focus {
    background: var(--black);
    color: var(--acid-green);
}

/* =========================================================================
   CORRECCIÓN: TAMAÑO DE MINIATURAS EN DASHBOARD
   ========================================================================= */

/* Forzamos una altura fija para los contenedores de media dentro del admin */
.admin-post-wrapper .video-embed-container,
.admin-post-wrapper .product-card-embed,
.admin-post-wrapper .carousel-grid {
    height: 200px !important;
    /* Altura estándar para previsualización */
    min-height: 200px;
    overflow: hidden;
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid #333;
}

/* Hacemos que la imagen llene ese espacio recortando lo que sobre (Crop) */
.admin-post-wrapper img,
.admin-post-wrapper .video-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* La clave: recorta, no estira */
    object-position: center center;
    /* Centra la imagen */
}

/* Ajuste específico para el carrusel en dashboard */
.admin-post-wrapper .carousel-item {
    height: 100% !important;
    /* Que ocupe toda la altura del grid */
}

/* Ajuste para producto en dashboard (hacerlo más compacto) */
.admin-post-wrapper .product-card-embed {
    display: flex;
    height: 120px !important;
    /* Los productos pueden ser más bajitos */
}

.admin-post-wrapper .product-card-embed img {
    width: 120px !important;
    /* Imagen cuadrada a la izquierda */
}

/* =========================================================================
   FIX: IMÁGENES RESPONSIVAS (MATA-GIGANTES)
   ========================================================================= */

/* 1. Aseguramos que el contenedor padre nunca sea más ancho que la tarjeta */
.mini-visual-container,
.admin-post-wrapper .post-preview,
.video-embed-container,
.product-card-embed {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    /* Si algo sobra, lo corta */
    position: relative;
}

/* 2. La regla de oro para la imagen */
.mini-avatar-square img,
.admin-post-wrapper img,
.zape-post img {
    max-width: 100% !important;
    /* Nunca más ancho que su padre */
    width: 100%;
    /* Ocupa todo el ancho disponible */
    height: auto !important;
    /* Calcula la altura automática para no deformarse */
    display: block;
    /* Elimina el espacio blanco fantasma debajo */
    object-fit: cover;
    /* Rellena el espacio recortando sobrantes (Zoom) */

    /* Opcional: Si quieres que siempre sean cuadradas o rectangulares fijas */
    /* aspect-ratio: 16/9; */
}

/* =========================================================================
   FIX: IMÁGENES RESPONSIVAS (MATA-GIGANTES)
   ========================================================================= */

/* 1. Aseguramos que el contenedor padre nunca sea más ancho que la tarjeta */
.mini-visual-container,
.admin-post-wrapper .post-preview,
.video-embed-container,
.product-card-embed {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    /* Si algo sobra, lo corta */
    position: relative;
}

/* 2. La regla de oro para la imagen */
.mini-avatar-square img,
.admin-post-wrapper img,
.zape-post img {
    max-width: 100% !important;
    /* Nunca más ancho que su padre */
    width: 18%;
    /* Ocupa todo el ancho disponible */
    height: auto !important;
    /* Calcula la altura automática para no deformarse */
    display: block;
    /* Elimina el espacio blanco fantasma debajo */
    object-fit: cover;
    /* Rellena el espacio recortando sobrantes (Zoom) */

    /* Opcional: Si quieres que siempre sean cuadradas o rectangulares fijas */
    /* aspect-ratio: 16/9; */
}

/* =========================================================================
   TARJETA DE PREVISUALIZACIÓN DE PERFIL (DASHBOARD)
   ========================================================================= */

.profile-preview-card {
    padding: 0 !important;
    /* Quitamos padding global para manejarlo internamente */
    display: flex;
    flex-direction: column;
}

.profile-preview-card .card-top {
    padding: 15px 20px;
    margin: 0;
    background: var(--off-white);
    border-bottom: 2px solid var(--black);
}

/* Layout Interno */
.preview-layout {
    display: flex;
    height: 180px;
    /* Altura fija para mantener proporción */
    background: var(--pure-white);
}

/* --- IZQUIERDA: LOOP --- */
.preview-loop {
    width: 40%;
    /* Ocupa el 40% del ancho */
    border-right: 2px solid var(--black);
    background: #333;
    position: relative;
    overflow: hidden;
}

.preview-loop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-loop {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    font-family: 'Space Mono';
    font-size: 0.8rem;
}

.no-loop i {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

/* --- DERECHA: INFO --- */
.preview-info {
    width: 60%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Alinea todo a la derecha */
    justify-content: space-between;
}

/* Foto Cuadrada */
.preview-avatar {
    width: 60px;
    height: 60px;
    border: 2px solid var(--black);
    background: var(--zape-yellow);
    /* border-radius: 0;  <-- ESTO HACE QUE SEA CUADRADA */
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--black);
}

/* Textos */
.preview-text {
    text-align: right;
}

.preview-text h4 {
    font-family: 'Syne';
    font-size: 1.1rem;
    margin: 0;
    color: var(--black);
    line-height: 1.1;
}

.preview-cat {
    font-family: 'Space Mono';
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    background: #eee;
    padding: 2px 5px;
    margin-top: 5px;
    display: inline-block;
}

/* Botones inferiores */
.preview-actions {
    padding: 15px;
    border-top: 2px solid var(--black);
    display: flex;
    gap: 10px;
    background: var(--off-white);
}

.btn-icon-small {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-mini.outline {
    background: transparent;
    border: 2px solid var(--black);
    color: var(--black);
}

.btn-mini.outline:hover {
    background: #ddd;
}

/* =========================================================================
   TARJETA MI PERSONAJE (DISEÑO SPLIT CORREGIDO)
   ========================================================================= */

/* El contenedor principal de la tarjeta */
.profile-edit-card {
    padding: 0 !important;
    /* Quitamos padding para que el loop toque los bordes */
    display: flex;
    flex-direction: column;
}

.profile-edit-card .card-top {
    padding: 15px 20px;
    margin: 0;
    background: var(--off-white);
    border-bottom: 2px solid var(--black);
}

/* Layout de 2 Columnas */
.profile-split-layout {
    display: flex;
    height: 180px;
    /* Altura fija para mantener la forma */
    background: var(--pure-white);
    border-bottom: 2px solid var(--black);
}

/* --- COLUMNA IZQUIERDA (LOOP) --- */
.split-loop-container {
    width: 40%;
    /* 40% del ancho */
    border-right: 2px solid var(--black);
    background: #222;
    position: relative;
    overflow: hidden;
}

.loop-img-vertical {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Se recorta para llenar el espacio vertical */
}

.loop-placeholder-vertical {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
}

/* --- COLUMNA DERECHA (INFO) --- */
.split-info-container {
    width: 60%;
    /* 60% del ancho */
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Alinea todo a la derecha */
    justify-content: space-between;
    /* Separa Avatar (arriba) de Texto (abajo) */
}

/* Avatar Cuadrado */
.avatar-square-box {
    width: 100px;
    height: auto;
    border: 2px solid var(--black);
    background: var(--zape-yellow);
    /* Sin border-radius para que sea cuadrado */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-square-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-square-box .initial {
    font-family: 'Syne';
    font-weight: 800;
    font-size: 2rem;
    color: var(--black);
}

/* Texto de Info */
.info-text-box {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stage-name {
    font-family: 'Syne';
    font-size: 1.2rem;
    color: var(--black);
    line-height: 1;
    margin-bottom: 5px;
    display: block;
}

.category-badge {
    font-family: 'Space Mono';
    font-size: 0.7rem;
    text-transform: uppercase;
    background: #eee;
    color: #555;
    padding: 2px 6px;
    border: 1px solid #ccc;
    display: inline-block;
}

/* Botones de abajo */
.card-actions-stack {
    padding: 15px;
    display: flex;
    gap: 10px;
    background: var(--off-white);
}

/* =========================================================================
   ESTILOS BILLETERA (WALLET)
   ========================================================================= */

.wallet-header {
    margin-bottom: 30px;
    border-bottom: 4px solid var(--black);
    padding-bottom: 20px;
}

.wallet-header h1 {
    font-size: 3rem;
    color: var(--off-white);
    margin: 10px 0 0 0;
}

.wallet-header .highlight {
    color: var(--acid-green);
}

.back-link {
    color: var(--zape-yellow);
    text-decoration: none;
    font-weight: bold;
    font-family: 'Space Mono';
}

.wallet-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Display de Saldo */
.balance-display {
    background: var(--black);
    border: 2px solid var(--zape-yellow);
    padding: 20px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 6px 6px 0px var(--zape-yellow);
}

.balance-display p {
    color: var(--off-white);
    margin: 0;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.balance-display .amount {
    font-family: 'Syne';
    font-size: 4rem;
    color: var(--zape-yellow);
    font-weight: 800;
    line-height: 1;
}

/* Input con Icono */
.input-with-icon {
    position: relative;
}

.input-with-icon .currency {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--black);
    font-weight: bold;
}

.input-with-icon input {
    padding-left: 35px;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Opciones de Ejecución (Radio Cards) */
.execution-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.radio-card {
    cursor: pointer;
    position: relative;
}

.radio-card input {
    display: none;
}

/* Ocultar radio nativo */

.radio-card .card-content {
    background: var(--off-white);
    border: 2px solid var(--black);
    padding: 15px;
    height: 100%;
    transition: 0.2s;
    opacity: 0.6;
}

.radio-card input:checked+.card-content {
    opacity: 1;
    border-color: var(--zape-purple);
    box-shadow: 4px 4px 0px var(--zape-purple);
    background: white;
}

.radio-title {
    display: block;
    font-weight: 800;
    font-size: 1rem;
    color: var(--black);
    margin-bottom: 5px;
}

.radio-desc {
    display: block;
    font-size: 0.8rem;
    color: #555;
    line-height: 1.2;
    margin-bottom: 5px;
}

.radio-fee {
    display: block;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--hot-pink);
    background: #eee;
    padding: 2px 5px;
    display: inline-block;
}

/* Resumen */
.summary-box {
    background: #222;
    border: 1px dashed #555;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.summary-box .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #ccc;
    font-family: 'Space Mono';
}

.summary-box .row.total {
    border-top: 1px solid #555;
    padding-top: 10px;
    margin-bottom: 0;
    color: var(--acid-green);
    font-weight: bold;
    font-size: 1.2rem;
}

.summary-box .fee {
    color: var(--hot-pink);
}

/* --- TABLA HISTORIAL --- */
.history-filters {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

.filter-pill {
    background: transparent;
    border: 1px solid var(--off-white);
    color: var(--off-white);
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Space Mono';
}

.filter-pill.active {
    background: var(--zape-yellow);
    color: black;
    border-color: var(--zape-yellow);
}

.zape-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--off-white);
    color: var(--black);
    border: 2px solid var(--black);
}

.zape-table th {
    background: var(--black);
    color: var(--zape-yellow);
    padding: 15px;
    text-align: left;
    font-family: 'Space Mono';
    font-size: 0.9rem;
    text-transform: uppercase;
}

.zape-table td {
    padding: 15px;
    border-bottom: 1px solid #ccc;
    font-size: 0.95rem;
}

.zape-table tr:last-child td {
    border-bottom: none;
}

/* Badges de Estado */
.status-badge {
    padding: 4px 8px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid var(--black);
}

.status-badge.success {
    background: var(--acid-green);
    color: black;
}

.status-badge.pending {
    background: var(--zape-yellow);
    color: black;
}

.status-badge.error {
    background: var(--hot-pink);
    color: white;
}

.text-right {
    text-align: right;
}

.text-red {
    color: #c0392b;
}

.text-green {
    color: #27ae60;
}

.font-mono {
    font-family: 'Space Mono';
}

.font-bold {
    font-weight: bold;
}

/* =========================================================================
   MEJORAS DE UX Y NAVEGACIÓN (PERFIL)
   ========================================================================= */

/* 1. Desplazamiento Suave Global */
html {
    scroll-behavior: smooth;
}

/* 2. Ajuste de Anclas (Para que el header no tape los títulos) */
#portfolio,
#feed,
#services {
    /* Esto empuja el punto de aterrizaje 100px hacia arriba */
    scroll-margin-top: 120px;
}

/* 3. Navegación Interna Pegajosa (Sticky) */
.profile-inner-nav {
    position: sticky;
    /* Ajusta esto según la altura de tu header principal o barra de volver */
    top: 0;
    z-index: 90;
    background-color: rgba(240, 240, 240, 0.95);
    /* Color --off-white con transparencia */
    backdrop-filter: blur(5px);
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    /* Sombra suave al pegar */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* =========================================================================
   MÓDULO DE COMENTARIOS (INTERACCIÓN)
   ========================================================================= */

.comments-wrapper {
    border-top: 2px solid var(--black);
    background-color: #fff;
}

/* Barra de Acciones */
.post-actions {
    display: flex;
    padding: 10px 15px;
    gap: 15px;
    background-color: #f9f9f9;
}

.action-btn {
    background: transparent;
    border: none;
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #555;
    transition: all 0.2s;
    padding: 5px 10px;
    border-radius: 4px;
}

.action-btn:hover {
    background-color: #eee;
    color: var(--black);
}

/* Estado Like Activo */
.action-btn.liked {
    color: var(--hot-pink);
}

.action-btn.liked i {
    font-weight: 900;
    /* Cambia a icono sólido */
    animation: popHeart 0.3s ease;
}

/* Estilos para Comentarios con Sesión */
.form-row-logged {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar-mini {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid var(--black);
    object-fit: cover;
}

/* Caja de Invitación a Login */
.login-to-comment {
    background-color: #f0f0f0;
    border: 1px dashed var(--black);
    padding: 15px;
    text-align: center;
    margin-bottom: 15px;
}

.login-to-comment p {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    color: #555;
    font-weight: bold;
}

.login-to-comment .btn-brutal {
    font-size: 0.8rem;
    padding: 5px 15px;
    display: inline-block;
}

/* =========================================================================
   ESTILOS GESTOR DE CATÁLOGO
   ========================================================================= */

/* Tarjeta Mini en Dashboard */
.services-mini-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-service-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
    font-size: 0.9rem;
}

.srv-name {
    font-weight: bold;
    color: var(--black);
}

.srv-price {
    background: var(--acid-green);
    padding: 0 5px;
    font-weight: bold;
    font-size: 0.8rem;
}

/* Layout del Gestor */
.catalog-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* Formulario | Lista */
    gap: 40px;
}

.catalog-form-card {
    background: var(--off-white);
    border: 3px solid var(--black);
    padding: 25px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

.catalog-form-card h3 {
    border-bottom: 2px solid var(--zape-purple);
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: var(--black);
}

.zape-input {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--black);
    background: white;
    font-family: 'Space Mono';
    margin-bottom: 5px;
}

/* Grid de Tickets en el Gestor */
.tickets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* Botón de Eliminar en el Ticket */
.ticket-actions {
    margin-top: 10px;
    border-top: 1px dashed #ccc;
    padding-top: 10px;
    text-align: right;
}

.btn-delete {
    color: var(--hot-pink);
    font-weight: bold;
    text-decoration: none;
    font-size: 0.8rem;
    border: 1px solid var(--hot-pink);
    padding: 2px 8px;
    transition: 0.2s;
}

.btn-delete:hover {
    background: var(--hot-pink);
    color: white;
}


/* =========================================================================
   SWITCH BRUTALISTA (DESTACADOS)
   ========================================================================= */

.ticket-actions-row {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* El contenedor del switch */
.zape-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 24px;
}

.zape-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* El deslizador */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ddd;
    border: 2px solid var(--black);
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    font-family: 'Space Mono';
    font-size: 0.6rem;
    font-weight: bold;
}

/* El cuadrado que se mueve */
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: var(--black);
    transition: .2s;
}

/* Estado Activo (ON) */
input:checked+.slider {
    background-color: var(--zape-yellow);
}

input:checked+.slider:before {
    transform: translateX(36px);
}

/* Textos dentro del switch */
.slider-text-on {
    display: none;
    color: var(--black);
}

.slider-text-off {
    display: block;
    color: #555;
    margin-left: auto;
}

input:checked+.slider .slider-text-on {
    display: block;
}

input:checked+.slider .slider-text-off {
    display: none;
}

/* Botón de borrar (Icono solo) */
.btn-delete-icon {
    color: var(--hot-pink);
    font-size: 1.2rem;
    transition: transform 0.2s;
}

.btn-delete-icon:hover {
    transform: scale(1.2);
}

/* =========================================================================
   ESTILOS TARJETAS EXTRA (REDES, CHAT, HISTORIAL)
   ========================================================================= */

/* --- 6. TARJETA REDES SOCIALES --- */
.social-toggles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
}

.social-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pure-white);
    padding: 8px;
    border: 1px solid var(--black);
}

.social-icon {
    font-size: 1.5rem;
    width: 30px;
    text-align: center;
    color: var(--black);
}

/* Colores de marca para los iconos */
.social-icon .fa-tiktok {
    color: #000;
}

.social-icon .fa-instagram {
    color: #E1306C;
}

.social-icon .fa-facebook-f {
    color: #1877F2;
}

.social-input {
    flex: 1;
    /* Ocupa el espacio disponible */
    border: none;
    border-bottom: 2px solid #ccc;
    font-family: 'Space Mono';
    font-size: 0.9rem;
    padding: 5px;
    background: transparent;
    color: var(--black);
    outline: none;
}

.social-input:focus {
    border-bottom-color: var(--zape-purple);
}

/* Switch Pequeño (Brutal Switch) */
.brutal-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.brutal-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.brutal-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border: 2px solid var(--black);
    transition: .2s;
}

.brutal-switch .slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 2px;
    bottom: 3px;
    background-color: var(--black);
    transition: .2s;
}

.brutal-switch input:checked+.slider {
    background-color: var(--acid-green);
}

.brutal-switch input:checked+.slider:before {
    transform: translateX(20px);
}


/* --- 7. TARJETA CHAT --- */
.chat-status-box {
    background-color: var(--pure-white);
    border: 2px solid var(--black);
    padding: 20px;
    text-align: center;
    margin-bottom: 15px;
    /* Patrón de puntos sutil de fondo */
    background-image: radial-gradient(var(--black) 1px, transparent 1px);
    background-size: 10px 10px;
}

.chat-count-circle {
    width: 60px;
    height: 60px;
    background-color: var(--hot-pink);
    color: white;
    border: 3px solid var(--black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 auto 10px auto;
    box-shadow: 4px 4px 0px var(--black);
    animation: bounce 2s infinite;
}

.chat-status-box p {
    background: var(--black);
    color: var(--zape-yellow);
    display: inline-block;
    padding: 2px 8px;
    font-weight: bold;
    margin: 0;
}

.chat-status-box small {
    display: block;
    margin-top: 10px;
    background: white;
    border: 1px solid black;
    padding: 5px;
    font-size: 0.75rem;
    color: #555;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


/* --- 8. TARJETA HISTORIAL --- */
.campaign-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.campaign-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pure-white);
    padding: 10px;
    border: 1px solid var(--black);
    transition: transform 0.2s;
}

.campaign-item:hover {
    transform: translateX(5px);
    border-left: 5px solid var(--zape-purple);
}

.folder-icon {
    font-size: 1.5rem;
    color: var(--zape-yellow);
    -webkit-text-stroke: 1px black;
    /* Borde negro al icono */
}

.campaign-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.campaign-details strong {
    font-size: 0.9rem;
    color: var(--black);
}

.campaign-details small {
    font-size: 0.75rem;
    color: #666;
}


/* =========================================================================
   ESTILOS DE SOLICITUDES (REQUESTS)
   ========================================================================= */

.requests-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Lista de Tarjetas */
.requests-list-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.request-row-card {
    display: flex;
    align-items: center;
    background: var(--off-white);
    border: 2px solid var(--black);
    padding: 15px;
    text-decoration: none;
    color: var(--black);
    transition: transform 0.2s;
    border-left-width: 8px;
    /* Borde izquierdo grueso para estado */
}

.request-row-card:hover {
    transform: translateX(5px);
    background: white;
}

/* Colores de Estado (Borde Izquierdo) */
.request-row-card.status-pending {
    border-left-color: var(--zape-yellow);
}

.request-row-card.status-accepted {
    border-left-color: var(--acid-green);
}

.request-row-card.status-rejected {
    border-left-color: var(--hot-pink);
}

.request-row-card.status-completed {
    border-left-color: #555;
}

.req-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    width: 30px;
    text-align: center;
}

.req-info {
    flex: 1;
}

.req-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.client-name {
    font-weight: 800;
    font-size: 1.1rem;
}

.req-date {
    font-size: 0.8rem;
    color: #666;
    font-family: 'Space Mono';
}

.req-body {
    display: flex;
    gap: 10px;
    align-items: center;
}

.service-badge {
    background: #ddd;
    padding: 2px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
}

.budget-tag {
    font-weight: bold;
    color: var(--zape-purple);
}

.req-arrow {
    color: #ccc;
}


/* --- DETALLE (EXPEDIENTE) --- */
.mission-file-card {
    background: var(--off-white);
    border: 4px solid var(--black);
    box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.mission-status-bar {
    padding: 15px;
    text-align: center;
    font-weight: 800;
    font-family: 'Space Mono';
    border-bottom: 4px solid var(--black);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.mission-status-bar.status-pending {
    background: var(--zape-yellow);
    color: black;
}

.mission-status-bar.status-accepted {
    background: var(--acid-green);
    color: black;
}

.mission-status-bar.status-rejected {
    background: var(--hot-pink);
    color: white;
}

.mission-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

/* Sidebar del Expediente */
.mission-sidebar {
    background: #e0e0e0;
    padding: 30px;
    border-right: 2px solid var(--black);
}

.data-block {
    margin-bottom: 25px;
}

.data-block label {
    display: block;
    font-size: 0.7rem;
    font-weight: bold;
    color: #666;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.big-data {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
}

.money-data {
    font-family: 'Syne';
    font-size: 2rem;
    font-weight: 800;
    color: var(--zape-purple);
    margin: 0;
}

.date-data,
.contact-data {
    font-family: 'Space Mono';
    font-size: 0.9rem;
    margin: 0;
}

/* Contenido del Expediente */
.mission-content {
    padding: 30px;
    background: white;
}

.info-box {
    margin-bottom: 25px;
}

.info-box label {
    display: block;
    font-size: 0.7rem;
    font-weight: bold;
    color: #666;
    margin-bottom: 5px;
}

.info-box h3 {
    font-size: 1.5rem;
    margin: 0;
}

.highlight-box {
    background: #fffde7;
    border: 1px dashed var(--black);
    padding: 20px;
}

.brief-text {
    font-style: italic;
    line-height: 1.6;
    font-size: 1.1rem;
    margin: 0;
}

.mission-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.btn-accept {
    background: var(--acid-green);
    flex: 2;
}

.btn-reject {
    background: var(--hot-pink);
    color: white;
    flex: 1;
    border-color: var(--hot-pink);
}

.legal-mini {
    font-size: 0.7rem;
    color: #888;
    text-align: center;
    margin-top: 10px;
}

/* =========================================================================
   ESTILOS DE LISTA DE SOLICITUDES (BUZÓN)
   ========================================================================= */

.requests-container {
    max-width: 800px;
    margin: 0 auto;
}

.requests-list-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.request-row-card {
    display: flex;
    align-items: center;
    background: var(--off-white);
    border: 2px solid var(--black);
    padding: 15px 20px;
    text-decoration: none;
    color: var(--black);
    transition: transform 0.2s, background-color 0.2s;
    border-left-width: 8px;
    /* Borde grueso a la izquierda para el estado */
    position: relative;
}

.request-row-card:hover {
    transform: translateX(5px);
    background: white;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

/* COLORES DE ESTADO (Borde Izquierdo) */
.request-row-card.status-pending {
    border-left-color: var(--zape-yellow);
}

/* Amarillo: Atención */
.request-row-card.status-accepted {
    border-left-color: var(--acid-green);
}

/* Verde: En proceso */
.request-row-card.status-rejected {
    border-left-color: var(--hot-pink);
}

/* Rosa: Rechazado */
.request-row-card.status-completed {
    border-left-color: #7f8c8d;
}

/* Gris: Archivo */

/* Icono Principal */
.req-icon {
    font-size: 1.8rem;
    margin-right: 20px;
    width: 40px;
    text-align: center;
    color: var(--black);
}

/* Información Central */
.req-info {
    flex: 1;
}

.req-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.client-name {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.req-date {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: #666;
    background: #eee;
    padding: 2px 6px;
    border-radius: 4px;
}

.req-body {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.service-badge {
    background: var(--black);
    color: white;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 50px;
}

.budget-tag {
    font-family: 'Space Mono';
    font-weight: bold;
    color: var(--zape-purple);
    font-size: 1rem;
}

.req-status-text {
    font-size: 0.7rem;
    font-weight: 900;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Flecha final */
.req-arrow {
    color: #ccc;
    font-size: 1.2rem;
    margin-left: 15px;
    transition: color 0.2s;
}

.request-row-card:hover .req-arrow {
    color: var(--zape-purple);
}

/* Estado Vacío */
.empty-state-dash {
    text-align: center;
    padding: 60px 20px;
    border: 2px dashed #555;
    border-radius: 10px;
    color: #777;
}

/* Estilos para la Lista de Destacados en Dashboard */
.mini-service-item.featured-item {
    background-color: var(--black);
    /* Fondo negro para resaltar */
    color: white;
    padding: 10px;
    border: 1px solid var(--zape-yellow);
    margin-bottom: 8px;
    align-items: center;
}

.mini-service-item .srv-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.text-yellow {
    color: var(--zape-yellow);
}

.mini-service-item .srv-name {
    color: white;
    /* Texto blanco sobre fondo negro */
    font-weight: normal;
    font-size: 0.85rem;
}

.hint-text {
    font-size: 0.75rem;
    color: #666;
    text-align: center;
    margin-top: 5px;
    font-style: italic;
}

.empty-state-mini {
    text-align: center;
    padding: 15px;
    background: #eee;
    border: 1px dashed #999;
    font-size: 0.8rem;
    color: #555;
}

/* =========================================================================
   VISTA DE BIENVENIDA (CELEBRACIÓN)
   ========================================================================= */

.welcome-mode {
    background-color: #222;
    /* Fondo un poco más oscuro para resaltar el neón */
}

/* Sello de Aprobado */
.approved-stamp {
    display: inline-block;
    border: 5px solid var(--acid-green);
    color: var(--acid-green);
    font-family: 'Syne', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    padding: 10px 20px;
    text-transform: uppercase;
    letter-spacing: 5px;
    transform: rotate(-15deg);
    mask-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png');
    /* Textura grunge opcional */
    animation: stampIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
}

@keyframes stampIn {
    0% {
        transform: scale(3) rotate(0deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(-15deg);
        opacity: 1;
    }
}

/* Caja de Pasos */
.onboarding-box {
    background: #f9f9f9;
    border: 2px dashed var(--black);
    padding: 20px;
    margin-bottom: 30px;
    text-align: left;
}

.onboarding-box h4 {
    margin-top: 0;
    color: var(--zape-purple);
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.onboarding-box li {
    margin-bottom: 8px;
    font-family: 'Space Mono';
    font-size: 0.9rem;
    color: #333;
}

/* Confeti Brutalista (Cuadrados cayendo) */
.confetti {
    position: absolute;
    width: 15px;
    height: 15px;
    background: var(--zape-yellow);
    top: -20px;
    z-index: 0;
    animation: fall linear infinite;
}

.c1 {
    left: 10%;
    animation-duration: 4s;
    background: var(--hot-pink);
}

.c2 {
    left: 30%;
    animation-duration: 3s;
    background: var(--acid-green);
    animation-delay: 1s;
}

.c3 {
    left: 50%;
    animation-duration: 5s;
    background: var(--zape-purple);
    animation-delay: 2s;
}

.c4 {
    left: 70%;
    animation-duration: 3.5s;
    background: var(--zape-yellow);
}

.c5 {
    left: 90%;
    animation-duration: 4.5s;
    background: white;
    animation-delay: 0.5s;
}

/* --- MODAL DE CONTRATOS --- */
.contract-mode {
    max-width: 600px;
    height: 80vh;
    display: flex;
    flex-direction: column;
}

.contract-step {
    display: none;
    height: 100%;
    flex-direction: column;
}

.contract-step.active {
    display: flex;
}

.contract-body {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    border: 2px solid var(--black);
    padding: 20px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--black);
}

.contract-footer {
    border-top: 1px dashed #ccc;
    padding-top: 15px;
}

/* Checkbox y Botón Deshabilitados */
.brutal-checkbox.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.btn-brutal.disabled {
    background: #ccc;
    border-color: #999;
    pointer-events: none;
    box-shadow: none;
}

/* --- VISTA DE VERIFICACIÓN (UPLOADS) --- */
.upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.upload-box label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--black);
}

.file-input-wrapper {
    position: relative;
    height: 150px;
    border: 2px dashed var(--black);
    background: #f9f9f9;
    cursor: pointer;
    transition: 0.2s;
}

.file-input-wrapper:hover {
    background: #eee;
    border-color: var(--zape-purple);
}

.file-input-wrapper.wide {
    height: 200px;
}

.file-input-wrapper input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.preview-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ccc;
    z-index: 1;
}

/* =========================================================================
   ESTILOS DEL MODAL DE PERFIL (OPTIMIZADO)
   ========================================================================= */

/* Input Deshabilitado */
.input-disabled {
    background-color: #e0e0e0 !important;
    /* Gris claro */
    color: #777 !important;
    border-color: #999 !important;
    cursor: not-allowed;
    font-style: italic;
}

.helper-text {
    display: block;
    margin-top: 5px;
    font-size: 0.75rem;
    color: #666;
    font-family: 'Space Mono';
}

/* Fila de Carga de Archivos */
.media-upload-row {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    padding: 10px;
    border: 1px dashed var(--black);
}

/* Avatar Preview */
.avatar-preview {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--black);
}

.avatar-placeholder-modal {
    width: 70px;
    height: 70px;
    background: var(--zape-yellow);
    border-radius: 50%;
    border: 3px solid var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 2rem;
    color: var(--black);
}

/* Acciones de Carga */
.upload-actions {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.input-file-hidden {
    display: none;
}

.upload-btn {
    cursor: pointer;
    text-align: center;
    display: inline-block;
    width: fit-content;
    background: var(--black);
    color: white;
    border: none;
    padding: 8px 15px;
    font-family: 'Space Mono';
    font-weight: bold;
    transition: 0.2s;
}

.upload-btn:hover {
    background: var(--zape-purple);
    transform: translateY(-2px);
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
}

.file-name-display {
    font-size: 0.8rem;
    color: var(--acid-green);
    background: black;
    padding: 2px 5px;
    display: inline-block;
    width: fit-content;
    font-weight: bold;
    min-height: 20px;
    /* Para que no salte el layout si está vacío */
}

/* =========================================================================
   ESTILOS TARJETA LEGAL
   ========================================================================= */

.data-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.data-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
    font-size: 0.9rem;
}

.data-list li strong {
    color: var(--black);
}

.mono-text {
    font-family: 'Space Mono', monospace;
    color: #555;
    letter-spacing: 1px;
}

/* Etiquetas de Estado */
.tag-ok {
    background: var(--acid-green);
    color: var(--black);
    font-weight: bold;
    font-size: 0.7rem;
    padding: 2px 6px;
    border: 1px solid var(--black);
}

.tag-pending {
    background: var(--zape-yellow);
    color: var(--black);
    font-weight: bold;
    font-size: 0.7rem;
    padding: 2px 6px;
    border: 1px solid var(--black);
    animation: blink 2s infinite;
}

.tag-error {
    background: var(--hot-pink);
    color: white;
    font-weight: bold;
    font-size: 0.7rem;
    padding: 2px 6px;
    border: 1px solid var(--black);
}


/* --- ESTILOS DE DATOS SENSIBLES --- */
.sensitive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.data-group label {
    display: block;
    font-size: 0.7rem;
    font-weight: bold;
    color: #666;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.data-group.full {
    grid-column: span 2;
}

.revealed-box {
    background: var(--off-white);
    border: 2px solid var(--black);
    padding: 10px;
    font-family: 'Space Mono', monospace;
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--black);
    letter-spacing: 1px;
}

.privacy-badge {
    background-color: #eee;
    color: #666;
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 4px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px dashed #ccc;
}

.data-value {
    font-family: 'Space Mono', monospace;
    font-weight: bold;
    color: var(--black);
    text-align: right;
}

/* =========================================================================
   ESTILOS GESTOR DE REDES
   ========================================================================= */

.social-window {
    max-width: 600px;
    height: 85vh;
    /* Altura fija para permitir scroll interno */
    display: flex;
    flex-direction: column;
    padding: 0;
    /* Quitamos padding del contenedor principal */
}

.social-form-scroll {
    flex: 1;
    overflow-y: auto;
    /* Scroll solo en el formulario */
    padding: 20px;
}

.networks-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 600px) {
    .networks-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* 2 columnas en PC */
}

.network-item {
    background: var(--pure-white);
    border: 2px solid var(--black);
    padding: 10px;
    transition: 0.2s;
}

.network-item:hover {
    border-color: var(--zape-purple);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.net-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.net-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    color: var(--black);
}

.net-identity i {
    font-size: 1.2rem;
}

/* Inputs ocultos/visibles */
.net-inputs {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    animation: fadeIn 0.2s;
}

.net-inputs.hidden {
    display: none;
}

.zape-input-mini {
    width: 100%;
    padding: 5px 8px;
    font-size: 0.8rem;
    border: 1px solid #ccc;
    font-family: 'Space Mono';
}

/* Footer fijo del modal */
.modal-footer-fixed {
    border-top: 2px solid var(--black);
    padding: 15px;
    background: var(--off-white);
}

/* Switch Pequeño para el Modal */
.zape-switch.small {
    width: 40px;
    height: 20px;
}

.zape-switch.small .slider:before {
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
}

.zape-switch.small input:checked+.slider:before {
    transform: translateX(20px);
}

/* Preview en Dashboard */
.social-row-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #ccc;
}

.social-data {
    flex: 1;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.net-name {
    font-weight: bold;
}

.net-stat {
    background: #eee;
    padding: 0 5px;
    font-family: 'Space Mono';
    font-size: 0.8rem;
}

/* =========================================================================
   ESTILOS BANDEJA DE ENTRADA (INBOX)
   ========================================================================= */

.inbox-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Toolbar */
.inbox-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.search-box {
    flex: 1;
    position: relative;
}

.search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

.search-input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    background: var(--off-white);
    border: 2px solid var(--black);
    font-family: 'Space Mono';
    font-size: 1rem;
    outline: none;
}

.search-input:focus {
    border-color: var(--zape-purple);
    background: white;
}

.btn-icon-refresh {
    background: var(--black);
    color: var(--zape-yellow);
    border: none;
    width: 50px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.2s;
}

.btn-icon-refresh:hover {
    background: var(--zape-purple);
    color: white;
}

/* Lista de Chats */
.chat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-item {
    display: flex;
    align-items: center;
    background: var(--pure-white);
    border: 2px solid var(--black);
    padding: 15px;
    text-decoration: none;
    color: var(--black);
    transition: transform 0.2s;
    position: relative;
}

.chat-item:hover {
    transform: translateX(5px);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

/* Estado No Leído (Resaltado Ácido) */
.chat-item.unread {
    background-color: #fffde7;
    /* Amarillo muy suave */
    border-left: 8px solid var(--hot-pink);
    /* Borde rosa neón */
}

/* Avatar */
.chat-avatar {
    width: 50px;
    height: 50px;
    background: #ddd;
    border: 2px solid var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    margin-right: 15px;
    position: relative;
}

/* Roles de Avatar */
.chat-avatar.admin {
    background: var(--black);
    color: var(--zape-yellow);
}

/* Soporte */
.chat-avatar.client {
    background: var(--acid-green);
    color: var(--black);
}

/* Clientes */

.unread-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background: var(--hot-pink);
    border: 1px solid var(--black);
    border-radius: 50%;
}

/* Info */
.chat-info {
    flex: 1;
    overflow: hidden;
}

.chat-header-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.contact-name {
    font-weight: 800;
    font-size: 1rem;
}

.chat-time {
    font-size: 0.75rem;
    color: #666;
    font-family: 'Space Mono';
}

.last-message {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-arrow {
    color: #ccc;
}

.chat-item:hover .chat-arrow {
    color: var(--zape-purple);
}

/* =========================================================================
   ESTILOS SALA DE CHAT (ROOM)
   ========================================================================= */

.chat-room-mode {
    height: 90vh;
    /* Ocupa casi toda la pantalla */
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    /* Quitamos padding del wrapper para que el chat llene todo */
    max-width: 800px;
    margin: 0 auto;
    background: var(--off-white);
    border-left: 2px solid var(--black);
    border-right: 2px solid var(--black);
}

/* Header Fijo */
.chat-room-header {
    background: var(--black);
    color: white;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--zape-purple);
}

.back-btn-chat {
    color: white;
    font-size: 1.2rem;
    margin-right: 15px;
}

.chat-partner-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.chat-partner-info h2 {
    font-size: 1.1rem;
    margin: 0;
    color: white;
}

.status-indicator {
    font-size: 0.7rem;
    color: var(--acid-green);
    font-family: 'Space Mono';
}

/* Área de Mensajes */
.chat-messages-area {
    flex: 1;
    /* Ocupa el espacio restante */
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-image: radial-gradient(#ccc 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Burbujas */
.message-bubble {
    max-width: 75%;
    padding: 10px 15px;
    border: 2px solid var(--black);
    position: relative;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

/* Mensaje Recibido (Izquierda) */
.message-bubble.received {
    align-self: flex-start;
    background: white;
    border-radius: 0 15px 15px 15px;
}

/* Mensaje Enviado (Derecha) */
.message-bubble.sent {
    align-self: flex-end;
    background: var(--zape-yellow);
    border-radius: 15px 0 15px 15px;
}

.bubble-content {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--black);
}

.msg-time {
    display: block;
    text-align: right;
    font-size: 0.65rem;
    margin-top: 5px;
    color: #555;
    font-family: 'Space Mono';
}

.msg-time i.read {
    color: var(--brand-blue);
}

/* Doble check azul */

/* Input Area */
.chat-input-area {
    background: white;
    padding: 15px;
    border-top: 2px solid var(--black);
}

#chatForm {
    display: flex;
    gap: 10px;
}

#messageInput {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--black);
    font-family: 'Space Mono';
    outline: none;
}

#messageInput:focus {
    border-color: var(--zape-purple);
}

.btn-attach {
    background: #eee;
    border: 2px solid var(--black);
    width: 45px;
    cursor: pointer;
}

.btn-send-chat {
    background: var(--black);
    color: var(--acid-green);
    border: none;
    width: 50px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.2s;
}

.btn-send-chat:hover {
    background: var(--zape-purple);
    color: white;
}

/* =========================================================================
   ZAPE WORKSPACE (IDE LAYOUT)
   ========================================================================= */

.workspace-wrapper {
    display: grid;
    grid-template-columns: 250px 220px 1fr;
    /* 3 Columnas */
    height: 100vh;
    overflow: hidden;
    background-color: var(--off-white);
}

/* --- COLUMNA 1: LISTA DE PROYECTOS --- */
.ws-sidebar-left {
    background-color: #222;
    border-right: 2px solid var(--black);
    display: flex;
    flex-direction: column;
    color: white;
}

.ws-header {
    padding: 20px;
    border-bottom: 1px solid #444;
}

.back-dash {
    color: #888;
    text-decoration: none;
    font-size: 0.8rem;
    display: block;
    margin-bottom: 10px;
}

.back-dash:hover {
    color: white;
}

.ws-header h3 {
    margin: 0;
    color: var(--zape-yellow);
    font-size: 1.2rem;
}

.project-list-scroll {
    overflow-y: auto;
    flex: 1;
}

.ws-project-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #333;
    text-decoration: none;
    color: #ccc;
    transition: 0.2s;
}

.ws-project-item:hover {
    background-color: #333;
    color: white;
}

.ws-project-item.active {
    background-color: var(--zape-purple);
    color: white;
    border-left: 5px solid var(--zape-yellow);
}

.proj-icon {
    font-size: 1.2rem;
    margin-right: 10px;
}

.proj-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.proj-info .client {
    font-weight: bold;
    font-size: 0.9rem;
}

.proj-info .service {
    font-size: 0.75rem;
    opacity: 0.7;
}

.status-icon {
    color: var(--acid-green);
    margin-left: 5px;
}

/* --- COLUMNA 2: NAVEGACIÓN CONTEXTUAL --- */
.ws-sidebar-mid {
    background-color: #e0e0e0;
    border-right: 2px solid var(--black);
    display: flex;
    flex-direction: column;
}

.mid-header {
    padding: 20px;
    border-bottom: 2px solid var(--black);
    background: #d0d0d0;
}

.mid-header small {
    font-family: 'Space Mono';
    color: #666;
}

.mid-header h4 {
    margin: 5px 0 0 0;
    font-size: 1.1rem;
    color: var(--black);
}

.ws-nav {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 5px;
}

.ws-nav-link {
    padding: 10px 15px;
    text-decoration: none;
    color: var(--black);
    font-weight: bold;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.ws-nav-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.ws-nav-link.active {
    background-color: var(--black);
    color: var(--zape-yellow);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
}

.mid-footer {
    margin-top: auto;
    padding: 20px;
}

.progress-pill {
    background: var(--black);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

/* --- COLUMNA 3: CONTENIDO (CANVAS) --- */
.ws-content {
    padding: 30px;
    overflow-y: auto;
    background-image: radial-gradient(#ccc 1px, transparent 1px);
    background-size: 20px 20px;
}

.ws-panel {
    background: white;
    border: 3px solid var(--black);
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.1);
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.panel-header {
    padding: 20px;
    border-bottom: 2px solid var(--black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--off-white);
}

.panel-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.budget-display {
    font-family: 'Space Mono';
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--acid-green);
    background: black;
    padding: 5px 10px;
}

.panel-body {
    padding: 30px;
}

.info-block {
    margin-bottom: 20px;
}

.info-block label {
    font-weight: bold;
    font-size: 0.8rem;
    color: #666;
    display: block;
    margin-bottom: 5px;
}

.info-block p {
    margin: 0;
    font-size: 1.1rem;
}

.info-block.highlight {
    background: #fffde7;
    padding: 15px;
    border-left: 4px solid var(--zape-yellow);
}

/* Chat en Workspace */
.ws-panel.chat-mode {
    height: 100%;
    max-height: 80vh;
}

.ws-chat-area {
    flex: 1;
    background: #f9f9f9;
    padding: 20px;
    overflow-y: auto;
}

.ws-chat-input {
    padding: 15px;
    border-top: 2px solid var(--black);
    display: flex;
    gap: 10px;
}

.ws-chat-input input {
    flex: 1;
    padding: 10px;
    border: 2px solid var(--black);
}

.ws-chat-input button {
    background: var(--black);
    color: white;
    border: none;
    width: 40px;
    cursor: pointer;
}

/* Estado Vacío */
.ws-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888;
    text-align: center;
}

.ws-empty-state i {
    font-size: 3rem;
    margin-bottom: 20px;
    animation: bounce 2s infinite;
}

/* =========================================================================
   ESTILOS DE SECCIONES DE SOLICITUDES
   ========================================================================= */

.req-section {
    margin-bottom: 40px;
}

/* Títulos Separadores */
.section-divider {
    font-family: 'Syne', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--black);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--off-white);
    /* Texto claro sobre fondo oscuro */
}

/* Colores por sección */
.section-divider.pending {
    color: var(--zape-yellow);
    border-color: var(--zape-yellow);
}

.section-divider.active {
    color: var(--acid-green);
    border-color: var(--acid-green);
}

.section-divider.history {
    color: #999;
    border-color: #555;
}

/* Texto cuando no hay items */
.empty-section-text {
    color: #777;
    font-style: italic;
    font-family: 'Space Mono';
    font-size: 0.9rem;
    padding: 10px;
    border: 1px dashed #555;
    border-radius: 8px;
}

/* Estilo "Apagado" para el historial */
.request-row-card.dimmed {
    opacity: 0.7;
    background-color: #e0e0e0;
    /* Un poco más oscuro */
    border-color: #999;
}

.request-row-card.dimmed:hover {
    opacity: 1;
    background-color: white;
    border-color: var(--black);
}

/* Ajuste para que el historial rechazado se vea claro */
.request-row-card.status-rejected .client-name {
    text-decoration: line-through;
    color: #777;
}

/* Corrección de legibilidad en el Expediente */
.brief-content-box {
    background: #fffde7;
    /* Fondo amarillo pálido */
    border: 1px dashed var(--black);
    padding: 15px;
    font-family: 'Space Mono';
    font-size: 0.9rem;
    line-height: 1.6;
    border-left: 4px solid var(--zape-yellow);

    /* CORRECCIÓN CRÍTICA: Color de texto */
    color: #000000 !important;
}

.brief-text {
    font-style: italic;
    color: #000000 !important;
    /* Forzar negro */
    margin: 0;
}

/* Asegurar que los labels sean legibles */
.mission-sidebar label,
.mission-content label {
    color: #666 !important;
    font-weight: 800;
}

/* Responsive */
@media (max-width: 900px) {
    .workspace-wrapper {
        grid-template-columns: 60px 1fr;
        /* Colapsar lista de proyectos */
    }

    .ws-sidebar-left {
        width: 60px;
    }

    .ws-header h3,
    .proj-info,
    .back-dash {
        display: none;
    }

    .ws-project-item {
        justify-content: center;
        padding: 15px 0;
    }

    .proj-icon {
        margin: 0;
        font-size: 1.5rem;
    }

    /* Ocultar columna media en móvil y usar tabs arriba (requiere más JS, por ahora simplificado) */
    .ws-sidebar-mid {
        display: none;
    }

    .workspace-wrapper {
        grid-template-columns: 60px 1fr;
    }
}

@keyframes fall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .mission-grid {
        grid-template-columns: 1fr;
    }

    .mission-sidebar {
        border-right: none;
        border-bottom: 2px solid var(--black);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }

    .catalog-form-card {
        position: static;
    }
}

@keyframes popHeart {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

/* Dropdown de Comentarios */
.comments-dropdown {
    display: none;
    /* Oculto por defecto */
    padding: 15px;
    border-top: 1px dashed #ccc;
    background-color: #fff;
    animation: slideDown 0.3s ease;
}

.comments-dropdown.open {
    display: block;
}

/* Formulario */
.comment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.zape-input-mini,
.zape-input-fluid {
    border: 2px solid var(--black);
    padding: 8px 12px;
    font-family: 'Space Mono';
    font-size: 0.85rem;
    outline: none;
    background: #f0f0f0;
}

.zape-input-mini:focus,
.zape-input-fluid:focus {
    background: #fff;
    border-color: var(--zape-purple);
}

.input-group-send {
    display: flex;
    gap: 0;
    /* Pegados */
}

.zape-input-fluid {
    flex: 1;
    border-right: none;
    /* Unir con botón */
}

.btn-send {
    background-color: var(--black);
    color: var(--zape-yellow);
    border: 2px solid var(--black);
    padding: 0 15px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-send:hover {
    background-color: var(--zape-purple);
    color: white;
}

/* Lista */
.comments-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.empty-comments {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 10px;
}

/* Item de Comentario Individual */
.comment-item {
    background-color: #f4f4f4;
    padding: 8px 12px;
    border-left: 3px solid var(--acid-green);
    font-size: 0.85rem;
}

.comment-author {
    font-weight: 800;
    color: var(--black);
    margin-right: 5px;
    text-transform: uppercase;
    font-size: 0.75rem;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ajuste para móvil: Que la barra no ocupe tanto espacio */
@media (max-width: 768px) {
    .profile-inner-nav {
        top: 0;
        /* En móvil suele haber menos elementos fijos arriba */
        padding: 10px 0;
    }

    /* Opcional: Ocultar el botón de "Volver" al hacer scroll hacia abajo para ganar espacio */
}

/* 4. Mejora visual para el texto "Sin equipo" */
.gear-grid p {
    font-family: 'Space Mono', monospace;
    color: var(--text-muted);
    font-style: italic;
    padding: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}

@media (max-width: 768px) {
    .execution-options {
        grid-template-columns: 1fr;
    }

    .zape-table {
        display: block;
        overflow-x: auto;
    }
}

/* Animación Infinita */
@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* Se mueve la mitad (un set completo) */
}

/* Ajuste Móvil */
@media (max-width: 768px) {
    .ticker-label {
        font-size: 0.9rem;
        padding: 0 10px;
    }

    .ticker-track-container {
        padding-left: 140px;
    }

    .ticker-shape {
        height: 50px;
    }
}

/* =========================================================================
   BLOQUE 8: ANIMACIONES & RESPONSIVE (EL AJUSTE FINAL)
   ========================================================================= */

/* --- KEYFRAMES CENTRALIZADOS --- */

/* Flotar (Stickers del Hero) */
@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(var(--r, 0deg));
    }

    50% {
        transform: translateY(-20px) rotate(var(--r, 0deg));
    }
}

/* Scroll Infinito (Cinta Marquee) */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Aparición Suave (Fades) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efecto Pop (Modales) */
@keyframes popIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Parpadeo (Alertas / Puntos de estado) */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* Deslizar desde derecha (Alertas) */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Vibración de Error (Formularios) */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* =========================================================================
   MEDIA QUERIES CONSOLIDADAS (RESPONSIVIDAD TOTAL)
   ========================================================================= */

/* --- TABLETS Y LAPTOPS PEQUEÑAS (Max 992px) --- */
@media (max-width: 992px) {

    /* Ajuste de Títulos Gigantes */
    .big-title {
        font-size: 8rem;
    }

    .side-title {
        font-size: 3rem;
    }

    /* Landing Page: Colapsar Grids */
    .zape-grid,
    .split-zone {
        grid-template-columns: 1fr;
        /* Una sola columna */
        height: auto;
        /* Quitar altura forzada */
    }

    /* Ajustes de Espaciado */
    .zape-content {
        text-align: center;
        margin-bottom: 50px;
    }

    .zape-description,
    .zape-description-secondary {
        margin-left: auto;
        margin-right: auto;
    }

    /* Visual del Hero (Tarjetas flotantes) */
    .zape-visual-container {
        height: 300px;
    }

    /* Feed: Ocultar Sidebar de Filtros (Podrías agregar un botón para mostrarlo) */
    .zape-layout-wrapper {
        grid-template-columns: 1fr;
    }

    .zape-sidebar {
        display: none;
    }
}

/* --- MÓVILES (Max 768px) --- */
@media (max-width: 768px) {

    /* Tipografía Móvil */
    .big-title {
        font-size: 4rem;
    }

    .auth-title {
        font-size: 2.5rem;
    }

    .feed-title {
        font-size: 2.5rem;
        text-align: center;
    }

    .manager-header h2 {
        font-size: 2rem;
        text-align: center;
    }

    /* Landing Page */
    .hero-tagline {
        font-size: 0.9rem;
    }

    .sticker {
        width: 80px;
    }

    /* Stickers más pequeños */

    /* Navegación */
    .zape-nav-top {
        padding: 15px;
    }

    .nav-label {
        display: none;
    }

    /* Ocultar texto "¿Eres creador?" */

    /* Feed de Talentos (Tarjetas Verticales) */
    .talent-card {
        flex-direction: column;
        height: auto;
    }

    .card-visual.vertical-mode {
        width: 100%;
        height: 250px;
        /* Video más alto en móvil */
        border-right: none;
        border-bottom: 3px solid var(--black);
    }

    .card-cta {
        display: none;
    }

    /* Ocultar "Ver Perfil" texto, el click es en toda la tarjeta */

    /* Perfil de Usuario */
    .profile-body {
        grid-template-columns: 1fr;
    }

    /* Colapsar sidebar y contenido */
    .profile-stats-box {
        border-right: none;
        border-bottom: 3px solid var(--black);
    }

    .pic-container {
        width: 100px;
        height: 100px;
        margin-top: -50px;
    }

    .profile-header h1 {
        font-size: 2rem;
    }

    /* Dashboard */
    .manager-header {
        flex-direction: column;
        gap: 15px;
    }

    .create-btn {
        width: 100%;
        justify-content: center;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    /* Tarjetas una por una */

    /* Ajustes Generales */
    .btn-brutal {
        width: 100%;
        padding: 12px;
        font-size: 1.2rem;
    }

    .split-side {
        padding: 40px 20px;
    }
}

/* --- PANTALLAS MUY PEQUEÑAS (Max 480px) --- */
@media (max-width: 480px) {
    .big-title {
        font-size: 3rem;
    }

    .zape-auth-card {
        padding: 20px;
    }

    /* Ajuste de botones en el header */
    .btn-zape-small {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    /* Feed de Actividad */
    .feed-stream {
        padding: 0;
    }

    .profile-feed {
        padding: 20px 10px;
    }
}