/* ═══════════════════════════════════════════════════════════════ JMSERVICES · Admin CSS Extiende Tailwind CDN con utilidades y componentes admin ═══════════════════════════════════════════════════════════════ */ [x-cloak] { display: none !important; } html, body { font-feature-settings: "cv02","cv03","cv04","cv11"; } /* Scrollbar discreto */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #D0D0D0; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #A8A8A8; } /* ═══════════════════════════════════════════════════════════════ DARK MODE — admin SIEMPRE oscuro ─────────────────────────────────────────────────────────────── El lleva class="dark" fijo. Cada bloque redefine los colores de las utilidades Tailwind cuando html.dark está presente, con mayor especificidad (html.dark .x) que la clase suelta (.x) generada por Tailwind CDN. ═══════════════════════════════════════════════════════════════ */ html.dark { color-scheme: dark; background-color: #0D0D0D; color: #F4F4F4; } /* ── Backgrounds ────────────────────────────────────────────── */ html.dark .bg-white { background-color: #1A1A1A; } /* cards/sidebar/topbar */ html.dark .bg-warm-50 { background-color: #0D0D0D; } /* page main bg */ html.dark .bg-warm-100 { background-color: #1F1F1F; } /* preview */ html.dark .bg-ink-50 { background-color: #1F1F1F; } /* hover */ html.dark .bg-ink-100 { background-color: #2A2A2A; } /* badges */ html.dark .bg-ink-200 { background-color: #3F3F3F; } /* dividers */ /* ── Text — escala invertida (claro→oscuro → oscuro→claro) ── */ html.dark .text-ink-50 { color: #F4F4F4; } html.dark .text-ink-100 { color: #E8E8E8; } html.dark .text-ink-200 { color: #D0D0D0; } html.dark .text-ink-300 { color: #A8A8A8; } html.dark .text-ink-400 { color: #7A7A7A; } html.dark .text-ink-500 { color: #A8A8A8; } /* muted pero legible */ html.dark .text-ink-600 { color: #D0D0D0; } html.dark .text-ink-700 { color: #D0D0D0; } /* nav items */ html.dark .text-ink-800 { color: #E8E8E8; } html.dark .text-ink-900 { color: #F4F4F4; } /* primary text */ /* Excepciones: lime-500/600 siempre con texto DARK (botones primarios, avatar topbar). Aplicamos a bg-lime y a inline-style. */ html.dark .bg-lime-500, html.dark .bg-lime-600, html.dark .bg-lime-700 { color: #1A1A1A; } html.dark .bg-lime-500 { background-color: #98C040; } html.dark .bg-lime-600 { background-color: #7CA434; } html.dark .hover\:bg-lime-600:hover { background-color: #7CA434; } html.dark .bg-rose-500, html.dark .bg-rose-600 { color: #FFFFFF; } html.dark .bg-rose-500 { background-color: #F43F5E; } html.dark .bg-rose-600 { background-color: #E11D48; } /* ── Borders ────────────────────────────────────────────────── */ html.dark .border-ink-100 { border-color: #1F1F1F; } html.dark .border-ink-200 { border-color: #2A2A2A; } html.dark .border-ink-300 { border-color: #3F3F3F; } html.dark .hover\:border-ink-100:hover { border-color: #1F1F1F; } html.dark .hover\:border-ink-200:hover { border-color: #2A2A2A; } html.dark .hover\:border-ink-300:hover { border-color: #3F3F3F; } /* ── Hover ──────────────────────────────────────────────────── */ html.dark .hover\:bg-ink-50:hover { background-color: #1F1F1F; } html.dark .hover\:bg-ink-100:hover { background-color: #2A2A2A; } html.dark .hover\:bg-ink-200:hover { background-color: #3F3F3F; } html.dark .hover\:text-ink-600:hover { color: #F4F4F4; } html.dark .hover\:text-ink-700:hover { color: #F4F4F4; } html.dark .hover\:text-ink-900:hover { color: #F4F4F4; } /* ── Accent lime (active state, badges) ─────────────────────── */ html.dark .bg-lime-50 { background-color: rgba(152, 192, 64, 0.15); } html.dark .bg-lime-100 { background-color: rgba(152, 192, 64, 0.20); } html.dark .text-lime-500 { color: #98C040; } html.dark .text-lime-600 { color: #A2BF5D; } html.dark .text-lime-700 { color: #A2BF5D; } html.dark .text-lime-800 { color: #B9CF85; } html.dark .hover\:text-lime-700:hover { color: #B9CF85; } /* ── Alerts (rose) ──────────────────────────────────────────── */ html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.12); } html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.20); } html.dark .text-rose-600 { color: #FB7185; } html.dark .text-rose-800 { color: #FDA4AF; } html.dark .border-rose-200 { border-color: rgba(244, 63, 94, 0.40); } html.dark .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, 0.18); } /* ── Status badges (emerald/amber/indus) ────────────────────── */ html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.20); } html.dark .text-emerald-800 { color: #6EE7B7; } html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.20); } html.dark .text-amber-800 { color: #FCD34D; } html.dark .bg-indus-50 { background-color: rgba(99, 102, 241, 0.10); } html.dark .bg-indus-100 { background-color: rgba(99, 102, 241, 0.18); } html.dark .text-indus-700 { color: #A5B4FC; } /* ── Linx variant (linderos y sombras) ─────────────────────── */ html.dark .ring-ink-100 { --tw-ring-color: #1F1F1F; } html.dark .ring-ink-200 { --tw-ring-color: #2A2A2A; } html.dark .shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.4); } html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5); } html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4); } /* ── Forms (input, textarea, select) ───────────────────────── */ html.dark input, html.dark textarea, html.dark select { background-color: #1F1F1F; color: #F4F4F4; border-color: #2A2A2A; } html.dark input::placeholder, html.dark textarea::placeholder { color: #5A5A5A; } html.dark input:focus, html.dark textarea:focus, html.dark select:focus { border-color: #98C040; background-color: #1A1A1A; } html.dark .jms-input, html.dark .jms-textarea, html.dark .jms-select { background-color: #1F1F1F; color: #F4F4F4; border-color: #2A2A2A; } /* ── File inputs ───────────────────────────────────────────── */ html.dark input[type="file"] { background-color: transparent; color: #D0D0D0; } html.dark input[type="file"]::file-selector-button { background-color: #2A2A2A; color: #F4F4F4; border: 1px solid #3F3F3F; padding: 0.4rem 0.8rem; border-radius: 0.375rem; margin-right: 0.75rem; cursor: pointer; } html.dark input[type="file"]::file-selector-button:hover { background-color: #3F3F3F; } /* ── Tableros y secciones (override de @apply en .jms-*) ── */ html.dark .jms-table { color: #E8E8E8; } html.dark .jms-table th { background-color: #1A1A1A; color: #A8A8A8; border-color: #2A2A2A; } html.dark .jms-table td { border-color: #1F1F1F; color: #D0D0D0; } html.dark .jms-table tr:hover td { background-color: #1F1F1F; } /* ── Botones secundarios (usados extensamente) ─────────────── */ html.dark .jms-btn-secondary, html.dark .bg-white.border { background-color: #1F1F1F; color: #E8E8E8; border-color: #2A2A2A; } html.dark .jms-btn-secondary:hover { background-color: #2A2A2A; } /* ── Selectores nativos y checkboxes ──────────────────────── */ html.dark select option { background-color: #1A1A1A; color: #F4F4F4; } html.dark input[type="checkbox"], html.dark input[type="radio"] { accent-color: #98C040; } /* ── Scrollbar oscuro ─────────────────────────────────────── */ html.dark ::-webkit-scrollbar-thumb { background: #2A2A2A; } html.dark ::-webkit-scrollbar-thumb:hover { background: #3F3F3F; } /* ── Selección de texto ───────────────────────────────────── */ html.dark ::selection { background-color: rgba(152, 192, 64, 0.35); color: #F4F4F4; } /* ── Dividers topbar (bg-ink-200 inline) ─────────────────── */ html.dark .bg-ink-200 { background-color: #2A2A2A; } /* ── Prose / contenido rich dentro de cards ──────────────── */ html.dark .prose { color: #D0D0D0; } html.dark .prose h1, html.dark .prose h2, html.dark .prose h3 { color: #F4F4F4; } html.dark .prose a { color: #A2BF5D; } html.dark .prose code { background-color: #2A2A2A; color: #B9CF85; } html.dark .prose blockquote { border-left-color: #98C040; color: #A8A8A8; } /* ── Markdown preview (.jms-md-preview) ──────────────────── */ html.dark .jms-md-preview { background-color: #1A1A1A; color: #D0D0D0; border-color: #2A2A2A; } html.dark .jms-md-preview pre { background-color: #0D0D0D; color: #B9CF85; } html.dark .jms-md-preview code { background-color: #2A2A2A; color: #B9CF85; } html.dark .jms-md-preview blockquote { color: #A8A8A8; } html.dark .jms-md-preview h1, html.dark .jms-md-preview h2, html.dark .jms-md-preview h3 { color: #F4F4F4; } /* ── Drag handle ─────────────────────────────────────────── */ html.dark .jms-drag-handle { color: #5A5A5A; } html.dark .jms-drag-handle:hover { color: #D0D0D0; } /* ── Card hover (sombra) ─────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { html.dark .jms-card { transition: box-shadow 200ms ease; } html.dark .jms-card:hover { box-shadow: 0 8px 20px -10px rgba(0,0,0,0.6); } } /* Tablas admin */ .jms-table { @apply w-full text-sm border-collapse; } .jms-table th { @apply text-left text-xs uppercase tracking-wide text-ink-500 font-semibold border-b border-ink-200 px-4 py-3 bg-warm-50; } .jms-table td { @apply px-4 py-3 border-b border-ink-100 text-ink-800; } .jms-table tr:hover td { @apply bg-warm-50; } /* Botones estándar */ .jms-btn { @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg font-semibold text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed; } .jms-btn-primary { @apply bg-lime-500 hover:bg-lime-600 text-ink-900; } .jms-btn-secondary { @apply bg-white border border-ink-200 text-ink-700 hover:bg-ink-50; } .jms-btn-danger { @apply bg-rose-500 hover:bg-rose-600 text-white; } .jms-btn-ghost { @apply text-ink-600 hover:bg-ink-100; } /* Forms */ .jms-field { @apply space-y-1.5; } .jms-label { @apply block text-sm font-semibold text-ink-900; } .jms-hint { @apply text-xs text-ink-500; } .jms-input, .jms-textarea, .jms-select { @apply w-full px-3.5 py-2.5 border border-ink-200 rounded-lg bg-white text-ink-900 focus:ring-2 focus:ring-lime-500 focus:border-lime-500 outline-none transition; } .jms-textarea { @apply font-mono text-sm leading-relaxed; } .jms-error { @apply text-xs text-rose-600 font-medium mt-1; } /* Tabs (ES / EN) */ .jms-tabs { @apply flex border-b border-ink-200 mb-4 gap-1; } .jms-tab { @apply px-4 py-2.5 text-sm font-semibold text-ink-500 border-b-2 border-transparent hover:text-ink-900 cursor-pointer transition-colors; } .jms-tab.active { @apply text-ink-900 border-lime-500; } /* Badges */ .jms-badge { @apply inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide; } .jms-badge-new { @apply bg-rose-100 text-rose-800; } .jms-badge-read { @apply bg-ink-100 text-ink-700; } .jms-badge-replied { @apply bg-emerald-100 text-emerald-800; } .jms-badge-archived { @apply bg-ink-50 text-ink-500; } .jms-badge-spam { @apply bg-ink-50 text-ink-400 line-through; } .jms-badge-draft { @apply bg-amber-100 text-amber-800; } .jms-badge-published { @apply bg-lime-100 text-lime-800; } .jms-badge-archived-post { @apply bg-ink-100 text-ink-500; } /* Card contenedor */ .jms-card { @apply bg-white border border-ink-100 rounded-xl p-5; } .jms-card-header { @apply flex items-center justify-between mb-4; } .jms-card-title { @apply font-bold text-ink-900; } /* Page header */ .jms-page-header { @apply flex flex-wrap items-end justify-between gap-3 mb-6; } .jms-page-title { @apply text-2xl font-bold text-ink-900; } .jms-page-subtitle { @apply text-sm text-ink-500; } /* Image picker preview */ .jms-image-picker-preview { @apply mt-2 w-32 h-32 rounded-lg border border-ink-200 bg-cover bg-center bg-no-repeat bg-warm-100; } /* Drag indicator para galería / métricas */ .jms-drag-handle { @apply cursor-move text-ink-400 hover:text-ink-700; } /* Animaciones sutiles */ @media (prefers-reduced-motion: no-preference) { .jms-card { transition: box-shadow 200ms ease; } .jms-card:hover { box-shadow: 0 8px 20px -10px rgba(0,0,0,0.1); } } /* Editor markdown preview */ .jms-md-preview { @apply p-4 bg-warm-50 border border-ink-100 rounded-lg prose prose-sm max-w-none; } .jms-md-preview h1 { @apply text-2xl font-bold text-ink-900 mt-4 mb-2; } .jms-md-preview h2 { @apply text-xl font-bold text-ink-900 mt-4 mb-2; } .jms-md-preview h3 { @apply text-lg font-bold text-ink-900 mt-3 mb-1.5; } .jms-md-preview p { @apply my-2 leading-relaxed; } .jms-md-preview ul { @apply list-disc pl-6 my-2; } .jms-md-preview ol { @apply list-decimal pl-6 my-2; } .jms-md-preview a { @apply text-lime-700 underline; } .jms-md-preview img { @apply rounded-lg my-3 max-w-full; } .jms-md-preview code { @apply bg-ink-100 px-1 py-0.5 rounded text-sm font-mono; } .jms-md-preview pre { @apply bg-ink-900 text-lime-400 p-3 rounded-lg overflow-x-auto text-sm; } .jms-md-preview blockquote { @apply border-l-4 border-lime-500 pl-4 italic text-ink-600 my-3; } /* Alpine cloak: oculta elementos con x-cloak hasta que Alpine los hidrate */ [x-cloak] { display: none !important; } /* ═══════════════════════════════════════════════════════════════ Utilidades admin (light/dark safe) ─────────────────────────────────────────────────────────────── El admin SIEMPRE va en dark mode, pero algunos elementos del frontend público (logos, encabezados) necesitan verse igual de bien en ambos modos. Estas clases fuerzan estilos coherentes. ═══════════════════════════════════════════════════════════════ */ /* Encabezados de tabla — fondo gris medio con buen contraste */ .jms-th { background-color: #F3F4F6; color: #1F2937; border-bottom: 2px solid #D1D5DB; text-align: left; padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } html.dark .jms-th { background-color: #2A2A2A; color: #F4F4F4; border-bottom-color: #98C040; } /* Marco de logo de fabricante — siempre blanco en ambos modos */ .jms-logo-frame { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; min-width: 5rem; padding: 0.5rem; background-color: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.06); transition: all 0.15s ease; } .jms-logo-frame:hover { border-color: #98C040; box-shadow: 0 4px 8px rgba(0,0,0,0.12); } .jms-logo-frame img { max-height: 1.75rem; max-width: 4.25rem; width: auto; height: auto; object-fit: contain; } html.dark .jms-logo-frame { background-color: #FFFFFF !important; border-color: #D1D5DB; box-shadow: 0 2px 6px rgba(0,0,0,0.5); } html.dark .jms-logo-frame:hover { border-color: #98C040; box-shadow: 0 4px 10px rgba(152, 192, 64, 0.25); }