/* =========================================================
   Sistema de Ventas Finca — Estilos generales
   Mobile-first, textos y botones grandes, alto contraste.
   ========================================================= */

:root {
    --color-primario: #1b6b3a;
    --color-primario-oscuro: #144f2b;
    --color-secundario: #2c6fb0;
    --color-peligro: #b3261e;
    --color-peligro-oscuro: #8c1d17;
    --color-texto: #1a1a1a;
    --color-texto-suave: #4a4a4a;
    --color-fondo: #f5f6f4;
    --color-tarjeta: #ffffff;
    --color-borde: #d8dcd6;
    --color-exito-fondo: #e3f4e6;
    --color-exito-texto: #14532d;
    --color-error-fondo: #fbe7e5;
    --color-error-texto: #7a1a13;
    --color-aviso-fondo: #fff4d6;
    --color-aviso-texto: #7a5b00;
    --radio: 14px;
    --sombra: 0 2px 8px rgba(0,0,0,0.08);
    --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
    margin: 0;
    font-family: var(--fuente);
    background: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.45;
}

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

.contenido {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 16px 90px;
}

.titulo-pagina {
    font-size: 1.6rem;
    margin: 8px 0 20px;
}

.subtitulo {
    color: var(--color-texto-suave);
    font-size: 1rem;
    margin-top: -12px;
    margin-bottom: 20px;
}

/* ---------------- Barra superior / navegación ---------------- */

.barra-superior {
    background: var(--color-primario);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.marca {
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
}

.menu-usuario {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.95rem;
}

.nombre-usuario { opacity: 0.95; }

.enlace-salir {
    color: #fff;
    background: rgba(255,255,255,0.18);
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.navegacion {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    background: var(--color-primario-oscuro);
    padding: 8px 10px;
}

.navegacion a {
    color: #fff;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 600;
}

.navegacion a:hover,
.navegacion a:active {
    background: rgba(255,255,255,0.18);
}

/* ---------------- Botones ---------------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 14px 20px;
    border-radius: var(--radio);
    border: none;
    cursor: pointer;
    text-decoration: none;
    min-height: 52px;
    transition: transform 0.05s ease, opacity 0.15s ease;
}

.boton:active { transform: scale(0.98); }

.boton-primario { background: var(--color-primario); color: #fff; }
.boton-primario:hover { background: var(--color-primario-oscuro); }

.boton-secundario { background: var(--color-secundario); color: #fff; }

.boton-neutro { background: var(--color-tarjeta); color: var(--color-texto); border: 2px solid var(--color-borde); }

.boton-peligro { background: var(--color-peligro); color: #fff; }
.boton-peligro:hover { background: var(--color-peligro-oscuro); }

.boton-cancelar { background: #e9e9e9; color: var(--color-texto); }

.boton-grande { font-size: 1.15rem; padding: 16px 22px; min-height: 58px; }

.boton-enorme {
    font-size: 1.3rem;
    padding: 22px 24px;
    min-height: 72px;
    width: 100%;
}

.boton-ancho { width: 100%; }

.boton:disabled { opacity: 0.5; cursor: not-allowed; }

.acciones-grandes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.acciones-secundarias {
    flex-direction: row;
    flex-wrap: wrap;
}
.acciones-secundarias .boton { flex: 1 1 45%; }

/* ---------------- Tarjetas / resumen ---------------- */

.tarjetas-resumen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.tarjeta-resumen {
    background: var(--color-tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px;
    text-align: center;
}

.tarjeta-resumen-alerta { background: var(--color-error-fondo); }

.tarjeta-resumen-numero { font-size: 1.8rem; font-weight: 800; color: var(--color-primario); }
.tarjeta-resumen-alerta .tarjeta-resumen-numero { color: var(--color-peligro); }

.tarjeta-resumen-etiqueta { color: var(--color-texto-suave); font-size: 0.95rem; margin-top: 4px; }

.tarjeta {
    background: var(--color-tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px;
    margin-bottom: 16px;
}

/* ---------------- Formularios ---------------- */

.etiqueta {
    display: block;
    font-weight: 700;
    margin: 14px 0 6px;
    font-size: 1rem;
}

.entrada, select.entrada, textarea.entrada {
    width: 100%;
    padding: 14px;
    font-size: 1.05rem;
    border: 2px solid var(--color-borde);
    border-radius: 10px;
    background: #fff;
    color: var(--color-texto);
    font-family: inherit;
}

.entrada:focus { outline: 3px solid var(--color-secundario); border-color: var(--color-secundario); }

.entrada-grande { padding: 16px; font-size: 1.15rem; }

.ayuda-campo { color: var(--color-texto-suave); font-size: 0.9rem; margin-top: 4px; }

.fila-formulario { margin-bottom: 6px; }

/* ---------------- Alertas ---------------- */

.alerta {
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-weight: 600;
}

.alerta-error { background: var(--color-error-fondo); color: var(--color-error-texto); }
.alerta-exito { background: var(--color-exito-fondo); color: var(--color-exito-texto); }
.alerta-aviso { background: var(--color-aviso-fondo); color: var(--color-aviso-texto); }
.alerta-info { background: #e6f0f8; color: #17456e; }

/* ---------------- Login ---------------- */

.pantalla-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tarjeta-login {
    background: var(--color-tarjeta);
    border-radius: 18px;
    box-shadow: var(--sombra);
    padding: 32px 26px;
    width: 100%;
    max-width: 380px;
}

.titulo-login { text-align: center; margin: 0 0 4px; font-size: 1.8rem; }
.subtitulo-login { text-align: center; color: var(--color-texto-suave); margin-bottom: 20px; }

/* ---------------- Selección de cliente ---------------- */

.buscador-cliente { position: relative; margin-bottom: 16px; }

.lista-clientes {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-cliente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-tarjeta);
    border: 2px solid var(--color-borde);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-size: 1.05rem;
}

.item-cliente:hover, .item-cliente:active { border-color: var(--color-primario); background: #f0f7f2; }

.item-cliente .telefono-cliente { color: var(--color-texto-suave); font-size: 0.9rem; }

.chips-frecuentes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }

.chip {
    background: #eef3ea;
    border: 2px solid var(--color-borde);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.95rem;
    cursor: pointer;
}

.separador-o {
    text-align: center;
    color: var(--color-texto-suave);
    margin: 18px 0;
    font-weight: 700;
}

/* ---------------- Productos en la venta ---------------- */

.lista-productos-venta { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }

.linea-producto {
    background: var(--color-tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 14px 16px;
}

.linea-producto-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.linea-producto-detalle {
    display: flex;
    justify-content: space-between;
    color: var(--color-texto-suave);
    font-size: 0.95rem;
}

.linea-producto-subtotal { font-weight: 700; color: var(--color-primario); }

.boton-quitar {
    background: none;
    border: none;
    color: var(--color-peligro);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
}

.total-venta {
    background: var(--color-primario);
    color: #fff;
    border-radius: var(--radio);
    padding: 18px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    margin: 18px 0;
}

/* ---------------- Selector de producto (agregar) ---------------- */

.grid-productos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0;
}

.tarjeta-producto {
    background: var(--color-tarjeta);
    border: 2px solid var(--color-borde);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
}

.tarjeta-producto:hover, .tarjeta-producto:active { border-color: var(--color-primario); background: #f0f7f2; }

.tarjeta-producto .precio-producto { color: var(--color-texto-suave); font-weight: 500; font-size: 0.9rem; margin-top: 4px; }

/* ---------------- Evidencias / fotos ---------------- */

.zona-fotos { margin: 16px 0; }

.grid-fotos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.miniatura-foto {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #eee;
    box-shadow: var(--sombra);
}

.miniatura-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.miniatura-foto .quitar-foto {
    position: absolute;
    top: 4px; right: 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px; height: 28px;
    font-size: 1rem;
    cursor: pointer;
}

.contador-fotos { font-weight: 700; color: var(--color-texto-suave); margin-bottom: 6px; }

/* ---------------- Resumen / confirmación ---------------- */

.resumen-venta dt { font-weight: 700; margin-top: 12px; }
.resumen-venta dd { margin: 2px 0 0; color: var(--color-texto-suave); }

.fila-botones-confirmacion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
}

/* ---------------- Tablas / historial ---------------- */

.tabla-envoltorio { overflow-x: auto; }

table.tabla-datos {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-tarjeta);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra);
}

table.tabla-datos th, table.tabla-datos td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-borde);
    font-size: 0.95rem;
}

