* { box-sizing: border-box; }

:root {
    --bg: #0d1117;
    --bg-elevado: #161b22;
    --bg-tarjeta: #1c232c;
    --borde: #2a3542;
    --texto: #e6edf3;
    --texto-tenue: #8b98a5;
    --acento: #00d9c0;
    --acento-glow: rgba(0, 217, 192, 0.35);
    --azul: #58a6ff;
    --amarillo: #e3b341;
    --rojo: #f85149;
    --verde: #3fb950;
    --morado: #bc8cff;
}

html[data-tema="claro"] {
    --bg: #f3f5f7;
    --bg-elevado: #ffffff;
    --bg-tarjeta: #ffffff;
    --borde: #dde2e7;
    --texto: #1c232c;
    --texto-tenue: #5b6572;
    --acento: #00a894;
    --acento-glow: rgba(0, 168, 148, 0.25);
    --azul: #1a73e8;
    --amarillo: #b8860b;
    --rojo: #d93025;
    --verde: #1e8e3e;
    --morado: #8e44ec;
}

html[data-tema="claro"] body {
    background-image:
        radial-gradient(circle at 15% 10%, rgba(0, 168, 148, 0.05), transparent 35%),
        radial-gradient(circle at 85% 90%, rgba(26, 115, 232, 0.04), transparent 35%);
}

html[data-tema="claro"] .login-box button,
html[data-tema="claro"] .form-simple button,
html[data-tema="claro"] .form-bitacora button,
html[data-tema="claro"] .editar-entry button,
html[data-tema="claro"] .btn-topbar-destacado {
    color: #ffffff !important;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--texto);
    background-image:
        radial-gradient(circle at 15% 10%, rgba(0, 217, 192, 0.06), transparent 35%),
        radial-gradient(circle at 85% 90%, rgba(88, 166, 255, 0.05), transparent 35%);
    background-attachment: fixed;
}

a { color: var(--acento); }

body.solo-lectura {
    user-select: none;
    -webkit-user-select: none;
}

@keyframes aparecer {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulso {
    0%, 100% { box-shadow: 0 0 0 0 var(--acento-glow); }
    50% { box-shadow: 0 0 0 5px transparent; }
}
@keyframes parpadeo-cursor {
    0%, 45% { border-color: var(--acento); }
    50%, 100% { border-color: transparent; }
}

/* --- Login / Registro --- */
.login-page { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-box {
    background: var(--bg-elevado);
    padding: 32px;
    border-radius: 10px;
    width: 300px;
    border: 1px solid var(--borde);
    box-shadow: 0 0 40px rgba(0, 217, 192, 0.08);
    animation: aparecer .35s ease;
}
.login-box h1 {
    margin: 0; color: var(--acento); letter-spacing: 2px;
    border-right: 2px solid var(--acento);
    display: inline-block;
    animation: parpadeo-cursor .8s step-end infinite;
    min-height: 1.2em;
}
.login-logo { display: block; width: 64px; height: auto; margin: 0 auto 16px; }
.login-box .subtitle {
    color: var(--texto-tenue); margin-top: 4px; margin-bottom: 20px; font-size: 14px;
    opacity: 0; transition: opacity .6s ease;
}
.login-box .subtitle.subtitle-visible { opacity: 1; }
.login-box label { display: block; margin-top: 12px; font-size: 14px; color: var(--texto-tenue); }
.login-box input {
    width: 100%; padding: 9px; margin-top: 4px; border: 1px solid var(--borde);
    border-radius: 6px; background: var(--bg); color: var(--texto); transition: border-color .15s;
}
.login-box input:focus { outline: none; border-color: var(--acento); }
.login-box button {
    width: 100%; margin-top: 20px; padding: 10px; background: var(--acento); color: #04211d;
    font-weight: 600; border: none; border-radius: 6px; cursor: pointer; transition: transform .1s, box-shadow .2s;
}
.login-box button:hover { box-shadow: 0 0 16px var(--acento-glow); transform: translateY(-1px); }
.login-box .error { color: var(--rojo); font-size: 14px; }
.exito { color: var(--verde); font-size: 14px; background: rgba(63,185,80,.1); padding: 10px 14px; border-radius: 6px; }
.error { color: var(--rojo); font-size: 14px; }
.login-box a { display: inline-block; margin-top: 16px; }

/* --- Topbar --- */
.topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 24px; background: var(--bg-elevado); border-bottom: 1px solid var(--borde);
}
.marca { font-weight: 600; letter-spacing: .5px; }
.marca-punto { color: var(--acento); }
.topbar-logo { height: 28px; width: auto; vertical-align: middle; margin-right: 4px; }
.rol-badge {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    background: rgba(0, 217, 192, 0.12); color: var(--acento);
    padding: 2px 8px; border-radius: 20px; margin-left: 6px;
}
.topbar a { color: var(--texto-tenue); margin-left: 16px; text-decoration: none; transition: color .15s; }
.topbar a:hover { color: var(--acento); }
.acciones-topbar { display: flex; align-items: center; }
.btn-topbar-destacado {
    background: var(--acento); color: #04211d !important; font-weight: 700;
    padding: 7px 16px; border-radius: 20px; margin-left: 16px; transition: box-shadow .2s, transform .1s;
}
.btn-topbar-destacado:hover { box-shadow: 0 0 14px var(--acento-glow); transform: translateY(-1px); }

/* --- Pestañas de categoría --- */
.tabs-categoria {
    display: flex; gap: 6px; padding: 12px 24px 0; overflow-x: auto;
    border-bottom: 1px solid var(--borde); background: var(--bg-elevado);
}
.tab {
    color: var(--texto-tenue); text-decoration: none; padding: 8px 14px;
    border-radius: 8px 8px 0 0; font-size: 13px; white-space: nowrap;
    border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--texto); }
