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

body {
    font-family: Arial, sans-serif;
    background: #f4f7f3;
    color: #243424;
}

header {
    background: #1f6b3a;
    color: white;
    text-align: center;
    padding: 35px 20px;
}

header h1 {
    font-size: 38px;
    margin-bottom: 10px;
}

header p {
    font-size: 18px;
}

.boton-instalar {
    margin-top: 14px;
    padding: 10px 18px;
    border: 2px solid white;
    border-radius: 10px;
    background: transparent;
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.boton-instalar:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Botón pequeño 📏 del mapa (mismo tamaño que el del zoom) */
.leaflet-bar a.boton-medir {
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 17px;
    text-align: center;
    text-decoration: none;
}

.leaflet-bar a.boton-medir.activo {
    background: #e65100;
}

/* Riego: elegir la parcela de una tubería ya guardada */
.tuberia-parcela {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-weight: bold;
    color: #1f6b3a;
}

.tuberia-parcela select {
    flex: 1 1 200px;
    min-width: 0;
}

/* Recorrido de la finca */
.boton-recorrido {
    background: #1f6b3a;
    color: white;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.recorrido-tarjeta {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    z-index: 1100;
    width: min(92%, 520px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(31, 107, 58, 0.95);
    color: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.recorrido-tarjeta[hidden] {
    display: none;
}

.recorrido-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recorrido-texto small {
    color: #dfeede;
    font-size: 12px;
}

.recorrido-texto strong {
    font-size: 17px;
}

.recorrido-texto span {
    font-size: 14px;
    color: #f4f8f2;
}

.recorrido-botones {
    display: flex;
    gap: 6px;
}

.recorrido-botones button {
    width: 38px;
    height: 38px;
    border: 2px solid white;
    border-radius: 8px;
    background: transparent;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.recorrido-botones button:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* En pantalla completa el mapa ocupa todo */
.mapa:fullscreen {
    height: 100vh;
    border-radius: 0;
}

/* 🤖 Asistente IA */
.ia-intro {
    color: #555;
    font-size: 14px;
}

.ia-ejemplos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.ia-ejemplos[hidden] {
    display: none;
}

.acordeon-contenido .ia-ejemplos button:not([style*="background"]) {
    margin: 0;
    padding: 7px 12px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: normal;
    background: #e8f5e9;
}

.ia-mensajes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 10px;
}

.ia-mensaje {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ia-mensaje p {
    margin: 0 0 8px;
}

.ia-mensaje p:last-child {
    margin-bottom: 0;
}

.ia-mensaje.tuyo {
    align-self: flex-end;
    background: #1f6b3a;
    color: white;
    border-bottom-right-radius: 4px;
}

.ia-mensaje.ia {
    align-self: flex-start;
    background: #f4f8f2;
    border: 1px solid #cbd8c7;
    color: #222;
    border-bottom-left-radius: 4px;
}

.ia-mensaje.error {
    background: #fff5f5;
    border-color: #f5c2c2;
    color: #b71c1c;
}

.ia-pensando {
    color: #777;
    font-style: italic;
}

.ia-formulario textarea {
    width: 100%;
    resize: vertical;
}

.ia-botones {
    display: flex;
    flex-wrap: wrap;
    margin-top: 6px;
}

.acordeon-contenido .ia-botones .ia-enviar:not([style*="background"]) {
    background: #1f6b3a;
    color: white;
    border-color: #1f6b3a;
}

.ia-parar[hidden] {
    display: none;
}

/* Propuesta de cambios de la IA */
.ia-propuesta {
    margin-top: 10px;
    padding: 10px 12px;
    border: 2px dashed #e65100;
    border-radius: 10px;
    background: #fff8f0;
}

.ia-propuesta.aplicada {
    border: 2px solid #1f6b3a;
    background: #f4f8f2;
}

.ia-propuesta.descartada {
    border-color: #bdbdbd;
    background: #fafafa;
    opacity: 0.8;
}

.ia-propuesta ul {
    list-style: none;
    margin: 8px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ia-propuesta li {
    display: flex;
    flex-direction: column;
    padding-left: 8px;
    border-left: 3px solid #e65100;
}

.ia-propuesta li.mal {
    border-left-color: #c62828;
    color: #777;
}

.ia-propuesta li small {
    color: #666;
}

.ia-propuesta .ia-problema {
    color: #c62828;
    font-weight: bold;
}

.ia-propuesta-botones {
    display: flex;
    flex-wrap: wrap;
    margin: 6px 0 4px;
}

.acordeon-contenido .ia-propuesta-botones [data-p="aplicar"]:not([style*="background"]) {
    background: #1f6b3a;
    color: white;
    border-color: #1f6b3a;
}

.ia-propuesta-estado {
    margin: 4px 0 0;
    font-weight: bold;
    color: #1f6b3a;
}

.ia-aviso {
    font-size: 12px;
    color: #8a5a00;
}

/* Recordatorios */
.recordatorios-estado {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
}

.recordatorios-estado.bien {
    background: #e8f5e9;
    color: #1f6b3a;
}

.recordatorios-estado.aviso {
    background: #fff8e1;
    color: #8a5a00;
}

.recordatorios-ajustes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 6px 0 12px;
    font-size: 14px;
    color: #1f6b3a;
}

.recordatorios-ajustes label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.recordatorios-ajustes input {
    accent-color: #1f6b3a;
}

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

.recordatorios-lista li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid #cbd8c7;
    border-left: 5px solid #1f6b3a;
    border-radius: 8px;
    background: white;
    font-size: 14px;
}

.recordatorios-lista li.cerca {
    border-left-color: #f9a825;
}

.recordatorios-lista li.pasado {
    border-left-color: #c62828;
    background: #fff5f5;
}

.recordatorios-lista li > span {
    display: flex;
    flex-direction: column;
}

.recordatorios-lista small {
    color: #777;
    font-weight: normal;
}

.recordatorios-cuando {
    flex: 0 0 105px;
    font-weight: bold;
    color: #1f6b3a;
}

.recordatorios-lista li.pasado .recordatorios-cuando {
    color: #c62828;
}

.recordatorios-nota {
    margin-top: 10px;
    font-size: 12px;
    color: #777;
}

/* Costes y rentabilidad: sumar solos los gastos del almacén y la maquinaria */
.costes-auto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #e8f5e9;
    color: #1f6b3a;
    font-size: 14px;
    cursor: pointer;
}

.costes-auto input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: #1f6b3a;
    flex: 0 0 auto;
}

.costes-auto small {
    color: #555;
}

/* Almacén */
.almacen-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #1f6b3a;
}

.almacen-avisos {
    list-style: none;
    margin: 6px 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.almacen-avisos li {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    background: #fff8e1;
    color: #8a5a00;
}

.almacen-avisos li.alto {
    background: #ffebee;
    color: #b71c1c;
}

.almacen-vacio {
    color: #555;
    font-size: 14px;
}

.almacen h4 {
    margin: 14px 0 6px;
    color: #1f6b3a;
}

.almacen-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.almacen-producto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 10px;
    border: 1px solid #cbd8c7;
    border-left: 5px solid #1f6b3a;
    border-radius: 8px;
    background: white;
}

.almacen-producto.medio {
    border-left-color: #f9a825;
}

.almacen-producto.alto {
    border-left-color: #c62828;
}

.almacen-dato {
    flex: 1 1 180px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.almacen-dato small {
    color: #777;
}

.almacen-cantidad {
    font-size: 20px;
    font-weight: bold;
    color: #1f6b3a;
    min-width: 80px;
    text-align: right;
}

.almacen-cantidad span {
    font-size: 13px;
    font-weight: normal;
}

.acordeon-contenido .almacen-botones button:not([style*="background"]) {
    margin: 0 0 0 3px;
    padding: 5px 7px;
    font-size: 15px;
}

/* Elegir el tipo al añadir (almacén y maquinaria) */
.almacen-tipos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.almacen-tipos button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 2px solid #cbd8c7;
    border-radius: 10px;
    background: #f4f8f2;
    color: #1f6b3a;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.almacen-tipos button:hover {
    border-color: #1f6b3a;
    background: #dfeede;
}

.almacen-tipos button span {
    font-size: 28px;
}

/* Lo lleno que está el depósito de gasoil */
.almacen-deposito {
    width: 100%;
    height: 8px;
    margin-top: 4px;
    border-radius: 4px;
    background: #e0e0e0;
    overflow: hidden;
}

.almacen-deposito div {
    height: 100%;
    background: #1f6b3a;
}

.almacen-producto.alto .almacen-deposito div {
    background: #c62828;
}

.almacen-cantidad small {
    display: block;
    font-size: 11px;
    font-weight: normal;
    color: #777;
}

.form-almacen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    max-height: 90vh;
    overflow-y: auto;
}