table.tabla-datos th { background: #eef3ea; font-weight: 700; }

.etiqueta-estado {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.estado-activa { background: var(--color-exito-fondo); color: var(--color-exito-texto); }
.estado-anulada { background: var(--color-error-fondo); color: var(--color-error-texto); }

.filtros-historial {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    background: var(--color-tarjeta);
    padding: 14px;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.filtros-historial > div { flex: 1 1 140px; }

/* ---------------- Detalle de venta ---------------- */

.cabecera-venta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.numero-venta-grande { font-size: 1.5rem; font-weight: 800; color: var(--color-primario); }

.aviso-anulada {
    background: var(--color-error-fondo);
    color: var(--color-error-texto);
    border-radius: 12px;
    padding: 14px;
    margin: 14px 0;
    font-weight: 600;
}

/* ---------------- Pantalla venta guardada ---------------- */

.pantalla-exito {
    text-align: center;
    padding: 30px 16px;
}

.icono-exito { font-size: 4rem; margin-bottom: 6px; }

.numero-venta-exito { font-size: 1.8rem; font-weight: 800; color: var(--color-primario); margin: 6px 0; }

.total-exito { font-size: 1.6rem; font-weight: 800; margin: 12px 0 24px; }

/* ---------------- Modal de imagen ---------------- */

.modal-imagen {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 20px;
}
.modal-imagen.abierto { display: flex; }
.modal-imagen img { max-width: 100%; max-height: 90vh; border-radius: 10px; }
.modal-imagen .cerrar-modal {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 44px; height: 44px;
    font-size: 1.4rem;
    cursor: pointer;
}

/* ---------------- Utilidades ---------------- */

.texto-centrado { text-align: center; }
.texto-suave { color: var(--color-texto-suave); }
.oculto { display: none !important; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }

/* ---------------- Tablets / escritorio ---------------- */

@media (min-width: 640px) {
    .grid-productos { grid-template-columns: repeat(3, 1fr); }
    .grid-fotos { grid-template-columns: repeat(4, 1fr); }
    .fila-botones-confirmacion { flex-direction: row-reverse; }
    .fila-botones-confirmacion .boton { flex: 1; }
    .acciones-grandes:not(.acciones-secundarias) { flex-direction: row; }
    .acciones-grandes:not(.acciones-secundarias) .boton { flex: 1; }
}