.tab-activa { color: var(--acento); border-bottom: 2px solid var(--acento); }
.tab-contador {
    background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 20px;
    font-size: 11px; margin-left: 4px;
}

/* --- Tablero --- */
.board { display: flex; gap: 16px; padding: 24px; overflow-x: auto; }
.column {
    background: var(--bg-elevado); border-radius: 10px; padding: 14px; width: 270px;
    flex-shrink: 0; border: 1px solid var(--borde); animation: aparecer .3s ease;
}
.column h2 { font-size: 14px; margin: 0 0 12px; color: var(--texto-tenue); display: flex; justify-content: space-between; }
.contador { background: var(--bg); padding: 1px 8px; border-radius: 20px; font-size: 12px; }

.column-idea h2 { border-left: 3px solid var(--texto-tenue); padding-left: 8px; }
.column-en_progreso h2 { border-left: 3px solid var(--azul); padding-left: 8px; }
.column-finalizado h2 { border-left: 3px solid var(--verde); padding-left: 8px; }
.column-postproduccion h2 { border-left: 3px solid var(--morado); padding-left: 8px; }

.card-link { text-decoration: none; color: inherit; display: block; }
.card {
    position: relative;
    background: var(--bg-tarjeta); border: 1px solid var(--borde); border-radius: 8px;
    padding: 12px; margin-bottom: 10px; transition: transform .15s, border-color .15s, box-shadow .15s;
    animation: aparecer .3s ease;
}
.card:hover { transform: translateY(-2px); border-color: var(--acento); box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.card h3 { margin: 0 0 6px; font-size: 14px; }
.card .fecha { font-size: 12px; color: var(--texto-tenue); margin: 0; }
.asignado-mini { font-size: 12px; color: var(--texto-tenue); margin: 4px 0 0; }
.vacio { font-size: 13px; color: var(--texto-tenue); }

.card.prioridad-alta { border-left: 3px solid var(--rojo); }
.card.prioridad-media { border-left: 3px solid var(--amarillo); }
.card.prioridad-baja { border-left: 3px solid var(--texto-tenue); }

.badge {
    position: absolute; top: -8px; right: 10px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; padding: 3px 8px; border-radius: 20px;
    animation: pulso 2s infinite;
}
.badge-nuevo { background: var(--acento); color: #04211d; }
.badge-actualizado { background: var(--amarillo); color: #2b2007; }

/* --- Contenido / detalle de tarea --- */
.contenido { max-width: 720px; margin: 24px auto; padding: 0 16px; animation: aparecer .3s ease; }

.tarjeta-fecha {
    background: var(--bg-elevado); border: 1px solid var(--borde); border-radius: 10px;
    padding: 16px; margin-bottom: 20px;
}
.fecha-central { font-size: 22px; font-weight: bold; color: var(--acento); }
.fecha-rango { color: var(--texto-tenue); margin-top: 4px; }
.fecha-meta { font-size: 13px; color: var(--texto-tenue); }
.tarjeta-fecha hr { border-color: var(--borde); }

.estado-pill, .prioridad-pill, .categoria-pill {
    display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 13px; margin-right: 6px;
}
.categoria-pill { background: rgba(255,255,255,.06); color: var(--texto-tenue); }
.estado-idea { background: rgba(139,152,165,.15); color: var(--texto-tenue); }
.estado-en_progreso { background: rgba(88,166,255,.15); color: var(--azul); }
.estado-finalizado { background: rgba(63,185,80,.15); color: var(--verde); }
.estado-postproduccion { background: rgba(188,140,255,.15); color: var(--morado); }
.estado-abierto { background: rgba(227,179,65,.15); color: var(--amarillo); }
.estado-cerrado { background: rgba(63,185,80,.15); color: var(--verde); }
.prioridad-alta { background: rgba(248,81,73,.15); color: var(--rojo); }
.prioridad-media { background: rgba(227,179,65,.15); color: var(--amarillo); }
.prioridad-baja { background: rgba(139,152,165,.15); color: var(--texto-tenue); }

.column-ticket-abierto h2 { border-left: 3px solid var(--amarillo); padding-left: 8px; }
.column-ticket-en_progreso h2 { border-left: 3px solid var(--azul); padding-left: 8px; }
.column-ticket-cerrado h2 { border-left: 3px solid var(--verde); padding-left: 8px; }

.ticket-card { border-left: 3px solid var(--acento); }
.ticket-descripcion-mini { font-size: 12px; color: var(--texto-tenue); margin: 4px 0; }

.titulo-modulo { padding: 20px 24px 0; margin: 0; }

/* --- Barra de filtros de tickets --- */
.barra-filtros { display: flex; gap: 10px; align-items: center; padding: 16px 24px 0; flex-wrap: wrap; }
.barra-filtros input, .barra-filtros select {
    padding: 8px 10px; border: 1px solid var(--borde); border-radius: 6px;
    background: var(--bg-elevado); color: var(--texto); font-size: 13px;
}
.barra-filtros button {
    padding: 8px 14px; background: var(--acento); color: #04211d; border: none;
    border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 13px;
}
.limpiar-filtros { font-size: 13px; color: var(--texto-tenue); text-decoration: underline; }

/* --- Resumen de carga por técnico --- */
.resumen-tecnicos { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 24px 0; }
.resumen-tecnico-item {
    background: var(--bg-elevado); border: 1px solid var(--borde); border-radius: 8px;
    padding: 8px 14px; font-size: 13px; display: flex; flex-direction: column; gap: 2px;
}
.resumen-tecnico-item span { color: var(--texto-tenue); font-size: 12px; }

/* --- Sidebar colapsable --- */
.topbar-toggle {
    background: none; border: 1px solid var(--borde); color: var(--texto-tenue);
    border-radius: 6px; width: 32px; height: 32px; font-size: 15px; cursor: pointer;
    margin-right: 10px; transition: color .15s, border-color .15s;
}
.topbar-toggle:hover { color: var(--acento); border-color: var(--acento); }
.toggle-tema-flotante {
    position: fixed; top: 20px; right: 20px; background: var(--bg-elevado);
    border: 1px solid var(--borde); color: var(--texto-tenue); border-radius: 50%;
    width: 38px; height: 38px; font-size: 16px; cursor: pointer; transition: border-color .15s;
}
.toggle-tema-flotante:hover { border-color: var(--acento); }
body.sidebar-colapsado .sidebar { width: 0; padding: 20px 0; overflow: hidden; border-right: none; }
body.sidebar-colapsado .sidebar-texto { display: none; }
body.sidebar-colapsado .sidebar-inicio { padding-left: 0; text-align: center; }

/* --- Formulario grande de ticket --- */
.form-ticket-grande { max-width: 100%; }
.encabezado-formulario { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.encabezado-icono-svg { width: 40px; height: 40px; flex-shrink: 0; }
.encabezado-formulario h1 { margin: 0 0 4px; font-size: 20px; }
.encabezado-formulario .ayuda { margin: 0; }
.fila-formulario { display: flex; gap: 14px; }
.fila-formulario > div { flex: 1; display: flex; flex-direction: column; }

/* --- Panel principal (tarjetas de módulos) --- */
.panel-modulos {
    display: flex; flex-wrap: wrap; gap: 18px; padding: 40px; max-width: 900px; margin: 0 auto;
}
.modulo-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; width: 180px; height: 140px; background: var(--bg-elevado);
    border: 1px solid var(--borde); border-radius: 12px; text-decoration: none; color: var(--texto);
    transition: transform .15s, border-color .15s, box-shadow .15s; animation: aparecer .3s ease;
}
.modulo-card:hover { transform: translateY(-3px); border-color: var(--acento); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.modulo-icono { font-size: 32px; }
.modulo-label { font-size: 14px; text-align: center; font-weight: 600; }

/* --- Layout con menú lateral --- */
.app-shell { display: flex; min-height: calc(100vh - 53px); }
.sidebar {
    width: 220px; flex-shrink: 0; background: var(--bg-elevado); border-right: 1px solid var(--borde);
    padding: 20px 0; display: flex; flex-direction: column; justify-content: space-between;
}
.sidebar nav { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
.sidebar-link {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
    color: var(--texto-tenue); text-decoration: none; font-size: 14px; transition: background .15s, color .15s;
}
.sidebar-link:hover { background: rgba(255,255,255,.04); color: var(--texto); }
.sidebar-link-activo { background: rgba(0,217,192,.1); color: var(--acento); }
.sidebar-icono { font-size: 16px; }
.sidebar-inicio { display: block; padding: 10px 24px; color: var(--texto-tenue); text-decoration: none; font-size: 13px; }
.sidebar-inicio:hover { color: var(--acento); }
.main-area { flex: 1; min-width: 0; }
.main-area.contenido { margin: 24px auto; }
.main-area .board { padding: 24px; }
.main-area .tabs-categoria { padding: 20px 24px 0; }

.asignado { font-size: 14px; color: var(--texto-tenue); }

.controles-flujo { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.controles-flujo .form-inline { margin: 0; }
.controles-flujo label { display: block; font-size: 12px; color: var(--texto-tenue); margin-bottom: 3px; }

.form-simple, .form-bitacora form, .editar-entry form {
    display: flex; flex-direction: column; background: var(--bg-elevado);
    padding: 16px; border-radius: 10px; margin-top: 12px; border: 1px solid var(--borde);
}
.form-simple label, .form-bitacora label { margin-top: 10px; font-size: 14px; color: var(--texto-tenue); }
.form-simple input, .form-simple textarea, .form-simple select,
.form-bitacora input, .form-bitacora textarea,
.editar-entry input, .editar-entry textarea {
    padding: 8px; border: 1px solid var(--borde); border-radius: 6px; margin-top: 6px;
    background: var(--bg); color: var(--texto);
}
.form-simple button, .form-bitacora button, .editar-entry button {
    margin-top: 14px; padding: 10px; background: var(--acento); color: #04211d; font-weight: 600;
    border: none; border-radius: 6px; cursor: pointer; align-self: flex-start; transition: box-shadow .2s;
}
.form-simple button:hover, .form-bitacora button:hover { box-shadow: 0 0 16px var(--acento-glow); }
.form-inline select { background: var(--bg-elevado); color: var(--texto); border: 1px solid var(--borde); padding: 6px; border-radius: 6px; }
.codigo { font-family: 'Cascadia Code', monospace; }

.area-bloque { background: var(--bg-elevado); border: 1px solid var(--borde); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.area-bloque h3 { margin-top: 0; color: var(--acento); }
.bitacora-entry { border-left: 3px solid var(--borde); padding-left: 12px; margin-bottom: 14px; }
.bitacora-fecha { font-size: 12px; color: var(--texto-tenue); }
.herramientas { font-size: 13px; color: var(--texto-tenue); }
.bitacora-entry pre { background: var(--bg); padding: 10px; border-radius: 6px; overflow-x: auto; border: 1px solid var(--borde); }

.form-bitacora summary, .editar-entry summary { cursor: pointer; color: var(--acento); font-weight: bold; margin-top: 8px; font-size: 13px; }

.acciones-entry { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.form-eliminar-tarea { margin: 20px 0; }
.btn-eliminar {
    background: rgba(248,81,73,.15); color: var(--rojo); border: 1px solid var(--rojo);
    padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.btn-eliminar:hover { background: rgba(248,81,73,.3); }

.tabla-simple { width: 100%; border-collapse: collapse; margin-top: 12px; }
.tabla-simple th, .tabla-simple td { text-align: left; padding: 8px; border-bottom: 1px solid var(--borde); font-size: 14px; }
.acciones-usuario { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acciones-usuario form { margin: 0; }
.acciones-usuario button {
    background: var(--bg-elevado); color: var(--texto-tenue); border: 1px solid var(--borde);
    padding: 4px 8px; border-radius: 6px; font-size: 12px; cursor: pointer; transition: color .15s, border-color .15s;
}
.acciones-usuario button:hover { color: var(--acento); border-color: var(--acento); }

/* --- Ranking / podio --- */
.podio { display: flex; gap: 14px; margin: 20px 0; align-items: flex-end; }
.podio-item {
    flex: 1; background: var(--bg-elevado); border: 1px solid var(--borde); border-radius: 10px;
    padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    animation: aparecer .3s ease;
}
.podio-medalla { font-size: 30px; }
.podio-cifra { font-size: 26px; font-weight: 700; color: var(--acento); }
.podio-etiqueta { font-size: 12px; color: var(--texto-tenue); }
.podio-1 { order: 2; border-color: var(--amarillo); box-shadow: 0 0 20px rgba(227,179,65,.15); padding-top: 10px; }
.podio-2 { order: 1; }
.podio-3 { order: 3; }

.ranking-main.contenido { max-width: 1100px; }
.estadisticas-main.contenido { max-width: 1100px; }
.tabs-periodo { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs-periodo .tab {
    background: var(--bg-elevado); border: 1px solid var(--borde); border-radius: 20px;
    padding: 6px 14px; border-bottom: 1px solid var(--borde);
}
.tabs-periodo .tab-activa { background: rgba(0,217,192,.12); border-color: var(--acento); color: var(--acento); }

.tarjetas-resumen { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 18px; }
.tarjeta-resumen {
    background: var(--bg-elevado); border: 1px solid var(--borde); border-radius: 8px;
    padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 90px;
}
.tarjeta-resumen strong { font-size: 22px; color: var(--acento); }
.tarjeta-resumen span { font-size: 12px; color: var(--texto-tenue); }
.ranking-mes { margin-bottom: 4px; }
.ranking-columnas { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.ranking-columna { flex: 1; min-width: 320px; }
.ranking-columna h1 { font-size: 18px; margin-bottom: 2px; }
.ranking-columna .podio { margin: 14px 0; }

.link-generado { background: var(--bg-elevado); border: 1px solid var(--borde); padding: 14px; border-radius: 8px; margin-top: 16px; }
.link-generado input { width: 100%; padding: 8px; margin-top: 6px; border: 1px solid var(--borde); border-radius: 6px; background: var(--bg); color: var(--acento); }
.ayuda { color: var(--texto-tenue); font-size: 14px; }