/* ===================================================
   ANTS 3.0
   =================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial,Helvetica,sans-serif;

    background:linear-gradient(180deg,#FFE66D 0%,#FFD54F 100%);

    min-height:100vh;

    color:#222;

}

.oculto{

    display:none;

}

/* ================= Splash ================= */

#splash{

    position:fixed;

    inset:0;

    background:#FFD54F;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:999;

    animation:desaparecer .8s ease forwards;

    animation-delay:1.8s;

}

.antSplash{

    width:180px;

    animation:flotar 2s infinite ease-in-out;

}

#splash h1{

    margin-top:20px;

    font-size:42px;

    letter-spacing:4px;

}

#splash p{

    margin-top:10px;

    font-size:18px;

    color:#444;

}

@keyframes desaparecer{

to{

opacity:0;

visibility:hidden;

}

}

@keyframes flotar{

0%{transform:translateY(0);}

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

100%{transform:translateY(0);}

}

/* ================= Marca personal ================= */

.marca{

    text-align:center;

}

.logoMarca{

    display:block;

    margin:auto;

}

/* En el splash: separado del título por una línea fina */
.marcaSplash{

    margin-top:28px;

    padding-top:16px;

    border-top:1px solid rgba(0,0,0,.15);

    width:150px;

}

.marcaSplash .logoMarca{

    width:110px;

}

/* Al pie de la app: discreto, después del historial */
.marcaPie{

    margin:20px 0 8px;

    opacity:.6;

}

.marcaPie .logoMarca{

    width:96px;

}

/* ================= App ================= */

#app{

    max-width:460px;

    margin:auto;

    padding:16px;

}

header{

    text-align:center;

    margin-top:16px;

}

.logo{

    width:88px;

    filter:drop-shadow(0 8px 14px rgba(0,0,0,.25));

}

header h2{

    margin-top:10px;

    font-size:23px;

}

/* ================= Selector de idioma ================= */

/* flex-end (no space-between): así, si el badge de premium está
   oculto, el selector de idioma se queda solo pegado a la derecha
   en vez de irse al extremo izquierdo. Cuando el badge sí se
   muestra, su propio margin-right:auto empuja al selector afuera. */
.barraSuperior{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:8px;

    margin-top:4px;

}

.selectorIdioma{

    padding:7px 10px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,.55);

    color:#5b4a00;

    font-size:13px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.selectorIdioma:hover{

    background:rgba(255,255,255,.85);

}

/* ================= Premium ================= */

