@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --rojo-alerta:#C62828; --rojo-suave:#EF5350; --gris-oscuro:#388E3C;
  --gris-medio:#3A3A5C; --gris-claro:#E8E8EF; --blanco:#FAFBFC;
  --verde-ok:#388E3C; --panel-ancho:400px; --header-alto:56px;
}
body { font-family:'Inter',system-ui,sans-serif; background:var(--gris-oscuro); color:#1A1A2E; height:100vh; overflow:hidden; }

/* HEADER */
.header { height:var(--header-alto); background:var(--gris-oscuro); display:flex; align-items:center; padding:0 20px; gap:12px; z-index:100; position:relative; }
.header .logo { width:32px;height:32px;background:white;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px; }
.header h1 { font-size:16px;font-weight:600;color:white;letter-spacing:-0.3px; }
.header .instruccion { margin-left:auto;font-size:14px;color:#FFFFFF;opacity:1;font-weight:500;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,0.3);padding:8px 16px;border-radius:20px; }
.header .instruccion .dot { width:8px;height:8px;background:#EF5350;border-radius:50%;animation:pulso 2s infinite; }
@keyframes pulso { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.3)} }

/* TOOLBAR */
.toolbar { position:absolute;top:10px;left:10px;z-index:40;display:flex;flex-direction:column;gap:6px; }
.toolbar button { width:36px;height:36px;background:white;border:2px solid #E8E8EF;border-radius:8px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background 0.2s;box-shadow:0 2px 6px rgba(0,0,0,0.15); }
.toolbar button:hover { background:#F0F0F7; }
.toolbar button.activo { background:#C62828;color:white;border-color:#C62828; }
.toolbar .separador-toolbar { width:28px;height:1px;background:#E8E8EF;margin:2px auto; }

/* CONTENEDOR Y MAPA */
.contenedor { display:flex; height:calc(100vh - var(--header-alto)); position:relative; }
#mapa { flex:1;height:100%; }
#mapa.modo-denuncia { cursor:crosshair; }
#mapa.modo-pan { cursor:grab; }
#mapa.modo-pan:active { cursor:grabbing; }
#mapa.modo-info { cursor:help; }

/* PANEL LATERAL */
.panel { position:absolute;right:0;top:0;width:var(--panel-ancho);height:100%;background:white;transform:translateX(100%);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);z-index:50;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,0.15); }
.panel.abierto { transform:translateX(0); }
.panel-header { padding:16px 20px;border-bottom:1px solid #E8E8EF;display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
.panel-header h2 { font-size:16px;font-weight:700;color:#1A1A2E; }
.btn-cerrar { width:32px;height:32px;border:none;background:#E8E8EF;border-radius:8px;cursor:pointer;font-size:18px;color:#3A3A5C;display:flex;align-items:center;justify-content:center;transition:background 0.2s; }
.btn-cerrar:hover { background:#D0D0DD; }
.panel-ubicacion { padding:12px 20px;background:#F0F0F7;border-bottom:1px solid #E8E8EF;flex-shrink:0; }
.panel-ubicacion .coords { font-size:12px;color:#3A3A5C;font-variant-numeric:tabular-nums; }
.panel-ubicacion .lugar { font-size:14px;font-weight:500;margin-top:2px;color:#1A1A2E; }
.panel-body { flex:1;overflow-y:auto;padding:20px; }

/* FORMULARIO */
.campo { margin-bottom:18px; }
.campo label { display:block;font-size:13px;font-weight:600;color:#3A3A5C;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px; }
.campo select,.campo textarea,.campo input[type="text"],.campo input[type="email"],.campo input[type="tel"],.campo input[type="number"] { width:100%;padding:10px 12px;border:2px solid #E8E8EF;border-radius:8px;font-family:inherit;font-size:14px;color:#1A1A2E;background:white;transition:border-color 0.2s;outline:none; }
.campo select:focus,.campo textarea:focus,.campo input:focus { border-color:#EF5350; }
.campo textarea { min-height:90px;resize:vertical; }
.toggle-row { display:flex;align-items:center;justify-content:space-between;padding:10px 0; }
.toggle-row span { font-size:14px;font-weight:500;color:#1A1A2E; }
.toggle { width:44px;height:24px;background:#E8E8EF;border-radius:12px;position:relative;cursor:pointer;transition:background 0.3s; }
.toggle.activo { background:#C62828; }
.toggle::after { content:'';position:absolute;width:20px;height:20px;background:white;border-radius:50%;top:2px;left:2px;transition:transform 0.3s;box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.toggle.activo::after { transform:translateX(20px); }
.zona-fotos { border:2px dashed #E8E8EF;border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:border-color 0.2s,background 0.2s;color:#3A3A5C;font-size:13px; }
.zona-fotos:hover { border-color:#EF5350;background:#FFF5F5; }
.zona-fotos .icono-camara { font-size:28px;margin-bottom:6px; }
.checkbox-row { display:flex;align-items:center;gap:8px;margin-bottom:12px; }
.checkbox-row input[type="checkbox"] { width:18px;height:18px;accent-color:#C62828; }
.checkbox-row label { font-size:14px;font-weight:400;color:#1A1A2E;text-transform:none;letter-spacing:0;margin:0; }
.datos-contacto { max-height:0;overflow:hidden;transition:max-height 0.3s ease; }
.datos-contacto.visible { max-height:300px; }
.panel-footer { padding:16px 20px;border-top:1px solid #E8E8EF;flex-shrink:0; }
.btn-enviar { width:100%;padding:14px;background:#C62828;color:white;border:none;border-radius:10px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background 0.2s,transform 0.1s; }
.btn-enviar:hover { background:#B71C1C; }
.btn-enviar:active { transform:scale(0.98); }
.btn-enviar:disabled { background:#999;cursor:not-allowed; }

/* TOAST */
.toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#388E3C;color:white;padding:14px 28px;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,0.25);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);z-index:200; }
.toast.visible { transform:translateX(-50%) translateY(0); }

/* LEYENDA */
.leyenda { position:absolute;bottom:40px;left:10px;background:rgba(255,255,255,0.95);border-radius:10px;padding:12px 16px;box-shadow:0 2px 8px rgba(0,0,0,0.15);z-index:40;font-size:12px; }
.leyenda h4 { margin-bottom:8px;font-size:13px;color:#1A1A2E; }
.leyenda-item { display:flex;align-items:center;gap:8px;margin-bottom:4px; }
.leyenda-color { width:16px;height:16px;border-radius:3px;border:1px solid #808080; }
.leyenda-punto { width:12px;height:12px;border-radius:50%;border:1px solid #808080; }

/* CONTROL CAPAS */
.control-capas { position:absolute;top:10px;right:10px;background:rgba(255,255,255,0.95);border-radius:10px;padding:12px 16px;box-shadow:0 2px 8px rgba(0,0,0,0.15);z-index:40;font-size:13px; }
.control-capas h4 { margin-bottom:8px;font-size:13px;color:#1A1A2E; }
.control-capas label { display:block;margin-bottom:6px;cursor:pointer;color:#1A1A2E; }
.control-capas input[type="checkbox"] { accent-color:#C62828;margin-right:6px; }

/* POPUP INFO */
.popup-info { position:absolute;background:rgba(255,255,255,0.97);border-radius:10px;padding:16px 20px;box-shadow:0 4px 16px rgba(0,0,0,0.25);z-index:60;font-size:13px;max-width:340px;min-width:260px;border-left:4px solid #C62828;display:none; }
.popup-info h4 { color:#C62828;margin-bottom:10px;font-size:15px; }
.popup-info .campo-info { margin-bottom:6px;line-height:1.4; }
.popup-info .campo-info strong { color:#3A3A5C;margin-right:4px; }
.popup-info .btn-cerrar-popup { position:absolute;top:8px;right:10px;background:none;border:none;font-size:18px;cursor:pointer;color:#3A3A5C; }
.popup-info .btn-cerrar-popup:hover { color:#C62828; }

/* BARRA DE ESCALA */
.ol-scale-bar { position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:none!important;box-shadow:none!important;border:none!important; }
.ol-scale-bar-inner { background:none!important;box-shadow:none!important; }
.ol-scale-step-text,.ol-scale-text { color:#333!important;font-size:11px!important;text-shadow:1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff!important; }
.ol-scale-singlebar-even { background-color:#333!important; }
.ol-scale-singlebar-odd { background-color:#fff!important;border:1px solid #333!important; }

/* FONDO DEL MAPA (océano) */
.ol-viewport { background: #AAD3DF !important; }


.btn-donar {
  position:fixed;bottom:20px;right:20px;z-index:100;
  background:#C62828;color:white;text-decoration:none;
  padding:10px 18px;border-radius:30px;font-size:14px;font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  transition:transform 0.2s,background 0.2s;
  display:flex;align-items:center;gap:6px;
}
.btn-donar:hover { background:#B71C1C;transform:scale(1.05); }


/* RESPONSIVE */
@media (max-width:600px) {
  .header .instruccion span { display:none; }
  .leyenda { display:none; }
  .control-capas { top:auto;bottom:50px;right:10px; }
  .panel { width:100%;height:75vh;top:auto;bottom:0;right:0;transform:translateY(100%);border-radius:16px 16px 0 0; }
  .panel.abierto { transform:translateY(0); }
  .panel-header { position:relative; }
  .panel-header::before { content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:36px;height:4px;background:#E8E8EF;border-radius:2px; }
}