body{font-family:Arial,Helvetica,sans-serif;margin:12px;padding:0;color:#222;background:#D3D3D3}
header h1{margin:0 0 12px}
#filters{margin-bottom:12px}
#card s{ /* placeholder to keep diff context */ }
#cards{display:block}
.card{border:1px solid #ddd;padding:8px;border-radius:6px;background:#fff}
.card img{width:100%;height:160px;object-fit:cover;border-radius:6px}
.chip{display:inline-block;background:#eee;padding:4px 8px;border-radius:12px;margin-right:6px;font-size:12px}

.accion-card{display:flex;align-items:center;gap:12px;padding:6px;border-radius:8px;background:transparent}
.accion-thumb{width:72px;height:72px;flex-shrink:0;border-radius:12px;overflow:hidden;background:#f3f4f6;display:flex;align-items:center;justify-content:center}
.accion-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.accion-icon{width:72px;height:72px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.accion-content{flex:1;background:#fff;border-radius:12px;padding:12px;box-shadow:0 6px 18px rgba(11,22,39,0.06)}
.accion-card h4{margin:0 0 6px;font-size:16px}
.accion-card .desc{margin:6px 0 0;color:#333;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.accion-meta{font-size:12px;color:#6b7280;margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.status-badge{background:#eef2ff;color:#3730a3;padding:4px 8px;border-radius:999px;font-size:12px}
.see-more{display:inline-block;margin-top:8px;color:#2563eb;text-decoration:none;font-size:13px}
#gallery figure{display:inline-block;margin:6px}
#gallery img{max-width:240px}

/* Rubro color badges and card accent (Pantone palette approximations) */
.rubro-badge { display:inline-block; padding:4px 8px; border-radius:12px; color:#fff; font-size:12px; }
.rubro-agua { background:#C4A873; }        /* Copper & Gold */
.rubro-drenaje { background:#36454F; }     /* Charcoal */
.rubro-saneamiento { background:#8B1D1D; } /* Deep Red */
.rubro-obras-publicas { background:#C4A873; } /* Copper & Gold */
.rubro-servicios-publicos { background:#8B1D1D; }
.rubro-transporte { background:#8B1D1D; }
.rubro-movilidad { background:#8B1D1D; }
.rubro-apoyos { background:#C4A873; }
.rubro-campo { background:#36454F; }

.accion-card { border-left:6px solid transparent; }
.accion-card .rubro-badge { margin-bottom:6px; color:#fff }

/* Eje/tema presentation */
.eje-section{margin:18px 0;padding:10px 0;border-top:1px solid #eee}
.eje-section h2{font-size:18px;margin:8px 0 12px;color:#0f1724}
.tema-header{font-size:15px;margin:8px 0;color:#374151}
.tema-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}
.tema-cards .card{padding:0;border-radius:8px}

/* Tabs / folder-like UI for Ejes */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tabs .tab{background:transparent;border:1px solid rgba(15,23,36,0.06);padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:700;color:#374151;transition:all .22s}
.tabs .tab.active{background:linear-gradient(90deg,#36454F 0%, #8B1D1D 100%);color:#fff;transform:translateY(-4px);box-shadow:0 8px 20px rgba(54,69,79,0.3)}
.tab-panels{margin-top:10px}
.tab-panel{display:none;opacity:0;transform:translateY(6px);transition:opacity .28s, transform .28s}
.tab-panel.active{display:block;opacity:1;transform:translateY(0)}

/* make cards inside tabs look like folder panels */
.tab-panel .tema-cards .card{background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.9));border:1px solid rgba(15,23,36,0.04);box-shadow:0 8px 20px rgba(11,22,39,0.04)}

/* hover / interactive */
.tema-cards .accion-card{transition:transform .18s ease, box-shadow .18s ease}
.tema-cards .accion-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(11,22,39,0.08)}

/* simple rubro color mapping for icon backgrounds */
.rubro-default { background: #8B1D1D }
.rubro-Agua { background: #C4A873 }
.rubro-Drenaje { background: #36454F }
.rubro-Saneamiento { background: #8B1D1D }
.rubro-Obras { background: #C4A873 }
.rubro-Apoyos { background: #C4A873 }

@media (max-width:700px){
	.tabs .tab{padding:8px 10px;font-size:13px}
	.tema-cards{grid-template-columns:1fr}
}

/* Eje accordion (stacked tabs) */
.eje-accordion{display:flex;flex-direction:column;gap:8px}
.eje-tab{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.8));border:1px solid rgba(54,69,79,0.2);cursor:pointer;font-weight:700;color:#36454F;box-shadow:0 6px 18px rgba(0,0,0,0.08)}
.eje-tab .eje-title{font-size:16px}
.eje-tab .eje-caret{font-size:16px;color:#8B1D1D;transform:rotate(0);transition:transform .18s}
.eje-tab.open{background:linear-gradient(90deg,#36454F 0%, #8B1D1D 100%);color:#fff}
.eje-tab.open .eje-caret{transform:rotate(90deg);color:rgba(255,255,255,0.9)}
.eje-panel{overflow:hidden;max-height:0;transition:max-height .26s ease;padding:0 6px}
.eje-panel.open{padding:10px 6px;margin-bottom:8px;max-height:1600px}
.eje-panel .tema-header h3{margin:0 0 8px;color:#fff;background:linear-gradient(90deg,#C4A873 0%, #8B1D1D 100%);padding:8px 12px;border-radius:8px;color:#fff}

@media (max-width:900px){
  .eje-tab{padding:10px}
}

@media (max-width:900px){
	.accion-card{grid-template-columns:1fr;}
	.accion-card img{width:100%;height:160px}
}

/* Admin list improvements */
.admin-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.admin-search{padding:6px 8px;border:1px solid #ccc;border-radius:6px;width:260px}
.admin-table{width:100%;border-collapse:collapse;background:#fff}
.admin-table th,.admin-table td{padding:10px;border-bottom:1px solid #eee;vertical-align:middle;text-align:left}
.admin-table thead th{background:#fafafa;font-weight:600}
.admin-table tbody tr:hover{background:#fbfbfb}
.thumbnail{width:72px;height:54px;object-fit:cover;border-radius:4px;border:1px solid #e6e6e6}
.btn{display:inline-block;padding:6px 10px;border-radius:6px;text-decoration:none;color:#fff;border:none;cursor:pointer}
.btn-edit{background:#17a2b8}
.btn-delete{background:#dc3545}
.btn-create{background:#28a745}
.small-chip{display:inline-block;padding:4px 8px;border-radius:12px;background:#eee;color:#333;font-size:12px;margin-right:6px}
.admin-actions{display:flex;gap:8px;align-items:center}

/* Modal (detalle) styles */
.seg-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:1200; }
.seg-modal-backdrop { position:fixed; inset:0; background:rgba(2,6,23,0.6); opacity:0; transition:opacity .22s; }
.seg-modal.open .seg-modal-backdrop { opacity:1; }
.seg-modal-window { position:relative; width:min(1100px, 96%); max-height:86vh; overflow:auto; border-radius:12px; transform:translateY(12px) scale(.98); opacity:0; transition:opacity .22s, transform .22s; }
.seg-modal.open .seg-modal-window { transform:translateY(0) scale(1); opacity:1; }
.seg-modal-window .seg-modal-content { background:linear-gradient(180deg,#fff,#fbfdff); border-radius:12px; padding:18px; box-shadow:0 18px 48px rgba(11,22,39,0.18); border:1px solid rgba(15,23,36,0.06); }
.seg-modal-close { position:absolute; right:14px; top:10px; background:transparent;border:none;font-size:26px;line-height:1;color:#374151;cursor:pointer;border-radius:8px;padding:6px }
.seg-modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px }
.seg-modal-header h2{margin:0;font-size:20px;color:#0f1724}
.seg-modal-header .seg-meta{display:flex;gap:8px;align-items:center}
.seg-modal-gallery{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.seg-modal-gallery figure{width:calc(33% - 8px); min-width:160px; margin:0; border-radius:8px; overflow:hidden; background:#f7fafc; box-shadow:0 6px 20px rgba(11,22,39,0.06);}
.seg-modal-gallery img{display:block;width:100%;height:160px;object-fit:cover}
.seg-modal-gallery figcaption{padding:8px;font-size:13px;color:#374151}
.seg-full-desc{padding:10px 0;color:#333;line-height:1.5}

@media (max-width:900px){
	.seg-modal-gallery figure{width:calc(50% - 8px)}
}
@media (max-width:520px){
	.seg-modal-gallery figure{width:100%}
	.seg-modal-window{width:98%}
}