.form-almacen > p,
.form-almacen > .agro-pregunta-botones,
.form-almacen > .almacen-movimientos,
.form-almacen label.ancho {
    grid-column: 1 / -1;
}

.form-almacen label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    font-weight: bold;
    color: #1f6b3a;
}

.form-almacen input,
.form-almacen select,
.form-almacen textarea {
    padding: 8px 10px;
    border: 2px solid #cbd8c7;
    border-radius: 8px;
    font-size: 15px;
    font-weight: normal;
    font-family: inherit;
    color: #222;
    background: white;
}

.almacen-movimientos {
    max-height: 50vh;
    overflow-y: auto;
}

.almacen-movimientos table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.almacen-movimientos td {
    padding: 5px 6px;
    border-bottom: 1px solid #dfe7dc;
}

.almacen-movimientos td:nth-child(-n+2) {
    white-space: nowrap;
}

.almacen-movimientos td.entrada {
    color: #1f6b3a;
    font-weight: bold;
}

.almacen-movimientos td.salida {
    color: #c62828;
    font-weight: bold;
}

@media (max-width: 480px) {
    .form-almacen {
        grid-template-columns: 1fr;
    }
}

/* Gomas de goteo de la parcela (en cada tubería de 💧 Riego) */
.goteo-parcela {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 10px;
    padding: 10px 12px;
    border-left: 5px solid #0288d1;
    border-radius: 8px;
    background: #e1f5fe;
    font-size: 14px;
    color: #01579b;
}