.badgePremium{

    margin-right:auto;

    padding:7px 10px;

    border-radius:12px;

    background:linear-gradient(135deg,#7c4dff,#5c3dd6);

    color:#fff;

    font-size:12px;

    font-weight:bold;

}

.bannerPremium{

    margin-top:14px;

    display:flex;

    align-items:center;

    gap:12px;

    background:linear-gradient(135deg,#7c4dff,#5c3dd6);

    border-radius:18px;

    padding:14px 16px;

    box-shadow:0 8px 20px rgba(92,61,214,.35);

    color:#fff;

}

/* Misma trampa que .rangoFechas: sin esto, ".bannerPremium{display:
   flex}" le gana a ".oculto{display:none}" por venir después en la
   hoja, y el banner queda visible aunque tenga la clase oculto. */
.bannerPremium.oculto{

    display:none;

}

.bannerPremioTexto{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:2px;

}

.bannerPremioTexto strong{

    font-size:14px;

}

.bannerPremioTexto small{

    font-size:12px;

    opacity:.9;

}

.bannerPremioAccion{

    flex:none;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:6px;

}

.bannerPremioPrecio{

    max-width:170px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:2px;

    text-align:center;

}

.bannerPremioPrecio small{

    font-size:11px;

    line-height:1.3;

    color:rgba(255,255,255,.85);

}

.bannerPremioPrecio small.bannerPremioSinSuscripcion{

    font-size:10px;

    font-weight:bold;

    letter-spacing:.5px;

    color:#fff;

}

.btnPremium{

    flex:none;

    background:#fff;

    color:#5c3dd6;

    border:none;

    border-radius:13px;

    padding:10px 14px;

    font-size:13px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

    white-space:nowrap;

}

.btnPremium:hover{

    transform:translateY(-2px);

}

.btnPremium:active{

    transform:scale(.97);

}

.btnPremium:disabled{

    opacity:.6;

    cursor:default;

    transform:none;

}

/* Pantalla de candado que reemplaza el contenido de una función
   premium cuando todavía no se compró. */
.candado{

    text-align:center;

    padding:30px 16px;

}

.candadoIcono{

    font-size:40px;

    margin-bottom:10px;

}

.candado h3{

    font-size:16px;

    margin-bottom:8px;

}

.candado p{

    color:#777;

    font-size:13px;

    margin-bottom:16px;

    line-height:1.4;

}

.candado .btnPremium{

    background:linear-gradient(135deg,#7c4dff,#5c3dd6);

    color:#fff;

    padding:12px 20px;

}

.candadoPrecio{

    margin-top:10px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:2px;

}

.candadoPrecio small{

    font-size:12px;

    color:#999;

}

.candadoPrecio small.candadoSinSuscripcion{

    font-size:11px;

    font-weight:bold;

    letter-spacing:.5px;

    color:#5c3dd6;

}

/* ================= Metas ================= */

.vistaMetas{

    margin-top:14px;

}

.cardMeta{

    text-align:left;

}

.cardMeta h3{

    text-align:center;

    color:#888;

    font-size:13px;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:14px;

}

.metaSinDefinir p{

    color:#777;

    font-size:14px;

    text-align:center;

    margin-bottom:14px;

    line-height:1.4;

}

.barraMetaFondo{

    width:100%;

    height:14px;

    border-radius:20px;

    background:#eee;

    overflow:hidden;

}

.barraMetaProgreso{

    height:100%;

    border-radius:20px;

    background:#2e7d32;

    transition:width .3s ease;

}

.barraMetaProgreso.cerca{

    background:#ef6c00;

}

.barraMetaProgreso.superada{

    background:#c62828;

}

.metaTexto{

    margin-top:10px;

    text-align:center;

    font-size:14px;

    font-weight:bold;

}

.metaAlerta{

    margin-top:8px;

    text-align:center;

    font-size:13px;

    font-weight:bold;

    padding:8px;

    border-radius:12px;

}

.metaAlerta.cerca{

    background:#fff3e0;

    color:#ef6c00;

}

.metaAlerta.superada{

    background:#ffebee;

    color:#c62828;

}

.filaMeta{

    display:flex;

    gap:8px;

    margin-top:16px;

}

.filaMeta input{

    flex:1;

    min-width:0;

    padding:12px;

    border-radius:13px;

    border:2px solid #DDD;

    font-size:15px;

    font-family:inherit;

    outline:none;

}

.filaMeta input:focus{

    border-color:#FFD54F;

}

.btnGuardarMeta{

    flex:none;

    background:#333;

    color:#fff;

    border:none;

    border-radius:13px;

    padding:12px 16px;

    font-size:13px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.btnGuardarMeta:active{

    transform:scale(.96);

}

/* ================= Tabs ================= */

.tabs{

    display:flex;

    gap:7px;

    margin-top:18px;

}

.tab{

    flex:1;

    padding:12px 6px;

    border:none;

    border-radius:15px;

    background:rgba(255,255,255,.55);

    color:#5b4a00;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.tab:hover{

    background:rgba(255,255,255,.85);

}

.tab.activo{

    background:#333;

    color:#fff;

}

/* ================= Panel ================= */

.panel{

    margin-top:18px;

    background:white;

    border-radius:20px;

    padding:18px 18px 14px;

    box-shadow:0 10px 28px rgba(0,0,0,.15);

}

/* El micrófono va en la misma fila que el campo */
.filaEntrada{

    display:flex;

    gap:10px;

    align-items:stretch;

}

#entrada{

    flex:1;

    min-width:0;

    padding:14px;

    border-radius:15px;

    border:2px solid #DDD;

    font-size:17px;

    outline:none;

    transition:.25s;

}

#entrada:focus{

    border-color:#FFD54F;

    box-shadow:0 0 0 5px rgba(255,213,79,.30);

}

#voz{

    width:54px;

    flex:none;

    padding:0;

    border:none;

    border-radius:15px;

    background:#333;

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:.2s;

}

#voz:active{

    transform:scale(.95);

}

