/* mariamiami.com — estilos */
:root {
    --fondo: #f2f5f9;
    --panel: #ffffff;
    --tinta: #16283c;
    --tinta-suave: #5b7086;
    --acento: #0e7ac4;
    --acento-osc: #0a5c96;
    --verde: #14894e;
    --rojo: #c8352e;
    --borde: #dbe4ee;
    --radio: 14px;
    --sombra: 0 2px 10px rgba(22,40,60,.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--fondo);
    color: var(--tinta);
    min-height: 100vh;
}
h2 { font-size: 1.15rem; margin-bottom: 14px; }
.rojo { color: var(--rojo); }
.verde { color: var(--verde); }
.vacio { color: var(--tinta-suave); padding: 14px 0; text-align: center; }

/* Barra superior */
.barra {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 24px;
    background: linear-gradient(90deg, #0b2f4e, #0e7ac4);
    color: #fff;
    flex-wrap: wrap; gap: 10px;
}
.logo { font-size: 1.35rem; font-weight: 700; letter-spacing: .5px; }
.logo span { color: #ffd166; }
.barra .logo { color: #fff; }
.barra-der { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.saludo { opacity: .95; }
.barra .btn-borde { border-color: rgba(255,255,255,.55); color: #fff; }
.barra .btn-borde:hover { background: rgba(255,255,255,.15); }

.contenido { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; display: grid; gap: 24px; }

/* Botones */
.btn {
    display: inline-block; border: none; cursor: pointer;
    padding: 9px 16px; border-radius: 9px;
    font-size: .92rem; font-weight: 600;
    text-decoration: none; text-align: center;
    transition: filter .15s, background .15s;
    background: transparent; color: var(--tinta);
}
.btn-principal { background: var(--acento); color: #fff; }
.btn-principal:hover { background: var(--acento-osc); }
.btn-borde { border: 1.5px solid var(--borde); color: var(--acento); background: var(--panel); }
.btn-borde:hover { border-color: var(--acento); }
.btn-peligro { background: #fdecec; color: var(--rojo); }
.btn-peligro:hover { background: #f9d7d5; }
.btn-ancho { width: 100%; margin-top: 18px; }
.btn-mini { padding: 4px 8px; font-size: .95rem; }

/* Paneles y formularios */
.panel {
    background: var(--panel); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 20px;
}
label { display: block; font-size: .8rem; font-weight: 600; color: var(--tinta-suave); margin-bottom: 4px; }
input, select {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid var(--borde); border-radius: 9px;
    font-size: .95rem; background: #fff; color: var(--tinta);
}
input:focus, select:focus { outline: none; border-color: var(--acento); }
.form-linea { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-linea > div { flex: 1 1 140px; }
.form-linea > div.crece { flex: 3 1 240px; }
.form-linea .btn { flex: 0 0 auto; }
.form-compacta { align-items: center; }
.form-compacta input { width: auto; flex: 1 1 110px; }
.form-compacta input.crece { flex: 3 1 180px; }

/* Resumen */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.resumen-chico { margin-top: 16px; }
.tarjeta-resumen {
    background: var(--panel); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 16px 18px;
}
.res-titulo { font-size: .8rem; color: var(--tinta-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.res-valor { font-size: 1.5rem; font-weight: 700; margin-top: 4px; }

/* Tarjetas de crédito */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.tarjeta-cc {
    background: linear-gradient(135deg, #103c5e, #0e7ac4);
    color: #fff; border-radius: 18px; padding: 20px;
    box-shadow: 0 6px 18px rgba(14,122,196,.28);
    display: flex; flex-direction: column; gap: 14px;
}
.cc-arriba { display: flex; justify-content: space-between; align-items: flex-start; }
.cc-nombre { font-size: 1.15rem; font-weight: 700; }
.cc-banco { font-size: .85rem; opacity: .85; }
.cc-chip { font-size: 1.6rem; }
.cc-datos { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cc-datos > div { display: flex; flex-direction: column; }
.cc-datos span { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; opacity: .8; }
.cc-datos strong { font-size: 1rem; }
.cc-datos strong.rojo { color: #ffb3ae; }
.cc-datos strong.verde { color: #a8f0c6; }
.cc-barra { height: 7px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.cc-barra-uso { height: 100%; background: #ffd166; border-radius: 4px; }
.cc-barra-uso.peligro { background: #ff7b72; }
.cc-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cc-acciones .btn-borde { background: rgba(255,255,255,.92); }

/* Tabla estilo Excel */
.fila-titulo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.fila-titulo h2 { margin: 0; }
.tabla-envoltura { overflow-x: auto; }
.tabla-excel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla-excel th {
    background: #eef3f9; color: var(--tinta-suave);
    text-transform: uppercase; font-size: .74rem; letter-spacing: .4px;
    padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--borde);
}
.tabla-excel td { padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.tabla-excel tbody tr:nth-child(even) { background: #f8fafd; }
.tabla-excel tbody tr:hover { background: #eef6fd; }
.tabla-excel .num { text-align: right; white-space: nowrap; }
.tabla-excel tfoot td { background: #eef3f9; border-top: 2px solid var(--borde); }
.acciones-celda { white-space: nowrap; }
.acciones-celda form { display: inline; }
.fila-editar td { background: #fff8e6; }

/* Login */
.login-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #0b2f4e 0%, #0e7ac4 60%, #23b5d3 100%);
    padding: 16px;
}
.login-caja {
    background: var(--panel); border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
    padding: 36px 32px; width: 100%; max-width: 380px;
}
.login-caja .logo { text-align: center; color: var(--tinta); }
.login-caja .logo span { color: var(--acento); }
.login-sub { text-align: center; color: var(--tinta-suave); margin: 6px 0 22px; }
.login-caja label { margin-top: 14px; }
.alerta {
    background: #fdecec; color: var(--rojo);
    padding: 10px 14px; border-radius: 9px; margin-bottom: 14px;
    font-size: .9rem; text-align: center;
}

@media (max-width: 640px) {
    .form-linea { flex-direction: column; align-items: stretch; }
    .form-linea > div { flex: 1 1 auto; }
}

/* Sin flechas en los campos numéricos (gasto, depósito, límite, deuda) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}