.goteo-parcela strong {
    font-size: 15px;
}

.goteo-botones {
    display: flex;
    flex-wrap: wrap;
    margin-top: 4px;
}

.goteo-precios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.goteo-precios[hidden] {
    display: none;
}

.goteo-precios label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    font-weight: bold;
}

/* Riego estimado de la semana (arriba en 💧 Riego) */
.riego-semana {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 2px solid #1f6b3a;
    border-radius: 10px;
    background: #f4f8f2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.riego-semana[hidden] {
    display: none;
}

.riego-semana > strong {
    color: #1f6b3a;
    font-size: 16px;
}

.riego-semana small {
    color: #555;
}

.riego-semana-nota {
    margin: 0;
    font-size: 14px;
    color: #1f6b3a;
}

.riego-semana-tabla {
    overflow-x: auto;
}

.riego-semana-tabla table {
    width: 100%;
    font-size: 14px;
}

.riego-semana-tabla td small {
    color: #777;
}

.riego-semana-caudal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    color: #1f6b3a;
    font-size: 14px;
}

.acordeon-contenido .riego-semana-caudal input {
    width: 90px;
}

.riego-semana-caudal span {
    font-weight: normal;
    color: #222;
}

.riego-semana-pie {
    font-size: 12px;
}

.tiempo-riego {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #e1f5fe;
    color: #01579b;
    font-weight: bold;
    font-size: 13px;
}

/* Vuelo 3D */
.boton-vuelo3d {
    background: #0d47a1;
    color: white;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

body.con-vuelo3d {
    overflow: hidden;
}

.vuelo3d {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: linear-gradient(#8ec5ea, #dcecf7);
}

#mapa3d {
    position: absolute;
    inset: 0;
}

.vuelo3d-barra {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 14px;
    background: rgba(31, 107, 58, 0.92);
    color: white;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.vuelo3d-barra strong {
    font-size: 17px;
}

.vuelo3d-estado {
    flex: 1 1 200px;
    font-size: 14px;
    color: #dfeede;
}

.vuelo3d-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vuelo3d-botones button {
    padding: 9px 14px;
    border: 2px solid white;
    border-radius: 10px;
    background: transparent;
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.vuelo3d-botones button[data-v="volar"] {
    background: white;
    color: #1f6b3a;
}

.vuelo3d-botones button[data-v="grabar"] {
    border-color: #ff8a80;
    color: #ffcdd2;
}

.vuelo3d-grabar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 2px solid #ff8a80;
    border-radius: 10px;
    color: #ffcdd2;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.vuelo3d-grabar input {
    width: 18px;
    height: 18px;
    accent-color: #e53935;
}

.vuelo3d-botones button[data-v="campanas"] {
    border-color: #ffe082;
    color: #fff3c4;
}

.vuelo3d-botones button:disabled {
    opacity: 0.45;
    cursor: default;
}

.vuelo3d-rotulo {
    position: absolute;
    left: 20px;
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 18px;
    background: rgba(31, 107, 58, 0.9);
    color: white;
    border-radius: 12px;
}

.vuelo3d-rotulo[hidden] {
    display: none;
}

.vuelo3d-rotulo strong {
    font-size: 20px;
}

.vuelo3d-etiqueta {
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: #1f6b3a;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* Marco de plantación */
.form-marco label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #1f6b3a;
    font-size: 14px;
}

.form-marco select,
.form-marco input {
    padding: 9px 10px;
    border: 2px solid #cbd8c7;
    border-radius: 8px;
    font-size: 15px;
    font-weight: normal;
    color: #222;
    background: white;
}

.marco-otro {
    display: flex;
    gap: 10px;
}

.marco-otro[hidden] {
    display: none;
}

.marco-otro label {
    flex: 1;
}

.marco-resumen {
    padding: 8px 10px;
    border-radius: 8px;
    background: #f4f8f2;
    font-weight: bold;
    color: #1f6b3a;
}

/* Copia de seguridad: recuperar lo que tenía el navegador */
.respaldo-navegador {
    margin-top: 12px;
    padding: 10px 12px;
    border: 2px solid #b45f06;
    border-radius: 10px;
    background: #fff8e1;
}

.respaldo-navegador p {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: bold;
    color: #5c4a00;
}

.respaldo-navegador button {
    margin: 0 8px 0 0;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid #1f6b3a;
    background: white;
    color: #1f6b3a;
}

/* Naves: colocar por medidas, arrastrar y girar */
.nave-colocando {
    padding: 12px;
    margin-bottom: 12px;
    border: 2px solid #1f6b3a;
    border-radius: 10px;
    background: #f4f8f2;
}

.nave-giro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.nave-giro input[type="range"] {
    flex: 1 1 140px;
    accent-color: #1f6b3a;
}

#anguloNaveTexto {
    min-width: 40px;
    font-weight: bold;
    color: #1f6b3a;
}

#estadoColocarNave,
#estadoBalsa {
    font-weight: bold;
}

/* Variedades de los cultivos (🌳 Plantar) */
.variedades {
    margin-top: 16px;
    padding: 0 10px;
    border: 2px solid #c9d8c9;
    border-radius: 12px;
    background: #f4f8f2;
}