.ayudaGuardar{

    margin-top:12px;

    text-align:center;

    font-size:12px;

    color:#999;

}

/* Los tres botones que guardan y clasifican a la vez */
.acciones{

    display:flex;

    gap:7px;

    margin-top:8px;

}

.btnGuardar{

    flex:1;

    padding:13px 4px;

    border:none;

    border-radius:15px;

    color:#fff;

    font-size:13px;

    font-weight:bold;

    line-height:1.2;

    cursor:pointer;

    transition:.2s;

}

.btnGuardar:active{

    transform:scale(.96);

}

.btnGuardar:disabled{

    opacity:.5;

    cursor:default;

}

.esNecesario{

    background:#2e7d32;

}

.esEvitable{

    background:#ef6c00;

}

.esInnecesario{

    background:#c62828;

}

button{

    padding:18px;

}

#mensaje{

    margin-top:10px;

    min-height:18px;

    font-size:14px;

    text-align:center;

    font-weight:bold;

}

/* Mientras no hay mensaje no ocupa lugar:
   el panel termina justo debajo de los botones */
#mensaje:empty{

    display:none;

}

/* ================= Filtros ================= */

.filtros{

    margin-top:14px;

}

.filtroChips{

    display:flex;

    gap:7px;

}

/* Anula el padding:18px global de los botones */
.chip{

    flex:1;

    padding:10px 5px;

    border:none;

    border-radius:14px;

    background:rgba(255,255,255,.55);

    color:#5b4a00;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.chip:hover{

    background:rgba(255,255,255,.85);

}

.chip.activo{

    background:#333;

    color:#fff;

}

.chip.bloqueado::before{

    content:"🔒 ";

}

.rangoFechas{

    display:flex;

    gap:10px;

    margin-top:10px;

    background:white;

    border-radius:16px;

    padding:12px;

    box-shadow:0 6px 18px rgba(0,0,0,.12);

}

/* .oculto sola pierde contra ".rangoFechas{display:flex}" porque
   comparten especificidad y esta regla viene después en la hoja.
   Con las dos clases juntas gana por especificidad, sin !important. */
.rangoFechas.oculto{

    display:none;

}

.rangoFechas label{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:6px;

    font-size:13px;

    font-weight:bold;

    color:#666;

}

.rangoFechas input{

    width:100%;

    padding:10px;

    border:2px solid #DDD;

    border-radius:12px;

    font-size:15px;

    font-family:inherit;

    outline:none;

}

.rangoFechas input:focus{

    border-color:#FFD54F;

}

/* ================= Resumen ================= */

.resumen{

    margin-top:14px;

}

.separadorResumen{

    margin:14px 0;

    border:none;

    border-top:2px solid #eee;

}

.cardResumen{

    background:white;

    border-radius:20px;

    padding:18px;

    box-shadow:0 6px 18px rgba(0,0,0,.12);

    text-align:center;

}

.cardResumen h3{

    color:#888;

    font-size:13px;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:6px;

}

#totalHoy{

    display:block;

    font-size:30px;

    font-weight:bold;

}

#cantidadHoy{

    display:block;

    margin-top:4px;

    font-size:12px;

    color:#888;

}

#totalGeneral{

    display:block;

    font-size:28px;

    font-weight:bold;

}

#cantidadGeneral{

    display:block;

    margin-top:4px;

    font-size:12px;

    color:#888;

}

/* ================= Desglose por tipo ================= */

.desglose{

    list-style:none;

    margin-top:12px;

    text-align:left;

}

