*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}body{color:#202225;background:#f3f4f6;min-width:320px;font-family:Inter,Arial,sans-serif}button{font:inherit}.app{width:100%;min-height:100vh;display:flex}.sidebar{color:#fff;background:#202225;flex-direction:column;width:245px;min-height:100vh;padding:32px 20px 24px;display:flex}.brand{padding:0 12px 34px}.brand h1{letter-spacing:4px;margin:0;font-size:30px}.brand span{color:#9ca3af;letter-spacing:3px;font-size:11px;font-weight:600}.sidebar nav{flex-direction:column;gap:8px;display:flex}.sidebar nav button{color:#c5c8ce;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;width:100%;padding:13px 15px}.sidebar nav button:hover,.sidebar nav button.active{color:#fff;background:#35383d}.sidebarFooter{border-top:1px solid #3d4045;flex-direction:column;gap:4px;margin-top:auto;padding:20px 12px 0;display:flex}.sidebarFooter span{letter-spacing:2px;font-size:15px;font-weight:700}.sidebarFooter small{color:#92969d}.main{flex:1;min-width:0;padding:40px}.main header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.subtitle{color:#828790;letter-spacing:2px;margin:0 0 6px;font-size:11px;font-weight:700}.main header h2{margin:0;font-size:30px}.welcome{color:#7b8088;margin:8px 0 0}.newButton{color:#fff;cursor:pointer;background:#202225;border:0;border-radius:10px;padding:12px 22px;font-weight:600}.newButton:hover{background:#34373c}.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px;display:grid}.card{background:#fff;border:1px solid #e4e6e9;border-radius:14px;padding:22px;box-shadow:0 3px 12px #0000000a}.card span{color:#7d828a;letter-spacing:1px;margin-bottom:15px;font-size:11px;font-weight:700;display:block}.card strong{margin-bottom:8px;font-size:29px;display:block}.card p{color:#989ca3;margin:0;font-size:13px}.content{grid-template-columns:2fr 1fr;gap:18px;display:grid}.panel{background:#fff;border:1px solid #e4e6e9;border-radius:14px;min-height:310px;padding:24px;box-shadow:0 3px 12px #0000000a}.panelTitle{border-bottom:1px solid #eceef0;justify-content:space-between;align-items:flex-start;padding-bottom:20px;display:flex}.panelTitle h3{margin:0 0 5px;font-size:17px}.panelTitle p{color:#969aa1;margin:0;font-size:13px}.panelTitle button{color:#555b63;cursor:pointer;background:0 0;border:0;font-size:13px;font-weight:600}.empty{color:#8f949c;text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:210px;display:flex}.empty span{margin-bottom:10px;font-size:30px}.empty h3{color:#484d54;margin:5px 0;font-size:16px}.empty p{margin:5px 0;font-size:13px}.empty.small span{color:#5c9f82}@media (width<=1000px){.cards{grid-template-columns:repeat(2,1fr)}.content{grid-template-columns:1fr}}@media (width<=700px){.app{flex-direction:column}.sidebar{width:100%;min-height:auto;padding:20px}.brand{padding-bottom:18px}.sidebar nav{grid-template-columns:repeat(2,1fr);display:grid}.sidebarFooter{display:none}.main{padding:24px 18px}.main header{align-items:flex-start}.cards{grid-template-columns:1fr}.newButton{padding:10px 15px}}.pageHeader{justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px;display:flex}.pageHeader h2{margin:0;font-size:30px}.pageHeader .welcome{margin-top:8px}.clientesPanel{background:#fff;border:1px solid #e4e6e9;border-radius:14px;min-height:180px;overflow:hidden;box-shadow:0 3px 12px #0000000a}.clientesList{flex-direction:column;display:flex}.clienteItem{border-bottom:1px solid #eceef0;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px 24px;display:grid}.clienteItem:last-child{border-bottom:0}.clienteItem:hover{background:#f8f9fa}.clienteAvatar{color:#fff;background:#202225;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:18px;font-weight:700;display:flex}.clienteInfo{flex-direction:column;gap:5px;min-width:0;display:flex}.clienteInfo strong{color:#292c30;font-size:16px}.clienteInfo span{color:#666c74;font-size:14px}.clienteInfo small{color:#979ca4;text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.estadoActivo,.estadoInactivo{border-radius:20px;padding:7px 12px;font-size:12px;font-weight:700}.estadoActivo{color:#237452;background:#e7f6ef}.estadoInactivo{color:#9a4141;background:#f5e9e9}.headerActions{align-items:center;gap:10px;display:flex}.logoutButton{color:#4d535a;cursor:pointer;background:#fff;border:1px solid #d5d8dc;border-radius:10px;padding:11px 16px}.logoutButton:hover{background:#eceef0}@media (width<=700px){.pageHeader{align-items:flex-start}.pageHeader .newButton{padding:10px 13px;font-size:13px}.clienteItem{grid-template-columns:42px minmax(0,1fr);padding:17px}.clienteAvatar{width:42px;height:42px}.estadoActivo,.estadoInactivo{grid-column:2;width:max-content}}.modalOverlay{z-index:1000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#141619a6;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modalCard{background:#fff;border-radius:18px;width:min(760px,100%);max-height:90vh;padding:30px;overflow-y:auto;box-shadow:0 24px 70px #00000040}.modalHeader{justify-content:space-between;align-items:flex-start;margin-bottom:26px;display:flex}.modalHeader h2{margin:4px 0 0;font-size:27px}.closeButton{color:#30343a;cursor:pointer;background:#eff0f2;border:0;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:25px;display:flex}.closeButton:hover{background:#e1e3e6}.clienteForm{flex-direction:column;gap:20px;display:flex}.formGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.clienteForm label{color:#4b5057;flex-direction:column;gap:8px;font-size:13px;font-weight:600;display:flex}.clienteForm input,.clienteForm select,.clienteForm textarea{color:#24272b;width:100%;font:inherit;background:#fff;border:1px solid #d9dce0;border-radius:9px;outline:none;padding:12px 13px;font-size:14px}.clienteForm textarea{resize:vertical}.clienteForm input:focus,.clienteForm select:focus,.clienteForm textarea:focus{border-color:#555b63;box-shadow:0 0 0 3px #32373d1a}.formActions{justify-content:flex-end;gap:10px;padding-top:6px;display:flex}.cancelButton{color:#555b63;cursor:pointer;background:#fff;border:1px solid #d7dadd;border-radius:10px;padding:11px 18px}.cancelButton:hover{background:#f1f2f3}@media (width<=700px){.modalOverlay{padding:12px}.modalCard{padding:22px 18px}.formGrid{grid-template-columns:1fr}.formActions{flex-direction:column-reverse}.formActions button{width:100%}}.clienteActions{align-items:center;gap:10px;display:flex}.editButton{color:#4d535a;cursor:pointer;background:#fff;border:1px solid #d7dadd;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700}.editButton:hover{background:#f0f1f2;border-color:#aeb3b9}@media (width<=700px){.clienteActions{flex-wrap:wrap;grid-column:2}}.clientesToolbar{gap:12px;margin-bottom:16px;display:flex}.clientesToolbar input,.clientesToolbar select{color:#34383e;font:inherit;background:#fff;border:1px solid #d9dce0;border-radius:10px;outline:none;padding:12px 14px}.clientesToolbar input{flex:1}.clientesToolbar select{min-width:190px}.clientesToolbar input:focus,.clientesToolbar select:focus{border-color:#555b63;box-shadow:0 0 0 3px #32373d14}@media (width<=700px){.clientesToolbar{flex-direction:column}.clientesToolbar select{width:100%}}.deactivateButton,.activateButton{cursor:pointer;background:#fff;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700}.deactivateButton{color:#a14a4a;border:1px solid #e2caca}.deactivateButton:hover{background:#faeeee}.activateButton{color:#237452;border:1px solid #b9ddce}.activateButton:hover{background:#e7f6ef}.obrasGrid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;display:grid}.obraCard{background:#fff;border:1px solid #e2e5e8;border-radius:14px;padding:22px;box-shadow:0 3px 12px #0000000a}.obraCardHeader{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.obraIcon{background:#f0f1f3;border-radius:11px;justify-content:center;align-items:center;width:42px;height:42px;font-size:20px;display:flex}.obraEstado{color:#93671f;background:#fff3dc;border-radius:18px;padding:7px 11px;font-size:12px;font-weight:700}.obraCard h3{color:#292c30;margin:0 0 8px;font-size:19px}.obraCliente{color:#555b63;margin:0 0 7px;font-weight:600}.obraDireccion{color:#92979e;min-height:38px;margin:0 0 20px;font-size:13px}.obraFechas{border-top:1px solid #eceef0;grid-template-columns:1fr 1fr;gap:12px;padding-top:17px;display:grid}.obraFechas span{color:#979ca4;text-transform:uppercase;flex-direction:column;gap:5px;font-size:11px;display:flex}.obraFechas strong{color:#4b5057;text-transform:none;font-size:13px}.obrasEmpty{background:#fff;border:1px solid #e2e5e8;border-radius:14px;grid-column:1/-1;min-height:300px}@media (width<=700px){.obrasGrid{grid-template-columns:1fr}}.obrasRecientesList{flex-direction:column;display:flex}.obraRecienteItem{border-bottom:1px solid #eceef0;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:14px;padding:17px 4px;display:grid}.obraRecienteItem:last-child{border-bottom:0}.obraRecienteIcon{background:#f0f1f3;border-radius:10px;justify-content:center;align-items:center;width:42px;height:42px;display:flex}.obraRecienteInfo{flex-direction:column;gap:3px;display:flex}.obraRecienteInfo strong{color:#292c30;font-size:14px}.obraRecienteInfo span{color:#666c74;font-size:13px}.obraRecienteInfo small{color:#999ea5}.obraRecienteEstado{color:#93671f;background:#fff3dc;border-radius:16px;padding:6px 10px;font-size:11px;font-weight:700}@media (width<=700px){.obraRecienteItem{grid-template-columns:42px minmax(0,1fr)}.obraRecienteEstado{grid-column:2;width:max-content}}.obraEstadoSelect{color:#93671f;font:inherit;cursor:pointer;background:#fff3dc;border:1px solid #ead6af;border-radius:18px;outline:none;padding:7px 11px;font-size:12px;font-weight:700}.obraDescripcion{color:#676d74;margin:0 0 18px;font-size:13px;line-height:1.5}.obraCardActions{justify-content:flex-end;padding-top:16px;display:flex}.obraCardActions .editButton{padding:9px 14px}.loginPage{background:#f3f4f6;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.loginCard{background:#fff;border:1px solid #e1e4e8;border-radius:24px;width:100%;max-width:440px;padding:42px;box-shadow:0 20px 55px #14191e1f}.loginBrand{margin-bottom:38px}.loginBrand h1{color:#202225;letter-spacing:8px;margin:0;font-size:48px;font-weight:700}.loginBrand span{color:#858b96;letter-spacing:6px;font-size:14px;font-weight:700}.loginTitle{margin-bottom:30px}.loginTitle h2{color:#202225;margin:0 0 8px;font-size:30px}.loginTitle p{color:#7b818c;margin:0;font-size:16px}.loginCard label{color:#3f444d;flex-direction:column;gap:9px;margin-bottom:20px;font-size:14px;font-weight:600;display:flex}.loginCard input{color:#202225;box-sizing:border-box;background:#fff;border:1px solid #d7dbe0;border-radius:12px;outline:none;width:100%;height:52px;padding:0 16px;font-size:16px}.loginCard input:focus{border-color:#202225;box-shadow:0 0 0 3px #20222514}.loginCard button[type=submit]{color:#fff;cursor:pointer;background:#202225;border:0;border-radius:12px;width:100%;height:54px;margin-top:8px;font-size:16px;font-weight:700}.loginCard button[type=submit]:hover{background:#34373b}.loginCard button[type=submit]:disabled{cursor:not-allowed;opacity:.65}.loginError{color:#b42318;background:#fff1f1;border-radius:10px;margin:0 0 16px;padding:12px 14px;font-size:14px}.loading{color:#202225;background:#f3f4f6;justify-content:center;align-items:center;min-height:100vh;font-size:18px;font-weight:600;display:flex}@media (width<=520px){.loginPage{padding:16px}.loginCard{border-radius:18px;padding:30px 24px}.loginBrand h1{font-size:40px}}