.variedades[open] {
    padding-bottom: 10px;
}

.variedades > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 12px 2px;
    cursor: pointer;
    font-weight: bold;
    color: #1f6b3a;
    list-style: none;
}

.variedades > summary::-webkit-details-marker {
    display: none;
}

.variedades > summary::before {
    content: '▸';
    transition: transform 0.15s;
}

.variedades[open] > summary::before {
    transform: rotate(90deg);
}

.variedades > summary small {
    font-weight: normal;
    color: #666;
}

/* Secciones de cultivos (Árboles, Cepas, Secano, Regadío) */
.grupos-cultivos {
    margin: 10px 0;
}

.grupo-cultivo,
.var-grupo {
    margin: 6px 0;
    border: 1px solid #c9d8c9;
    border-left: 5px solid #1f6b3a;
    border-radius: 10px;
    background: white;
}

.grupo-cultivo > summary,
.var-grupo > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 11px 12px;
    cursor: pointer;
    font-weight: bold;
    color: #1f6b3a;
    list-style: none;
}

.grupo-cultivo > summary::-webkit-details-marker,
.var-grupo > summary::-webkit-details-marker {
    display: none;
}

.grupo-cultivo > summary::before,
.var-grupo > summary::before {
    content: '▸';
    transition: transform 0.15s;
}

.grupo-cultivo[open] > summary::before,
.var-grupo[open] > summary::before {
    transform: rotate(90deg);
}

.grupo-cultivo > summary small {
    font-weight: normal;
    color: #666;
}

.grupo-cultivo .cultivos {
    padding: 0 12px 6px;
}

.var-grupo {
    padding: 0 8px;
}

.var-grupo[open] {
    padding-bottom: 8px;
}

/* 🚜 Caminos: presupuesto, arreglos, pendiente y resumen */
.camino-titularidad {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eef2ec;
    font-size: 12px;
}

.camino-presupuesto {
    margin: 6px 0;
}

.camino-presupuesto summary {
    cursor: pointer;
    color: #1f6b3a;
}

.camino-presupuesto ul {
    margin: 4px 0;
    padding-left: 20px;
    font-size: 14px;
}

.camino-dato {
    margin: 6px 0;
    font-size: 14px;
}

.camino-botones {
    margin: 6px 0;
}

.nave-dato {
    margin: 6px 0;
    font-size: 14px;
}

.acordeon-contenido button.camino-accion.mini:not([style]),
.acordeon-contenido button.nave-accion.mini:not([style]),
.nave-accion.mini,
.camino-accion.mini {
    margin: 0 0 0 4px;
    padding: 2px 6px;
    font-size: 12px;
}

.caminos-resumen section {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid #dde7da;
    border-radius: 10px;
    background: #f9fbf8;
}

.caminos-resumen h4 {
    margin: 0 0 6px;
    color: #1f6b3a;
}

.caminos-resumen ul {
    margin: 4px 0 8px;
    padding-left: 20px;
}

.caminos-resumen p {
    margin: 6px 0;
}

.caminos-aviso {
    color: #b45f06;
}

.icono-puerta-extra span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: white;
    border: 2px solid #4e342e;
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Botón «💬 Enviar opinión» de la barra de la cuenta */
.boton-opinion {
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: #f9a825;
    color: #3e2700;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.boton-opinion:hover {
    background: #fbc02d;
}

/* Desplegables de 💧 Riego (pozos, balsas, tuberías, agua) */
.riego-seccion {
    margin: 8px 0;
    border: 1px solid #b3d4e0;
    border-left: 5px solid #168aad;
    border-radius: 10px;
    background: white;
}

.riego-seccion > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 12px;
    cursor: pointer;
    font-weight: bold;
    color: #0d5c75;
    list-style: none;
}

.riego-seccion > summary::-webkit-details-marker {
    display: none;
}

.riego-seccion > summary::before {
    content: '▸';
    transition: transform 0.15s;
}

.riego-seccion[open] > summary::before {
    transform: rotate(90deg);
}

.riego-seccion > summary small {
    font-weight: normal;
    color: #666;
}

.riego-seccion-contenido {
    padding: 0 12px 12px;
}

.riego-seccion-contenido .agua-finca {
    margin-top: 0;
}

/* Agua de la finca al año (💧 Riego) */
.agua-finca {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid #b3d4e0;
    border-radius: 10px;
    background: #f1f8fb;
}

.agua-finca ul {
    margin: 6px 0;
    padding-left: 20px;
}

.agua-finca p {
    margin: 6px 0;
}

.agua-nota {
    font-size: 13px;
    color: #666;
}

/* Calendario de cosecha */
.agro-pregunta.calendario-cosecha {
    width: min(100%, 760px);
    max-height: 90vh;
    overflow-y: auto;
}

.calendario-cosecha h3 {
    margin: 0 0 10px;
    color: #1f6b3a;
}

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

.tabla-cosecha table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tabla-cosecha th {
    padding: 4px;
    text-align: center;
    color: #555;
}

.tabla-cosecha tbody th {
    text-align: left;
    font-weight: bold;
    color: #243424;
    min-width: 170px;
}