.desglose li{

    display:flex;

    align-items:center;

    gap:8px;

    padding:5px 0;

    font-size:14px;

}

.desglose li + li{

    border-top:1px solid #f2f2f2;

}

.punto{

    width:9px;

    height:9px;

    border-radius:50%;

    flex:none;

}

.desgloseNombre{

    flex:1;

    color:#666;

}

/* ================= Historial ================= */

.historial{

    margin-top:14px;

    background:white;

    border-radius:20px;

    padding:18px;

    box-shadow:0 6px 18px rgba(0,0,0,.12);

}

.historial h3{

    margin-bottom:12px;

    font-size:16px;

}

#listaHistorial{

    list-style:none;

}

#listaHistorial li{

    padding:11px 0;

    border-bottom:1px solid #EEE;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:8px;

    font-size:15px;

}

#listaHistorial li:last-child{

    border-bottom:none;

}

.vacio{

    color:#777;

    justify-content:center !important;

}

.itemInfo{

    flex:1;

}

/* Distintivo de tipo en cada gasto del historial */
.etiquetaTipo{

    display:inline-block;

    margin-left:8px;

    padding:2px 9px;

    border-radius:20px;

    font-size:11px;

    font-weight:bold;

    color:#fff;

    vertical-align:middle;

}

.tipo-necesario{

    background:#2e7d32;

}

.tipo-evitable{

    background:#ef6c00;

}

.tipo-innecesario{

    background:#c62828;

}

.tipo-sin{

    background:#bdbdbd;

}

.btnVerMas{

    width:100%;

    margin-top:12px;

    padding:11px;

    border:2px solid #FFD54F;

    border-radius:15px;

    background:#FFF9E6;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.btnVerMas:hover{

    background:#FFD54F;

}

.btnVerMas:active{

    transform:scale(.98);

}

.contadorHistorial{

    display:block;

    margin-top:10px;

    text-align:center;

    font-size:12px;

    color:#999;

}

/* ================= Estadísticas ================= */

.vistaEstadisticas{

    margin-top:14px;

}

.cardGrafico{

    margin-bottom:14px;

}

.cardGrafico h3{

    color:#888;

    font-size:13px;

    letter-spacing:1px;

    text-transform:uppercase;

}

.contenedorGrafico{

    position:relative;

    height:230px;

    margin-top:16px;

}

.contenedorBarras{

    height:210px;

}

.vacioGrafico{

    margin-top:16px;

    text-align:center;

    color:#777;

    font-size:14px;

}

/* ================= Responsive ================= */

@media(max-width:480px){

header h2{

font-size:20px;

}

#entrada{

font-size:16px;

}

#totalHoy{

font-size:27px;

}

#totalGeneral{

    font-size:25px;

}

/* En pantallas angostas "Innecesario" queda justo */
.btnGuardar{

    font-size:12px;

    padding:13px 2px;

}

.desglose li{

    font-size:13px;

}

}
/* ================= Eliminar ================= */

.eliminar{

    background:#e53935;
    color:#fff;
    border:none;
    border-radius:11px;
    width:36px;
    height:36px;
    padding:0;
    flex:none;
    font-size:16px;
    cursor:pointer;
    transition:.2s;

}

.eliminar:hover{

    transform:scale(1.08);

}

.eliminar:active{

    transform:scale(.95);

}

/* ================= Acciones Resumen ================= */

.accionesResumen{

    display:flex;
    justify-content:center;
    gap:9px;
    margin-top:16px;

}

.btnExportar{

    flex:1;

    background:#43a047;

    color:#fff;

    border:none;

    border-radius:15px;

    padding:11px;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.btnExportar:hover{

    transform:translateY(-2px);

}

.btnExportar:active{

    transform:scale(.97);

}

.btnSecundario{

    flex:1;

    background:#d32f2f;

    color:#fff;

    border:none;

    border-radius:15px;

    padding:11px;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.btnSecundario:hover{

    transform:translateY(-2px);

}

.btnSecundario:active{

    transform:scale(.97);

}