/* ============================================================
   Tarot del Trabajo (tt) - Estilos de la aplicación profesional
   Namespace: .tt-app
   ============================================================ */

.tt-app {
    --tt-gradiente: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --tt-gradiente-exito: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --tt-gradiente-reverso: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --tt-purpura: #8b5cf6;
    --tt-verde: #10b981;
    --tt-azul: #3b82f6;
    --tt-dorado: #f59e0b;
    --tt-rojo: #ef4444;
    --tt-sombra: 0 8px 25px rgba(102, 126, 234, 0.22);
    --tt-radio: 16px;
    --tt-trans: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #e2e8f0;
}

@keyframes ttFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.tt-fase { animation: ttFadeIn 0.6s ease; }

/* Header */
.tt-header { text-align: center; margin-bottom: 2rem; }
.tt-titulo { font-size: 1.6rem; font-weight: 700; background: var(--tt-gradiente-exito); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.4rem; }
.tt-subtitulo { opacity: 0.75; font-size: 1rem; }

/* Tiradas grid */
.tt-tiradas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; margin-bottom: 2.5rem; }
.tt-btn-tirada {
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: var(--tt-radio);
    padding: 1.5rem 1.2rem; cursor: pointer; color: #e2e8f0; text-align: center; transition: var(--tt-trans);
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem; position: relative; overflow: hidden;
}
.tt-btn-tirada::before { content: ''; position: absolute; inset: 0; background: var(--tt-gradiente); opacity: 0; transition: opacity 0.35s; border-radius: inherit; }
.tt-btn-tirada > * { position: relative; z-index: 1; }
.tt-btn-tirada:hover { border-color: var(--tt-purpura); transform: translateY(-6px); box-shadow: var(--tt-sombra); }
.tt-btn-tirada:hover::before { opacity: 0.12; }
.tt-icon { font-size: 2.4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.tt-nombre { font-weight: 700; font-size: 1.1rem; }
.tt-cartas { background: rgba(102, 126, 234, 0.25); padding: 0.15rem 0.9rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.tt-desc { font-size: 0.85rem; opacity: 0.65; }

/* Pregunta */
.tt-pregunta-container { margin-top: 0.5rem; }
.tt-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; font-weight: 500; opacity: 0.85; }
.tt-label-icon { font-size: 1.3rem; }
.tt-input { width: 100%; padding: 1rem; border-radius: 12px; border: 1px solid rgba(102, 126, 234, 0.22); background: rgba(255, 255, 255, 0.05); color: #e2e8f0; font-family: inherit; font-size: 0.95rem; resize: vertical; transition: var(--tt-trans); box-sizing: border-box; }
.tt-input:focus { outline: none; border-color: var(--tt-purpura); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); }
.tt-contador { text-align: right; font-size: 0.78rem; opacity: 0.55; margin-top: 0.35rem; }
.tt-error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.35); color: #fca5a5; padding: 1rem; border-radius: 12px; margin-top: 1.5rem; font-size: 0.9rem; }

/* Loading */
.tt-loading { min-height: 320px; display: flex; align-items: center; justify-content: center; text-align: center; }
.tt-spinner-box { position: relative; width: 100px; height: 100px; margin: 0 auto 2rem; }
.tt-spinner-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; animation: ttPulse 2s ease-in-out infinite; }
@keyframes ttPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.15); } }
.tt-spinner-rings { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tt-ring { position: absolute; border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 50%; animation: ttRingExpand 3.5s ease-out infinite; }
.tt-r1 { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
.tt-r2 { width: 100px; height: 100px; margin: -50px 0 0 -50px; animation-delay: 0.9s; }
.tt-r3 { width: 130px; height: 130px; margin: -65px 0 0 -65px; animation-delay: 1.8s; }
@keyframes ttRingExpand { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1); opacity: 0; } }
.tt-loading-text { font-size: 1.15rem; font-weight: 600; margin: 0.5rem 0 0.3rem; }
.tt-loading-sub { font-size: 0.9rem; opacity: 0.55; font-style: italic; }