.tabla-cosecha tbody th small {
    display: block;
    font-weight: normal;
    color: #777;
}

.tabla-cosecha td {
    min-width: 22px;
    height: 26px;
    border: 1px solid #e3ebe0;
}

.tabla-cosecha .cosecha-hoy {
    outline: 2px solid #e65100;
    outline-offset: -2px;
}

.tabla-cosecha th.cosecha-hoy {
    color: #e65100;
    outline: none;
}

.vigilar-mes {
    padding-left: 20px;
}

.vigilar-mes li,
.plaga-ahora {
    margin: 4px 0;
}

.plaga-ahora {
    color: #b45f06;
}

/* Filtro de cultivos en el mapa (🔍) */
.control-filtro {
    background: white;
}

.boton-filtro.filtro-encendido {
    background: #ffe0b2;
}

/* Los controles de arriba a la izquierda (con el filtro abierto) quedan por encima de los de abajo. */
.leaflet-top.leaflet-left {
    z-index: 1001;
}

.panel-filtro {
    width: 210px;
    max-height: 260px;
    overflow-y: auto;
    padding: 10px;
    font-size: 14px;
    background: white;
}

.panel-filtro label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 5px 0;
    cursor: pointer;
}

.panel-filtro .filtro-agua {
    justify-content: space-between;
}

.panel-filtro select {
    padding: 4px;
    border-radius: 6px;
}

.leyenda-mapa {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #ddd;
}

.leyenda-mapa div {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
}

.leyenda-mapa span {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.leyenda-mapa small {
    margin-left: auto;
    color: #666;
}

.panel-filtro button {
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px solid #cbd8c7;
    border-radius: 8px;
    background: #f4f8f2;
    color: #1f6b3a;
    font-weight: bold;
    cursor: pointer;
}

/* Ficha completa de una parcela (📋 Ficha) */
.agro-pregunta.ficha-parcela {
    width: min(100%, 640px);
    max-height: 90vh;
    overflow-y: auto;
}

.ficha-parcela h3 {
    margin: 0 0 2px;
    color: #1f6b3a;
}

.agro-pregunta .ficha-sub {
    margin: 0 0 10px;
    font-size: 13px;
    color: #777;
}

.ficha-bloque {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid #dde7da;
    border-radius: 10px;
    background: #f9fbf8;
}

.ficha-bloque h4 {
    margin: 0 0 6px;
    color: #1f6b3a;
}

.ficha-bloque ul {
    margin: 0 0 6px;
    padding-left: 20px;
}

.ficha-bloque li {
    margin: 3px 0;
}

.agro-pregunta .ficha-bloque p {
    margin: 4px 0 8px;
    font-size: 15px;
}

.ficha-bloque button:not(.var-info) {
    margin: 4px 6px 0 0;
    padding: 8px 12px;
    border: 1px solid #cbd8c7;
    border-radius: 9px;
    background: white;
    color: #1f6b3a;
    font-weight: bold;
    cursor: pointer;
}

.ficha-bloque .var-info {
    width: 22px;
    height: 22px;
    font-size: 13px;
    vertical-align: middle;
}

.agro-pregunta .ficha-nota {
    font-size: 13px;
    color: #666;
}

.ficha-falta {
    color: #b45f06;
}

.cultivo-nombre-parcela {
    color: #0d47a1;
}

.cultivo-variedad {
    color: #1f6b3a;
    font-weight: bold;
}

.var-ayuda {
    margin: 0 0 8px;
    font-size: 14px;
    color: #555;
}

.var-cultivo {
    margin: 6px 0;
    border: 1px solid #c9d8c9;
    border-radius: 10px;
    background: white;
}

.var-cultivo summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}

.var-cultivo summary::-webkit-details-marker {
    display: none;
}

.var-cultivo summary::before {
    content: '▸';
    color: #1f6b3a;
    transition: transform 0.15s;
}

.var-cultivo[open] summary::before {
    transform: rotate(90deg);
}

.var-nombre {
    font-weight: bold;
    color: #1f6b3a;
}

.var-cultivo summary small {
    flex: 1;
    color: #777;
}

.var-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
}

.var-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f7faf6;
}

.var-item strong,
.var-item small {
    display: block;
}

.var-item small {
    color: #666;
}

.var-info,
.acordeon-contenido button.var-info:not([style]),
.var-i-ejemplo {
    flex: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid #1565c0;
    border-radius: 50%;
    background: white;
    color: #1565c0;
    font: italic bold 16px Georgia, serif;
    cursor: pointer;
}

.var-i-ejemplo {
    width: 20px;
    height: 20px;
    font-size: 12px;
    vertical-align: middle;
}

.var-info:hover,
.acordeon-contenido button.var-info:not([style]):hover {
    background: #1565c0;
    color: white;
}

.agro-pregunta.var-ficha {
    width: min(100%, 500px);
    max-height: 90vh;
    overflow-y: auto;
}

.var-ficha h3 {
    margin: 0 0 4px;
    color: #1f6b3a;
}

.agro-pregunta .var-uso {
    color: #666;
    font-size: 14px;
}

.var-ficha h4 {
    margin: 10px 0 4px;
}

.var-buenas {
    color: #1f6b3a;
}

.var-malas {
    color: #b45f06;
}

.var-ficha ul {
    margin: 0 0 8px;
    padding-left: 22px;
}

.var-ficha li {
    margin: 3px 0;
}

.agro-pregunta .var-nota {
    font-size: 13px;
    color: #666;
}

/* Depósitos, pozos y balsas (💧 Riego) */
.icono-agua span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: white;
    border: 2px solid #168aad;
    font-size: 17px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.icono-agua.principal span {
    border: 3px solid #e65100;
}

.punto-agua {
    margin: 8px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-left: 6px solid #168aad;
    border-radius: 8px;
}

.punto-agua p {
    margin: 4px 0;
}

.punto-agua-origen {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fff3e0;
    color: #e65100;
    font-size: 12px;
    font-weight: bold;
}

.punto-agua details {
    margin: 6px 0;
}

.punto-agua summary {
    cursor: pointer;
    color: #1f6b3a;
    font-weight: bold;
}

.punto-agua ul {
    margin: 6px 0;
    padding-left: 20px;
    font-size: 14px;
}

.punto-agua li {
    margin: 3px 0;
}

.punto-agua-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.asa-nave span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: white;
    border: 3px solid #1f6b3a;
    color: #1f6b3a;
    font-size: 20px;
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    cursor: move;
}

.asa-giro span {
    border-color: #e65100;
    color: #e65100;
    font-size: 18px;
    line-height: 24px;
    cursor: grab;
}

/* Notas del campo: apartado pequeño */
.notas-botones {
    display: flex;
    flex-wrap: wrap;
}

.notas-lista {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.notas-vacia {
    color: #777;
    font-size: 14px;
}

.nota {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #dfe7dc;
}

.nota.resuelta {
    opacity: 0.6;
}

.nota-foto {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #f4f8f2;
    border: 1px solid #cbd8c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
}

.nota-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nota-texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.nota-texto span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nota-texto small {
    color: #777;
}

.acordeon-contenido .nota-acciones button:not([style*="background"]) {
    margin: 0 0 0 4px;
    padding: 4px 7px;
    font-size: 15px;
}

.marca-nota span {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 26px;
    text-align: center;
    font-size: 16px;
    background: white;
    border: 2px solid #e65100;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.marca-nota span.resuelta {
    border-color: #1f6b3a;
}

.nota-popup img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
}

.nota-popup p {
    margin: 0 0 4px;
}

.form-nota textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 2px solid #cbd8c7;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    resize: vertical;
}

.nota-elegir-foto {
    display: inline-block;
    padding: 9px 14px;
    border: 2px dashed #9bb894;
    border-radius: 10px;
    color: #1f6b3a;
    font-weight: bold;
    cursor: pointer;
}

.nota-foto-elegida {
    display: block;
    margin: 6px 0 12px;
    color: #1f6b3a;
}

/* Barra «Dibujando…» encima del mapa (se queda arriba al bajar por la página) */
.barra-dibujo {
    position: sticky;
    top: 0;
    z-index: 4500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 10px;
    padding: 12px 16px;
    background: #1f6b3a;
    color: white;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.barra-dibujo-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 260px;
}

.barra-dibujo-texto strong {
    font-size: 17px;
}

.barra-dibujo-texto span {
    font-size: 14px;
    color: #dfeede;
}