/* Cartas boca abajo */
.tt-cartas-titulo { text-align: center; font-size: 1.4rem; margin-bottom: 2.5rem; background: var(--tt-gradiente-exito); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.tt-cartas-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 1.8rem; }
.tt-carta-wrapper { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.tt-carta-pos { font-size: 0.85rem; font-weight: 500; opacity: 0.7; text-align: center; max-width: 150px; }
.tt-carta { width: 140px; height: 210px; perspective: 800px; cursor: pointer; }
.tt-carta-inner { position: relative; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; }
.tt-carta.tt-revelada .tt-carta-inner { transform: rotateY(180deg); }
.tt-carta-frontal, .tt-carta-reverso { position: absolute; inset: 0; border-radius: var(--tt-radio); backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; }
.tt-carta-reverso { background: var(--tt-gradiente-reverso); border: 1px solid rgba(102, 126, 234, 0.18); box-shadow: var(--tt-sombra); }
.tt-rev-patron { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.tt-rev-icon { font-size: 2rem; opacity: 0.6; }
.tt-rev-misterio { font-size: 1.4rem; font-weight: 700; opacity: 0.4; }
.tt-carta-frontal { transform: rotateY(180deg); border: 1px solid rgba(255,255,255,0.1); }
.tt-elem-fuego { background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%); }
.tt-elem-agua  { background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%); }
.tt-elem-aire  { background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%); }
.tt-elem-tierra{ background: linear-gradient(135deg, #065f46 0%, #059669 100%); }
.tt-carta-simbolo { font-size: 3rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.tt-carta-nombre { font-size: 0.85rem; font-weight: 600; text-align: center; }
.tt-carta-elem { font-size: 0.68rem; text-transform: uppercase; background: rgba(0,0,0,0.35); padding: 0.1rem 0.6rem; border-radius: 10px; }
.tt-carta:not(.tt-revelada):hover .tt-carta-inner { transform: scale(1.06); }

/* Resultado */
.tt-resultado-header { text-align: center; margin-bottom: 2.5rem; }
.tt-resultado-titulo { font-size: 1.5rem; font-weight: 700; background: var(--tt-gradiente-exito); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; }
.tt-resultado-pregunta { font-size: 0.95rem; opacity: 0.75; font-style: italic; }
.tt-lbl-preg { font-weight: 600; font-style: normal; opacity: 0.9; }
.tt-resultado-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.8rem; }
.tt-resultado-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(102, 126, 234, 0.15); border-radius: var(--tt-radio); padding: 1.8rem; animation: ttFadeIn 0.6s ease both; }
.tt-res-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.tt-res-simbolo { width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; }
.tt-res-info h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.25rem; }
.tt-badge { display: inline-block; font-size: 0.68rem; text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: 8px; opacity: 0.8; }
.tt-badge-fuego { background: rgba(220, 38, 38, 0.3); }
.tt-badge-agua  { background: rgba(59, 130, 246, 0.3); }
.tt-badge-aire  { background: rgba(124, 58, 237, 0.3); }
.tt-badge-tierra{ background: rgba(5, 150, 105, 0.3); }
.tt-res-pos { font-size: 0.85rem; font-weight: 600; opacity: 0.8; margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(102, 126, 234, 0.12); }
.tt-res-mensaje { line-height: 1.7; opacity: 0.9; margin-bottom: 1.2rem; }
.tt-res-consejo { background: rgba(16, 185, 129, 0.1); border-left: 3px solid var(--tt-verde); padding: 1rem 1.2rem; border-radius: 0 10px 10px 0; font-size: 0.9rem; }
.tt-consejo-lbl { font-weight: 700; color: #6ee7b7; }

/* Botón nueva */
.tt-nueva-consulta { text-align: center; margin-top: 3rem; }
.tt-btn-nueva { background: var(--tt-gradiente-exito); border: none; padding: 0.9rem 2.5rem; border-radius: 30px; color: white; font-weight: 700; font-size: 1rem; cursor: pointer; transition: var(--tt-trans); box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3); display: inline-flex; align-items: center; gap: 0.6rem; }
.tt-btn-nueva:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(16, 185, 129, 0.45); }

/* Responsive */
@media (max-width: 768px) {
    .tt-tiradas-grid { grid-template-columns: repeat(2, 1fr); }
    .tt-carta { width: 120px; height: 180px; }
    .tt-resultado-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .tt-tiradas-grid { grid-template-columns: 1fr; }
    .tt-carta { width: 105px; height: 158px; }
    .tt-carta-simbolo { font-size: 2rem; }
    .tt-resultado-card { padding: 1.3rem; }
}

@media (prefers-contrast: high) { .tt-btn-tirada, .tt-carta-reverso, .tt-resultado-card { border: 2px solid white; } }
@media (prefers-reduced-motion: reduce) { .tt-ring, .tt-spinner-icon { animation: none; } .tt-carta-inner { transition: none; } }
@media print {
    .tt-btn-tirada, .tt-pregunta-container, .tt-loading, .tt-carta { display: none; }
    .tt-resultado-card { break-inside: avoid; background: white; color: black; border: 1px solid #ccc; }
}