.barra-dibujo-botones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.barra-dibujo-botones button {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.barra-dibujo-terminar {
    background: white;
    color: #1f6b3a;
    border: 2px solid white;
}

.barra-dibujo-cancelar {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.barra-dibujo[hidden],
.barra-dibujo-botones button[hidden] {
    display: none;
}

.barra-sin-conexion {
    position: sticky;
    top: 0;
    z-index: 4000;
    padding: 8px 14px;
    background: #b45f06;
    color: white;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

main {
    max-width: 1000px;
    margin: 30px auto;
    padding: 0 20px;
}

.buscador {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.buscador input {
    flex: 1;
    padding: 16px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 16px;
}

.buscador button {
    padding: 0 25px;
    border: none;
    border-radius: 10px;
    background: #1f6b3a;
    color: white;
    cursor: pointer;
}

.mapa {
    height: 450px;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid #b7cbb1;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
}

.superficie {
    background: white;
    padding: 20px;
    margin-top: 20px;
    border-radius: 12px;
    text-align: center;
}

.superficie h2 {
    margin-bottom: 8px;
}

.superficie input {
    width: 100%;
    max-width: 500px;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 16px;
    margin-bottom: 20px;
}

/* Datos de la finca con los colores de la app */
.superficie {
    border-top: 6px solid #1f6b3a;
}

.superficie > h2 {
    color: #1f6b3a;
    margin-bottom: 14px;
}

.superficie #nombreFinca {
    max-width: 700px;
    border: 2px solid #cbd8c7;
    font-weight: bold;
    color: #1f6b3a;
    margin-bottom: 14px;
}

.superficie #nombreFinca:focus,
.datos-finca .dato-finca input:focus,
.datos-finca .dato-finca select:focus,
.datos-finca .dato-finca textarea:focus {
    outline: none;
    border-color: #1f6b3a;
    box-shadow: 0 0 0 3px #dfeede;
}

/* Más datos de la finca: compacto, 3 por fila */
.datos-finca {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    max-width: 700px;
    margin: 0 auto 12px;
    padding: 14px;
    background: #1f6b3a;
    border: 1px solid #1f6b3a;
    border-radius: 10px;
    text-align: left;
}

.dato-finca {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    min-width: 0;
}

.dato-notas {
    grid-column: 1 / -1;
}

.datos-finca[hidden],
.dato-finca[hidden],
.datos-finca-aviso[hidden] {
    display: none;
}

.datos-finca .dato-finca input,
.datos-finca .dato-finca select,
.datos-finca .dato-finca textarea {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 7px 9px;
    border: 1px solid #cbd8c7;
    border-radius: 8px;
    font-size: 14px;
    font-weight: normal;
    font-family: inherit;
    color: #222;
    background: white;
}

.datos-finca .dato-finca textarea {
    resize: vertical;
}

.datos-finca-aviso {
    margin: 0 0 14px;
    font-size: 14px;
    color: #777;
}

@media (max-width: 600px) {
    .datos-finca {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Superficie a la izquierda y el informe PDF pegado a la derecha */
.fila-superficie {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 700px;
    margin: 0 auto;
}

.recuadro-superficie {
    border: 1px solid #1f6b3a;
    border-radius: 10px;
    padding: 14px;
}

/* Superficie en verde, como los cuadros de «Mis fincas» */
.recuadro-superficie {
    flex: 1 1 260px;
    background: #1f6b3a;
    color: white;
}

.recuadro-superficie h2,
.recuadro-superficie #hectareas {
    color: white;
}

.recuadro-superficie #perimetro {
    color: #dfeede;
}

/* Sin recuadro de fondo: solo el botón verde, del mismo alto que la superficie */
.recuadro-informe {
    flex: 0 1 auto;
    display: flex;
}

.recuadro-informe #botonInformePDF {
    flex: 1;
}

#hectareas {
    font-size: 30px;
    font-weight: bold;
    color: #1f6b3a;
}

#perimetro {
    margin-top: 10px;
    font-size: 18px;
    color: #555;
}

.opciones {
    background: white;
    margin-top: 20px;
    padding: 25px;
    border-radius: 12px;
}

.opciones h2 {
    margin-bottom: 20px;
}

.botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.botones button {
    padding: 14px 20px;
    border: 1px solid #cbd8c7;
    background: #f4f8f2;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
}

.botones button:hover {
    background: #dfeede;
}

/* Avisos de la página (en lugar de las ventanas del navegador) */
#agroAvisos {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    /* Por encima del cuaderno de campo (z-index 10000) */
    z-index: 20001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(92vw, 460px);
    pointer-events: none;
}

.agro-aviso {
    pointer-events: auto;
    background: #1f6b3a;
    color: white;
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-size: 15px;
    font-weight: bold;
    white-space: pre-line;
    cursor: pointer;
    animation: agro-entrar 0.2s ease-out;
    transition: opacity 0.25s, transform 0.25s;
}

.agro-aviso-cuidado {
    background: #b45f06;
}

.agro-aviso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agro-aviso-accion {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 2px solid white;
    border-radius: 8px;
    background: white;
    color: #1f6b3a;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.agro-aviso.saliendo {
    opacity: 0;
    transform: translateY(8px);
}

@keyframes agro-entrar {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* Preguntas de la página (Sí / Cancelar) */
.agro-pregunta-fondo {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.agro-pregunta {
    background: white;
    border-top: 6px solid #1f6b3a;
    border-radius: 12px;
    padding: 20px;
    width: min(100%, 440px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.agro-pregunta p {
    margin: 0 0 14px;
    font-size: 16px;
    white-space: pre-line;
    color: #222;
}

.agro-pregunta input {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 2px solid #cbd8c7;
    border-radius: 8px;
    font-size: 16px;
}

.agro-pregunta input:focus {
    outline: none;
    border-color: #1f6b3a;
}

.agro-pregunta-botones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.agro-pregunta-botones button {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.agro-pregunta-no {
    background: white;
    color: #1f6b3a;
    border: 2px solid #1f6b3a;
}

.agro-pregunta-si {
    background: #1f6b3a;
    color: white;
    border: 2px solid #1f6b3a;
}

.agro-pregunta-si.peligro {
    background: #c62828;
    border-color: #c62828;
}

/* «¿Qué quieres hacer?» en líneas desplegables */
.acordeon {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.acordeon-item {
    border: 1px solid #cbd8c7;
    border-left: 6px solid #1f6b3a;
    border-radius: 10px;
    overflow: hidden;
    background: white;
}

.acordeon-cabecera {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border: none;
    background: white;
    color: #1f6b3a;
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
}

.acordeon-cabecera:hover {
    background: #f4f8f2;
}

.acordeon-flecha {
    transition: transform 0.2s;
}

.acordeon-item.abierto .acordeon-cabecera {
    background: #1f6b3a;
    color: white;
}

.acordeon-item.abierto .acordeon-flecha {
    transform: rotate(180deg);
}

.acordeon-contenido {
    padding: 14px 18px;
    border-top: 1px solid #cbd8c7;
}

.acordeon-aviso {
    margin: 0 0 10px;
    color: #b45f06;
    font-weight: bold;
    font-size: 14px;
}

/* Calendario, Costes e Historial metidos dentro de una línea */
.acordeon-contenido > section.dentro-acordeon {
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
}

/* Mismo aspecto para todo lo que hay dentro de las líneas
   (salvo lo que ya trae su propio color) */
.acordeon-contenido button:not([style*="background"]) {
    margin: 0 8px 8px 0;
    padding: 10px 16px;
    border: 1px solid #cbd8c7;
    background: #f4f8f2;
    color: #1f6b3a;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
}

.acordeon-contenido button:not([style*="background"]):hover {
    background: #dfeede;
}

.acordeon-contenido button:disabled {
    opacity: 0.55;
    cursor: default;
}

.acordeon-contenido input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.acordeon-contenido select,
.acordeon-contenido textarea {
    padding: 8px 10px;
    border: 1px solid #cbd8c7;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: white;
    color: #222;
    max-width: 100%;
}

.acordeon-contenido input:focus,
.acordeon-contenido select:focus,
.acordeon-contenido textarea:focus {
    outline: none;
    border-color: #1f6b3a;
    box-shadow: 0 0 0 3px #dfeede;
}

.acordeon-contenido h3,
.acordeon-contenido h4 {
    color: #1f6b3a;
    margin: 4px 0 8px;
}

.acordeon-contenido p {
    margin: 6px 0 10px;
}

.acordeon-contenido table {
    border-collapse: collapse;
    max-width: 100%;
}

.acordeon-contenido th {
    background: #1f6b3a;
    color: white;
    padding: 6px 8px;
}

.acordeon-contenido td {
    border-bottom: 1px solid #dfe7dc;
    padding: 6px 8px;
}

/* Los recuadros grises de dentro de los paneles, en verde claro */
.acordeon-contenido div[style*="#c9d8c9"],
.acordeon-contenido div[style*="#ddd"] {
    border-color: #cbd8c7 !important;
    background-color: #f4f8f2;
}

.ia {
    display: block;
    margin: 30px auto;
    padding: 18px 35px;
    background: #1f6b3a;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.ia:hover {
    background: #18552e;
}

#resultado {
    text-align: center;
    margin: 20px;
    font-size: 18px;
}

footer {
    text-align: center;
    padding: 30px;
    color: #777;
}


/* BOTÓN DIBUJAR */

.boton-dibujo {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1000;
    padding: 12px 18px;
    background: #1f6b3a;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.boton-dibujo:hover {
    background: #18552e;
}


/* BOTÓN TERMINAR */

.boton-terminar {
    position: absolute;
    top: 60px;
    right: 15px;
    z-index: 1000;
    padding: 12px 18px;
    background: white;
    color: #1f6b3a;
    border: 2px solid #1f6b3a;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}


/* BOTÓN NUEVA FINCA */

.boton-nueva-finca {
    position: absolute;
    top: 105px;
    right: 15px;
    z-index: 1000;
    padding: 12px 18px;
    background: #1f6b3a;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}


/* MIS FINCAS */

.mis-fincas {
    width: 100%;
    background: white;
    margin-top: 20px;
    padding: 25px;
    border-radius: 12px;
}

.mis-fincas h2 {
    margin-bottom: 20px;
}

/* Fincas a la izquierda y copia de seguridad a la derecha */
.fincas-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.columna-fincas {
    flex: 2 1 480px;
    min-width: 0;
}

.columna-copia {
    flex: 1 1 260px;
    min-width: 0;
}

.copia-seguridad {
    background: #f4f8f2;
    border: 1px solid #cbd8c7;
    border-radius: 10px;
    padding: 14px;
}

/* Fincas en cuadros pequeños, una al lado de otra hacia la derecha */
#listaFincas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 600px) {
    #listaFincas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#listaFincas > p {
    grid-column: 1 / -1;
}

.finca-item {
    background: #1f6b3a;
    color: white;
    border: 1px solid #1f6b3a;
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    min-width: 0;
}

.finca-item strong {
    overflow-wrap: anywhere;
}

/* El tiempo de hoy dentro de cada cuadro de finca */
.finca-tiempo {
    margin-top: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #dfeede;
    white-space: pre;
}

.finca-nueva {
    border: 2px dashed #9bb894;
    border-radius: 10px;
    padding: 12px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #1f6b3a;
    cursor: pointer;
}

.finca-nueva:hover {
    background: #dfeede;
}

.finca-nueva-mas {
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
}

.finca-item button {
    width: 100%;
    margin-top: 6px;
    padding: 5px 6px;
    font-size: 13px;
    cursor: pointer;
    background: white;
    color: #1f6b3a;
    border: none;
    border-radius: 6px;
    font-weight: bold;
}

.finca-item button:hover {
    background: #dfeede;
}

.finca-item:hover {
    background: #18552e;
}

.finca-item strong {
    font-size: 17px;
}

.finca-item span {
    color: #dfeede;
    font-size: 14px;
}