anima-ds-nucleus 1.0.25 → 1.0.26

package/dist/anima-ds.cjs.js

@@ -463,7 +463,7 @@ React keys must be passed directly to JSX without using spread:
             text-align: ${C?"center":"left"};
           }
         }
-      `}),l.jsxs("div",{className:"grid grid-cols-[minmax(0,1fr)_auto] grid-rows-[auto_auto] gap-x-4 gap-y-1 items-center",children:[u&&l.jsxs("div",{className:`scfd-inicio col-start-1 row-start-1 flex items-center gap-1 ${r0}`,style:{paddingLeft:"8px",...A||{}},children:[l.jsx(x,{variant:"body-md",className:$,style:{color:"#223B40",fontFamily:"IBM Plex Sans",fontWeight:700,fontStyle:"normal",fontSize:"14px",lineHeight:"20px",letterSpacing:"0%",verticalAlign:"middle",...T||{}},children:d}),s&&i?l.jsx(b,{name:i,variant:f,size:w,className:K,style:{color:"#223B40",opacity:1,transform:"rotate(0deg)",...D||{}}}):null]}),l.jsxs("div",{className:`scfd-saludo-fecha col-start-1 col-end-3 row-start-2 flex items-center justify-between ${W}`,style:{width:"100%",minHeight:"74px",gap:"24px",opacity:1,transform:"rotate(0deg)",paddingTop:"16px",paddingBottom:"16px",paddingLeft:"8px",boxSizing:"border-box",visibility:c?"visible":"hidden",...H||{}},children:[l.jsx("div",{className:`scfd-greeting-wrapper min-w-0 ${k}`,style:B,children:l.jsxs(x,{variant:"h5",className:`scfd-greeting ${M}`,style:{color:"#223B40",fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"28px",lineHeight:"42px",letterSpacing:"0%",verticalAlign:"middle",...I||{}},children:[l.jsxs("span",{style:{display:"inline-block",verticalAlign:"middle",fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"28px",lineHeight:"42px",letterSpacing:"0%",color:"#223B40"},children:[_,r]}),a?l.jsxs(l.Fragment,{children:[l.jsx("span",{style:{display:"inline-block",verticalAlign:"middle"},children:", "}),l.jsx("span",{className:e0,style:{display:"inline-block",verticalAlign:"middle",color:"#223B40",fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"28px",lineHeight:"42px",letterSpacing:"0%",...c0||{}},children:a})]}):null,l.jsx("span",{style:{display:"inline-block",verticalAlign:"middle"},children:n0})]})}),n&&l0?l.jsx("div",{className:`scfd-date flex items-center flex-shrink-0 ${Q}`,style:P,children:l.jsx(x,{variant:"body-lg",className:`color-gray-600 ${U}`,style:p0,children:l0})}):null]})]})]})},aP=({className:a="",...r})=>l.jsx("div",{className:`w-full bg-white ${a}`,style:{height:"150px",border:"1px solid #c4c4c4",borderRadius:"16px",paddingTop:"24px",paddingLeft:"24px",display:"flex",flexDirection:"column"},...r,children:l.jsx(x,{variant:"body-lg",style:{fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"20px",lineHeight:"30px",letterSpacing:"0%",verticalAlign:"middle",color:"#223B40"},children:"Acciones rápidas"})}),Ue=({className:a="",...r})=>l.jsxs("div",{className:`bg-white ${a}`,style:{width:"379.5px",height:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1},...r,children:[l.jsx("style",{children:`
+      `}),l.jsxs("div",{className:"grid grid-cols-[minmax(0,1fr)_auto] grid-rows-[auto_auto] gap-x-4 gap-y-1 items-center",children:[u&&l.jsxs("div",{className:`scfd-inicio col-start-1 row-start-1 flex items-center gap-1 ${r0}`,style:{paddingLeft:"8px",...A||{}},children:[l.jsx(x,{variant:"body-md",className:$,style:{color:"#223B40",fontFamily:"IBM Plex Sans",fontWeight:700,fontStyle:"normal",fontSize:"14px",lineHeight:"20px",letterSpacing:"0%",verticalAlign:"middle",...T||{}},children:d}),s&&i?l.jsx(b,{name:i,variant:f,size:w,className:K,style:{color:"#223B40",opacity:1,transform:"rotate(0deg)",...D||{}}}):null]}),l.jsxs("div",{className:`scfd-saludo-fecha col-start-1 col-end-3 row-start-2 flex items-center justify-between ${W}`,style:{width:"100%",minHeight:"74px",gap:"24px",opacity:1,transform:"rotate(0deg)",paddingTop:"16px",paddingBottom:"16px",paddingLeft:"8px",boxSizing:"border-box",visibility:c?"visible":"hidden",...H||{}},children:[l.jsx("div",{className:`scfd-greeting-wrapper min-w-0 ${k}`,style:B,children:l.jsxs(x,{variant:"h5",className:`scfd-greeting ${M}`,style:{color:"#223B40",fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"28px",lineHeight:"42px",letterSpacing:"0%",verticalAlign:"middle",...I||{}},children:[l.jsxs("span",{style:{display:"inline-block",verticalAlign:"middle",fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"28px",lineHeight:"42px",letterSpacing:"0%",color:"#223B40"},children:[_,r]}),a?l.jsxs(l.Fragment,{children:[l.jsx("span",{style:{display:"inline-block",verticalAlign:"middle"},children:", "}),l.jsx("span",{className:e0,style:{display:"inline-block",verticalAlign:"middle",color:"#223B40",fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"28px",lineHeight:"42px",letterSpacing:"0%",...c0||{}},children:a})]}):null,l.jsx("span",{style:{display:"inline-block",verticalAlign:"middle"},children:n0})]})}),n&&l0?l.jsx("div",{className:`scfd-date flex items-center flex-shrink-0 ${Q}`,style:P,children:l.jsx(x,{variant:"body-lg",className:`color-gray-600 ${U}`,style:p0,children:l0})}):null]})]})]})},aP=({className:a="",...r})=>l.jsx("div",{className:`w-full bg-white ${a}`,style:{height:"150px",border:"1px solid #c4c4c4",borderRadius:"16px",paddingTop:"24px",paddingLeft:"24px",display:"flex",flexDirection:"column"},...r,children:l.jsx(x,{variant:"body-lg",style:{fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"20px",lineHeight:"30px",letterSpacing:"0%",verticalAlign:"middle",color:"#223B40"},children:"Acciones rápidas"})}),Ue=({className:a="",...r})=>l.jsxs("div",{className:`bg-white w-full ${a}`,style:{minHeight:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1,display:"flex",flexDirection:"column"},...r,children:[l.jsx("style",{children:`
         @keyframes skeleton-pulse {
           0%, 100% {
             background-color: #DDDDDD;
@@ -475,7 +475,7 @@ React keys must be passed directly to JSX without using spread:
         .skeleton-animation {
           animation: skeleton-pulse 1.5s ease-in-out infinite;
         }
-      `}),l.jsxs("div",{className:"h-full flex flex-col",children:[l.jsx("div",{style:{width:"379.5px",height:"60px",paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1},children:l.jsx("div",{className:"rounded skeleton-animation",style:{backgroundColor:"#DDDDDD",height:"20px",width:"200px"}})}),l.jsxs("div",{className:"flex-1",style:{paddingLeft:"24px",paddingRight:"24px",paddingBottom:"24px",display:"flex",flexDirection:"column",gap:"16px"},children:[l.jsx("div",{className:"rounded skeleton-animation",style:{backgroundColor:"#DDDDDD",height:"80px",width:"100%"}}),l.jsx("div",{className:"rounded skeleton-animation",style:{backgroundColor:"#DDDDDD",height:"80px",width:"100%"}}),l.jsx("div",{className:"rounded skeleton-animation",style:{backgroundColor:"#DDDDDD",height:"80px",width:"100%"}})]})]})]}),ze=({title:a="Notificaciones",className:r="",...t})=>l.jsxs("div",{className:`bg-white ${r}`,style:{width:"379.5px",height:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1},...t,children:[l.jsx("div",{style:{width:"379.5px",height:"60px",paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1},className:"flex items-start justify-between",children:l.jsx("div",{style:{width:"331.5px",height:"30px",opacity:1},children:l.jsx(x,{variant:"body-md",className:"color-gray-700",children:a})})}),l.jsxs("div",{className:"flex flex-col items-center justify-center",style:{paddingTop:"80px",paddingBottom:"24px",display:"flex",justifyContent:"flex-start"},children:[l.jsx("div",{className:"mb-4 flex items-center justify-center",style:{width:"63.99068069458008px",height:"64px",borderRadius:"12px",paddingTop:"8px",paddingRight:"8px",paddingBottom:"8px",paddingLeft:"8px",backgroundColor:"#E6F7F0",opacity:1},children:l.jsx(b,{name:"HandThumbDownIcon",variant:"24-outline",size:32,className:"color-gray-900"})}),l.jsx(x,{variant:"h5",className:"color-gray-900 mb-2",style:{fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"24px",lineHeight:"36px",letterSpacing:"0px",textAlign:"center"},children:"UPS..."}),l.jsx(x,{variant:"body-lg",className:"color-gray-700 text-center",style:{fontSize:"18px",lineHeight:"27px"},children:"Parece que esta tarjeta no contiene información."})]})]}),_e=({title:a="Notificaciones",errorMessage:r="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta elementum neque, vel vehicula nulla pharetra id.",className:t="",...n})=>l.jsxs("div",{className:`bg-white ${t}`,style:{width:"379.5px",height:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1},...n,children:[l.jsx("div",{style:{width:"379.5px",height:"60px",paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1},className:"flex items-start justify-between",children:l.jsx("div",{style:{width:"331.5px",height:"30px",opacity:1},children:l.jsx(x,{variant:"body-md",className:"color-gray-700",children:a})})}),l.jsxs("div",{className:"flex flex-col items-center justify-center",style:{paddingTop:"80px",paddingBottom:"24px",display:"flex",justifyContent:"flex-start"},children:[l.jsx("div",{className:"mb-4 flex items-center justify-center border-2 rounded-full",style:{borderColor:"#374151",width:"48px",height:"48px",opacity:1},children:l.jsx(b,{name:"XMarkIcon",variant:"24-outline",size:32,className:"color-gray-900"})}),l.jsx("div",{style:{width:"331.5px",height:"48px",opacity:1,display:"flex",alignItems:"center",justifyContent:"center",marginBottom:"16px"},children:l.jsx(x,{variant:"h3",style:{fontFamily:"IBM Plex Sans",fontWeight:600,fontStyle:"normal",fontSize:"32px",lineHeight:"48px",letterSpacing:"0px",textAlign:"center",color:"#2D5C63"},children:"ERROR"})}),l.jsx("div",{className:"border flex items-center justify-center",style:{width:"331.5px",height:"128px",borderRadius:"10px",borderWidth:"1px",borderColor:"#EF4444",backgroundColor:"#FEE2E2",paddingTop:"16px",paddingRight:"16px",paddingBottom:"8px",paddingLeft:"16px",opacity:1},children:l.jsx("div",{style:{width:"298px",height:"96px",opacity:1},children:l.jsx(x,{variant:"mono-md",style:{color:"#991B1B"},children:r})})})]})]}),qe=({title:a="Notificaciones",children:r,className:t="",...n})=>l.jsxs("div",{className:`bg-white ${t}`,style:{width:"379.5px",height:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1},...n,children:[l.jsx("div",{style:{width:"379.5px",height:"60px",paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1},className:"flex items-start justify-between",children:l.jsx("div",{style:{width:"331.5px",height:"30px",opacity:1},children:l.jsx(x,{variant:"body-md",style:{fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"20px",lineHeight:"30px",letterSpacing:"0%",verticalAlign:"middle",color:"#223B40",margin:0},children:a})})}),r&&l.jsx("div",{style:{width:"379.5px",height:"416px",paddingRight:"24px",paddingLeft:"24px",gap:"16px",opacity:1,display:"flex",flexDirection:"column"},children:r})]}),Ge=({title:a="Notificaciones y Alertas del Sistema de Gestión de Recursos Humanos",children:r,className:t="",...n})=>l.jsxs("div",{className:`bg-white ${t}`,style:{width:"379.5px",height:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1},...n,children:[l.jsx("div",{style:{width:"379.5px",height:"60px",paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1},className:"flex items-start justify-between",children:l.jsx("div",{style:{width:"331.5px",height:"30px",opacity:1},children:l.jsx(x,{variant:"body-md",style:{fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"20px",lineHeight:"30px",letterSpacing:"0%",verticalAlign:"middle",color:"#223B40",margin:0},children:a})})}),r&&l.jsx("div",{style:{width:"379.5px",height:"416px",paddingRight:"24px",paddingLeft:"24px",gap:"16px",opacity:1,display:"flex",flexDirection:"column"},children:r})]}),Xe=({title:a="Notificaciones",status:r="3 nuevas",children:t,className:n="",...c})=>l.jsxs("div",{className:`bg-white ${n}`,style:{width:"379.5px",height:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1},...c,children:[l.jsxs("div",{style:{width:"379.5px",height:"60px",paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1},className:"flex items-start justify-between",children:[l.jsx("div",{style:{width:"331.5px",height:"30px",opacity:1},children:l.jsx(x,{variant:"body-md",style:{fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"20px",lineHeight:"30px",letterSpacing:"0%",verticalAlign:"middle",color:"#223B40",margin:0},children:a})}),l.jsx("span",{className:"text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center",style:{width:"90px",height:"24px",borderRadius:"12px",paddingTop:"2px",paddingRight:"12px",paddingBottom:"4px",paddingLeft:"12px",backgroundColor:"#E6F7F0",color:"#2D5C63",opacity:1},children:r})]}),t&&l.jsx("div",{style:{width:"379.5px",height:"416px",paddingRight:"24px",paddingLeft:"24px",gap:"16px",opacity:1,display:"flex",flexDirection:"column"},children:t})]}),Ye=({title:a="Notificaciones y Alertas del Sistema de Gestión de Recursos Humanos",status:r="3 nuevas",children:t,className:n="",...c})=>l.jsxs("div",{className:`bg-white ${n}`,style:{width:"379.5px",height:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1},...c,children:[l.jsxs("div",{style:{width:"379.5px",height:"90px",paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1},className:"flex items-start justify-between",children:[l.jsx("div",{style:{width:"241.5px",height:"60px",opacity:1},children:l.jsx(x,{variant:"body-md",style:{fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"20px",lineHeight:"30px",letterSpacing:"0%",verticalAlign:"middle",color:"#223B40",margin:0},children:a})}),l.jsx("span",{className:"text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center",style:{width:"90px",height:"24px",borderRadius:"12px",paddingTop:"2px",paddingRight:"12px",paddingBottom:"4px",paddingLeft:"12px",backgroundColor:"#E6F7F0",color:"#2D5C63",opacity:1},children:r})]}),t&&l.jsx("div",{style:{width:"379.5px",height:"416px",paddingRight:"24px",paddingLeft:"24px",gap:"16px",opacity:1,display:"flex",flexDirection:"column"},children:t})]}),rP=({loading:a=!1,error:r=null,hasData:t=null,data:n=null,variant:c="corto",title:u="Notificaciones",status:d=null,errorMessage:s=null,children:i=null,className:f="",...w})=>{if(a)return l.jsx(Ue,{className:f,...w});if(r)return l.jsx(_e,{title:u,errorMessage:s||r,className:f,...w});if(!(t!==null?t:n!=null&&n!==""))return l.jsx(ze,{title:u,className:f,...w});switch(c){case"largo":return l.jsx(Ge,{title:u,className:f,...w,children:i});case"cortoMasEstado":return l.jsx(Xe,{title:u,status:d,className:f,...w,children:i});case"largoMasEstado":return l.jsx(Ye,{title:u,status:d,className:f,...w,children:i});case"corto":default:return l.jsx(qe,{title:u,className:f,...w,children:i})}},nP={MuiTablePagination:{labelRowsPerPage:"Filas por página",labelDisplayedRows:({from:a,to:r,count:t})=>`${a}–${r} de ${t!==-1?t:`más de ${r}`}`},toolbarDensity:"Densidad",toolbarDensityLabel:"Densidad",toolbarDensityCompact:"Compacta",toolbarDensityStandard:"Estándar",toolbarDensityComfortable:"Cómoda",toolbarFilters:"Filtros",toolbarFiltersLabel:"Mostrar filtros",toolbarFiltersTooltipHide:"Ocultar filtros",toolbarFiltersTooltipShow:"Mostrar filtros",toolbarExport:"Exportar",toolbarExportLabel:"Exportar",toolbarExportCSV:"Descargar como CSV",toolbarExportPrint:"Imprimir",toolbarColumns:"Columnas",toolbarColumnsLabel:"Seleccionar columnas",filterPanelAddFilter:"Agregar filtro",filterPanelDeleteIconLabel:"Eliminar",filterPanelOperators:"Operadores",filterPanelOperatorAnd:"Y",filterPanelOperatorOr:"O",filterPanelColumns:"Columnas",filterPanelInputLabel:"Valor",filterPanelInputPlaceholder:"Valor del filtro",filterPanelInputPlaceholderOperator:"Operador",noRowsLabel:"No hay datos disponibles",noResultsOverlayLabel:"No se encontraron resultados",errorOverlayDefaultLabel:"Ocurrió un error",loadingOverlayLabel:"Cargando...",footerRowSelected:a=>a!==1?`${a} filas seleccionadas`:`${a} fila seleccionada`},tP=({columns:a=[],rows:r=[],loading:t=!1,emptyMessage:n,pageSize:c=10,pageSizeOptions:u=[5,10,25,50],className:d="",...s})=>{const{t:i}=g0.useTranslation(),f=a.map(h=>{const C=h.translationKey?i(h.translationKey):h.label||h.headerName;return{...h,headerName:C,label:C}}),w=[{field:"id",headerName:i("table.id"),width:90,translationKey:"table.id"},{field:"name",headerName:i("table.name"),width:200,translationKey:"table.name"},{field:"email",headerName:i("table.email"),width:250,translationKey:"table.email"},{field:"role",headerName:i("table.role"),width:150,translationKey:"table.role"}],g=f.length>0?f:w,p={...nP,...n&&{noRowsLabel:n}};return l.jsx(r5.Box,{className:d,sx:{height:400,width:"100%"},children:l.jsx(a5.DataGrid,{rows:r,columns:g,loading:t,pageSizeOptions:u,initialState:{pagination:{paginationModel:{pageSize:c}}},localeText:p,disableRowSelectionOnClick:!0,...s})})},lP=({series:a=[],categories:r=[],title:t="",height:n=350,colors:c=["#3B82F6","#10B981","#F59E0B","#EF4444","#8B5CF6"],showLegend:u=!0,showToolbar:d=!0,className:s="",...i})=>{const f=Z.useMemo(()=>({chart:{type:"line",height:n,toolbar:{show:d,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0}}},colors:c,stroke:{curve:"smooth",width:2},xaxis:{categories:r,labels:{style:{colors:"#6B7280"}}},yaxis:{labels:{style:{colors:"#6B7280"}}},legend:{show:u,position:"top",horizontalAlign:"center"},grid:{borderColor:"#E5E7EB",strokeDashArray:4},tooltip:{theme:"light"},dataLabels:{enabled:!1}}),[r,c,n,u,d]);return l.jsxs("div",{className:s,children:[t&&l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:t}),l.jsx(Q0,{options:f,series:a,type:"line",height:n,...i})]})},oP=({series:a=[],categories:r=[],title:t="",height:n=350,colors:c=["#3B82F6","#10B981","#F59E0B","#EF4444","#8B5CF6"],showLegend:u=!0,showToolbar:d=!0,horizontal:s=!1,className:i="",...f})=>{const w=Z.useMemo(()=>({chart:{type:"bar",height:n,toolbar:{show:d,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0}}},colors:c,plotOptions:{bar:{horizontal:s,borderRadius:4,columnWidth:"55%"}},xaxis:{categories:r,labels:{style:{colors:"#6B7280"}}},yaxis:{labels:{style:{colors:"#6B7280"}}},legend:{show:u,position:"top",horizontalAlign:"center"},grid:{borderColor:"#E5E7EB",strokeDashArray:4},tooltip:{theme:"light"},dataLabels:{enabled:!1}}),[r,c,n,u,d,s]);return l.jsxs("div",{className:i,children:[t&&l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:t}),l.jsx(Q0,{options:w,series:a,type:"bar",height:n,...f})]})},cP=({series:a=[],categories:r=[],title:t="",height:n=350,colors:c=["#3B82F6","#10B981","#F59E0B","#EF4444","#8B5CF6"],showLegend:u=!0,showToolbar:d=!0,className:s="",...i})=>{const f=Z.useMemo(()=>({chart:{type:"area",height:n,toolbar:{show:d,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0}}},colors:c,stroke:{curve:"smooth",width:2},fill:{type:"gradient",gradient:{shadeIntensity:1,opacityFrom:.7,opacityTo:.3,stops:[0,90,100]}},xaxis:{categories:r,labels:{style:{colors:"#6B7280"}}},yaxis:{labels:{style:{colors:"#6B7280"}}},legend:{show:u,position:"top",horizontalAlign:"center"},grid:{borderColor:"#E5E7EB",strokeDashArray:4},tooltip:{theme:"light"},dataLabels:{enabled:!1}}),[r,c,n,u,d]);return l.jsxs("div",{className:s,children:[t&&l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:t}),l.jsx(Q0,{options:f,series:a,type:"area",height:n,...i})]})},iP=({series:a=[],labels:r=[],title:t="",height:n=350,colors:c=["#3B82F6","#10B981","#F59E0B","#EF4444","#8B5CF6","#EC4899","#06B6D4"],showLegend:u=!0,className:d="",...s})=>{const i=Z.useMemo(()=>({chart:{type:"pie",height:n,toolbar:{show:!1}},colors:c,labels:r,legend:{show:u,position:"bottom"},dataLabels:{enabled:!0,formatter:f=>`${f.toFixed(1)}%`},tooltip:{theme:"light",y:{formatter:f=>`${f}`}},plotOptions:{pie:{donut:{size:"0%"}}}}),[r,c,n,u]);return l.jsxs("div",{className:d,children:[t&&l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:t}),l.jsx(Q0,{options:i,series:a,type:"pie",height:n,...s})]})},dP=({series:a=[],labels:r=[],title:t="",height:n=350,colors:c=["#3B82F6","#10B981","#F59E0B","#EF4444","#8B5CF6","#EC4899","#06B6D4"],showLegend:u=!0,donutSize:d="70%",className:s="",...i})=>{const f=Z.useMemo(()=>({chart:{type:"donut",height:n,toolbar:{show:!1}},colors:c,labels:r,legend:{show:u,position:"bottom"},dataLabels:{enabled:!0,formatter:w=>`${w.toFixed(1)}%`},tooltip:{theme:"light",y:{formatter:w=>`${w}`}},plotOptions:{pie:{donut:{size:d,labels:{show:!0,name:{show:!0},value:{show:!0,formatter:w=>`${w}`},total:{show:!0,label:"Total",formatter:()=>a.reduce((g,p)=>g+p,0).toString()}}}}}}),[r,c,n,u,d,a]);return l.jsxs("div",{className:s,children:[t&&l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:t}),l.jsx(Q0,{options:f,series:a,type:"donut",height:n,...i})]})},sP=({series:a=[],categories:r=[],title:t="",height:n=350,colors:c=["#3B82F6","#10B981","#F59E0B","#EF4444","#8B5CF6"],showLegend:u=!0,showToolbar:d=!0,className:s="",...i})=>{const f=Z.useMemo(()=>({chart:{type:"column",height:n,toolbar:{show:d,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0}}},colors:c,plotOptions:{bar:{horizontal:!1,borderRadius:4,columnWidth:"55%",dataLabels:{position:"top"}}},xaxis:{categories:r,labels:{style:{colors:"#6B7280"}}},yaxis:{labels:{style:{colors:"#6B7280"}}},legend:{show:u,position:"top",horizontalAlign:"center"},grid:{borderColor:"#E5E7EB",strokeDashArray:4},tooltip:{theme:"light"},dataLabels:{enabled:!1}}),[r,c,n,u,d]);return l.jsxs("div",{className:s,children:[t&&l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:t}),l.jsx(Q0,{options:f,series:a,type:"bar",height:n,...i})]})},uP=({icon:a="DocumentIcon",title:r="No hay datos",description:t="No se encontraron elementos para mostrar.",actionLabel:n,onAction:c,className:u="",...d})=>l.jsxs("div",{className:`flex flex-col items-center justify-center py-12 px-4 ${u}`,...d,children:[l.jsx("div",{className:"mb-4",children:l.jsx(b,{name:a,className:"h-16 w-16 text-gray-400"})}),l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-2",children:r}),l.jsx("p",{className:"text-sm text-gray-500 text-center max-w-sm mb-4",children:t}),n&&c&&l.jsx(s0,{variant:"primary",onClick:c,children:n})]}),fP=({title:a,value:r,change:t,changeType:n="neutral",icon:c,iconColor:u="blue",className:d="",...s})=>{const i={blue:"bg-blue-100 text-blue-600",green:"bg-green-100 text-green-600",yellow:"bg-yellow-100 text-yellow-600",red:"bg-red-100 text-red-600",purple:"bg-purple-100 text-purple-600"},f={positive:"text-green-600",negative:"text-red-600",neutral:"text-gray-600"};return l.jsx("div",{className:`bg-white rounded-lg shadow-md p-6 ${d}`,...s,children:l.jsxs("div",{className:"flex items-center justify-between",children:[l.jsxs("div",{className:"flex-1",children:[l.jsx(x,{variant:"body2",className:"text-gray-600 mb-1",children:a}),l.jsx(x,{variant:"h3",className:"text-gray-900 mb-2",children:r}),t&&l.jsx("div",{className:`flex items-center text-sm ${f[n]}`,children:l.jsx("span",{children:t})})]}),c&&l.jsx("div",{className:`p-3 rounded-lg ${i[u]}`,children:l.jsx(b,{name:c,className:"h-6 w-6"})})]})})},wP=({items:a=[],className:r="",...t})=>a.length===0?null:l.jsx("div",{className:r,...t,children:l.jsx("ol",{className:"relative border-l border-gray-200",children:a.map((n,c)=>{const u=c===a.length-1;return l.jsxs("li",{className:`mb-10 ml-6 ${u?"mb-0":""}`,children:[l.jsx("div",{className:"absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white"}),l.jsx("time",{className:"mb-1 text-sm font-normal leading-none text-gray-400",children:n.date}),l.jsx("h3",{className:"text-lg font-semibold text-gray-900",children:n.title}),n.description&&l.jsx("p",{className:"mb-4 text-base font-normal text-gray-500",children:n.description}),n.icon&&l.jsx("div",{className:"absolute -left-8 top-0",children:l.jsx(b,{name:n.icon,className:"h-6 w-6 text-gray-400"})})]},c)})})}),hP=({items:a=[],variant:r="default",className:t="",...n})=>{if(a.length===0)return null;const c={default:"divide-y divide-gray-200",none:""};return l.jsx("ul",{className:`${c[r]} ${t}`,...n,children:a.map((u,d)=>l.jsx("li",{className:"py-3",children:typeof u=="string"?l.jsx("span",{className:"text-gray-900",children:u}):u},d))})},mP=({tags:a=[],onRemove:r,variant:t="default",className:n="",...c})=>a.length===0?null:l.jsx("div",{className:`flex flex-wrap gap-2 ${n}`,...c,children:a.map((u,d)=>{const s=typeof u=="string"?u:u.label,i=typeof u=="string"?t:u.variant||t;return l.jsxs(Fe,{variant:i,children:[s,r&&l.jsx("button",{onClick:()=>r(d),className:"ml-2 hover:text-gray-800",children:"×"})]},d)})}),Re=({label:a,placeholder:r,value:t,onChange:n,error:c,required:u=!1,disabled:d=!1,variant:s,className:i="",inputClassName:f="",labelClassName:w="",labelStyle:g,...p})=>{const[h,C]=Z.useState(!1),y=s==="hexa-login",R=`
+      `}),l.jsxs("div",{className:"h-full flex flex-col",children:[l.jsx("div",{style:{paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1,flexShrink:0},children:l.jsx("div",{className:"rounded skeleton-animation",style:{backgroundColor:"#DDDDDD",height:"20px",width:"200px"}})}),l.jsxs("div",{className:"flex-1",style:{paddingLeft:"24px",paddingRight:"24px",paddingBottom:"24px",display:"flex",flexDirection:"column",gap:"16px"},children:[l.jsx("div",{className:"rounded skeleton-animation",style:{backgroundColor:"#DDDDDD",height:"80px",width:"100%"}}),l.jsx("div",{className:"rounded skeleton-animation",style:{backgroundColor:"#DDDDDD",height:"80px",width:"100%"}}),l.jsx("div",{className:"rounded skeleton-animation",style:{backgroundColor:"#DDDDDD",height:"80px",width:"100%"}})]})]})]}),ze=({title:a="Notificaciones",className:r="",...t})=>l.jsxs("div",{className:`bg-white w-full ${r}`,style:{minHeight:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1,display:"flex",flexDirection:"column"},...t,children:[l.jsx("div",{style:{paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1,flexShrink:0},className:"flex items-start justify-between",children:l.jsx("div",{style:{flex:1,minWidth:0,opacity:1},children:l.jsx(x,{variant:"body-md",className:"color-gray-700",children:a})})}),l.jsxs("div",{className:"flex flex-col items-center justify-center flex-1",style:{paddingTop:"80px",paddingBottom:"24px",paddingLeft:"24px",paddingRight:"24px",display:"flex",justifyContent:"flex-start",minHeight:0},children:[l.jsx("div",{className:"mb-4 flex items-center justify-center flex-shrink-0",style:{width:"64px",height:"64px",borderRadius:"12px",paddingTop:"8px",paddingRight:"8px",paddingBottom:"8px",paddingLeft:"8px",backgroundColor:"#E6F7F0",opacity:1},children:l.jsx(b,{name:"HandThumbDownIcon",variant:"24-outline",size:32,className:"color-gray-900"})}),l.jsx(x,{variant:"h5",className:"color-gray-900 mb-2",style:{fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"24px",lineHeight:"36px",letterSpacing:"0px",textAlign:"center"},children:"UPS..."}),l.jsx(x,{variant:"body-lg",className:"color-gray-700 text-center",style:{fontSize:"18px",lineHeight:"27px"},children:"Parece que esta tarjeta no contiene información."})]})]}),_e=({title:a="Notificaciones",errorMessage:r="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta elementum neque, vel vehicula nulla pharetra id.",className:t="",...n})=>l.jsxs("div",{className:`bg-white w-full ${t}`,style:{minHeight:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1,display:"flex",flexDirection:"column"},...n,children:[l.jsx("div",{style:{paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1,flexShrink:0},className:"flex items-start justify-between",children:l.jsx("div",{style:{flex:1,minWidth:0,opacity:1},children:l.jsx(x,{variant:"body-md",className:"color-gray-700",children:a})})}),l.jsxs("div",{className:"flex flex-col items-center justify-center flex-1",style:{paddingTop:"80px",paddingBottom:"24px",paddingLeft:"24px",paddingRight:"24px",display:"flex",justifyContent:"flex-start",minHeight:0},children:[l.jsx("div",{className:"mb-4 flex items-center justify-center border-2 rounded-full flex-shrink-0",style:{borderColor:"#374151",width:"48px",height:"48px",opacity:1},children:l.jsx(b,{name:"XMarkIcon",variant:"24-outline",size:32,className:"color-gray-900"})}),l.jsx("div",{style:{width:"100%",maxWidth:"331.5px",opacity:1,display:"flex",alignItems:"center",justifyContent:"center",marginBottom:"16px"},children:l.jsx(x,{variant:"h3",style:{fontFamily:"IBM Plex Sans",fontWeight:600,fontStyle:"normal",fontSize:"32px",lineHeight:"48px",letterSpacing:"0px",textAlign:"center",color:"#2D5C63"},children:"ERROR"})}),l.jsx("div",{className:"border flex items-center justify-center",style:{width:"100%",maxWidth:"331.5px",minHeight:"128px",borderRadius:"10px",borderWidth:"1px",borderColor:"#EF4444",backgroundColor:"#FEE2E2",paddingTop:"16px",paddingRight:"16px",paddingBottom:"8px",paddingLeft:"16px",opacity:1},children:l.jsx("div",{style:{width:"100%",opacity:1},children:l.jsx(x,{variant:"mono-md",style:{color:"#991B1B"},children:r})})})]})]}),qe=({title:a="Notificaciones",children:r,className:t="",...n})=>l.jsxs("div",{className:`bg-white w-full ${t}`,style:{minHeight:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1,display:"flex",flexDirection:"column"},...n,children:[l.jsx("div",{style:{paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1,flexShrink:0},className:"flex items-start justify-between",children:l.jsx("div",{style:{flex:1,minWidth:0,opacity:1},children:l.jsx(x,{variant:"body-md",style:{fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"20px",lineHeight:"30px",letterSpacing:"0%",verticalAlign:"middle",color:"#223B40",margin:0},children:a})})}),r&&l.jsx("div",{style:{flex:1,paddingRight:"24px",paddingLeft:"24px",paddingBottom:"24px",gap:"16px",opacity:1,display:"flex",flexDirection:"column",minHeight:0,overflow:"auto"},children:r})]}),Ge=({title:a="Notificaciones y Alertas del Sistema de Gestión de Recursos Humanos",children:r,className:t="",...n})=>l.jsxs("div",{className:`bg-white w-full ${t}`,style:{minHeight:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1,display:"flex",flexDirection:"column"},...n,children:[l.jsx("div",{style:{paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1,flexShrink:0},className:"flex items-start justify-between",children:l.jsx("div",{style:{flex:1,minWidth:0,opacity:1},children:l.jsx(x,{variant:"body-md",style:{fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"20px",lineHeight:"30px",letterSpacing:"0%",verticalAlign:"middle",color:"#223B40",margin:0},children:a})})}),r&&l.jsx("div",{style:{flex:1,paddingRight:"24px",paddingLeft:"24px",paddingBottom:"24px",gap:"16px",opacity:1,display:"flex",flexDirection:"column",minHeight:0,overflow:"auto"},children:r})]}),Xe=({title:a="Notificaciones",status:r="3 nuevas",children:t,className:n="",...c})=>l.jsxs("div",{className:`bg-white w-full ${n}`,style:{minHeight:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1,display:"flex",flexDirection:"column"},...c,children:[l.jsxs("div",{style:{paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1,flexShrink:0},className:"flex items-start justify-between",children:[l.jsx("div",{style:{flex:1,minWidth:0,opacity:1},children:l.jsx(x,{variant:"body-md",style:{fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"20px",lineHeight:"30px",letterSpacing:"0%",verticalAlign:"middle",color:"#223B40",margin:0},children:a})}),l.jsx("span",{className:"text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center",style:{minWidth:"90px",height:"24px",borderRadius:"12px",paddingTop:"2px",paddingRight:"12px",paddingBottom:"4px",paddingLeft:"12px",backgroundColor:"#E6F7F0",color:"#2D5C63",opacity:1},children:r})]}),t&&l.jsx("div",{style:{flex:1,paddingRight:"24px",paddingLeft:"24px",paddingBottom:"24px",gap:"16px",opacity:1,display:"flex",flexDirection:"column",minHeight:0,overflow:"auto"},children:t})]}),Ye=({title:a="Notificaciones y Alertas del Sistema de Gestión de Recursos Humanos",status:r="3 nuevas",children:t,className:n="",...c})=>l.jsxs("div",{className:`bg-white w-full ${n}`,style:{minHeight:"476px",borderRadius:"14px",border:"1px solid #C4C4C4",opacity:1,display:"flex",flexDirection:"column"},...c,children:[l.jsxs("div",{style:{paddingTop:"24px",paddingRight:"24px",paddingBottom:"6px",paddingLeft:"24px",opacity:1,flexShrink:0},className:"flex items-start justify-between",children:[l.jsx("div",{style:{flex:1,minWidth:0,opacity:1},children:l.jsx(x,{variant:"body-md",style:{fontFamily:"IBM Plex Sans",fontWeight:400,fontStyle:"normal",fontSize:"20px",lineHeight:"30px",letterSpacing:"0%",verticalAlign:"middle",color:"#223B40",margin:0},children:a})}),l.jsx("span",{className:"text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center",style:{minWidth:"90px",height:"24px",borderRadius:"12px",paddingTop:"2px",paddingRight:"12px",paddingBottom:"4px",paddingLeft:"12px",backgroundColor:"#E6F7F0",color:"#2D5C63",opacity:1},children:r})]}),t&&l.jsx("div",{style:{flex:1,paddingRight:"24px",paddingLeft:"24px",paddingBottom:"24px",gap:"16px",opacity:1,display:"flex",flexDirection:"column",minHeight:0,overflow:"auto"},children:t})]}),rP=({loading:a=!1,error:r=null,hasData:t=null,data:n=null,variant:c="corto",title:u="Notificaciones",status:d=null,errorMessage:s=null,children:i=null,className:f="",...w})=>{if(a)return l.jsx(Ue,{className:f,...w});if(r)return l.jsx(_e,{title:u,errorMessage:s||r,className:f,...w});if(!(t!==null?t:n!=null&&n!==""))return l.jsx(ze,{title:u,className:f,...w});switch(c){case"largo":return l.jsx(Ge,{title:u,className:f,...w,children:i});case"cortoMasEstado":return l.jsx(Xe,{title:u,status:d,className:f,...w,children:i});case"largoMasEstado":return l.jsx(Ye,{title:u,status:d,className:f,...w,children:i});case"corto":default:return l.jsx(qe,{title:u,className:f,...w,children:i})}},nP={MuiTablePagination:{labelRowsPerPage:"Filas por página",labelDisplayedRows:({from:a,to:r,count:t})=>`${a}–${r} de ${t!==-1?t:`más de ${r}`}`},toolbarDensity:"Densidad",toolbarDensityLabel:"Densidad",toolbarDensityCompact:"Compacta",toolbarDensityStandard:"Estándar",toolbarDensityComfortable:"Cómoda",toolbarFilters:"Filtros",toolbarFiltersLabel:"Mostrar filtros",toolbarFiltersTooltipHide:"Ocultar filtros",toolbarFiltersTooltipShow:"Mostrar filtros",toolbarExport:"Exportar",toolbarExportLabel:"Exportar",toolbarExportCSV:"Descargar como CSV",toolbarExportPrint:"Imprimir",toolbarColumns:"Columnas",toolbarColumnsLabel:"Seleccionar columnas",filterPanelAddFilter:"Agregar filtro",filterPanelDeleteIconLabel:"Eliminar",filterPanelOperators:"Operadores",filterPanelOperatorAnd:"Y",filterPanelOperatorOr:"O",filterPanelColumns:"Columnas",filterPanelInputLabel:"Valor",filterPanelInputPlaceholder:"Valor del filtro",filterPanelInputPlaceholderOperator:"Operador",noRowsLabel:"No hay datos disponibles",noResultsOverlayLabel:"No se encontraron resultados",errorOverlayDefaultLabel:"Ocurrió un error",loadingOverlayLabel:"Cargando...",footerRowSelected:a=>a!==1?`${a} filas seleccionadas`:`${a} fila seleccionada`},tP=({columns:a=[],rows:r=[],loading:t=!1,emptyMessage:n,pageSize:c=10,pageSizeOptions:u=[5,10,25,50],className:d="",...s})=>{const{t:i}=g0.useTranslation(),f=a.map(h=>{const C=h.translationKey?i(h.translationKey):h.label||h.headerName;return{...h,headerName:C,label:C}}),w=[{field:"id",headerName:i("table.id"),width:90,translationKey:"table.id"},{field:"name",headerName:i("table.name"),width:200,translationKey:"table.name"},{field:"email",headerName:i("table.email"),width:250,translationKey:"table.email"},{field:"role",headerName:i("table.role"),width:150,translationKey:"table.role"}],g=f.length>0?f:w,p={...nP,...n&&{noRowsLabel:n}};return l.jsx(r5.Box,{className:d,sx:{height:400,width:"100%"},children:l.jsx(a5.DataGrid,{rows:r,columns:g,loading:t,pageSizeOptions:u,initialState:{pagination:{paginationModel:{pageSize:c}}},localeText:p,disableRowSelectionOnClick:!0,...s})})},lP=({series:a=[],categories:r=[],title:t="",height:n=350,colors:c=["#3B82F6","#10B981","#F59E0B","#EF4444","#8B5CF6"],showLegend:u=!0,showToolbar:d=!0,className:s="",...i})=>{const f=Z.useMemo(()=>({chart:{type:"line",height:n,toolbar:{show:d,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0}}},colors:c,stroke:{curve:"smooth",width:2},xaxis:{categories:r,labels:{style:{colors:"#6B7280"}}},yaxis:{labels:{style:{colors:"#6B7280"}}},legend:{show:u,position:"top",horizontalAlign:"center"},grid:{borderColor:"#E5E7EB",strokeDashArray:4},tooltip:{theme:"light"},dataLabels:{enabled:!1}}),[r,c,n,u,d]);return l.jsxs("div",{className:s,children:[t&&l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:t}),l.jsx(Q0,{options:f,series:a,type:"line",height:n,...i})]})},oP=({series:a=[],categories:r=[],title:t="",height:n=350,colors:c=["#3B82F6","#10B981","#F59E0B","#EF4444","#8B5CF6"],showLegend:u=!0,showToolbar:d=!0,horizontal:s=!1,className:i="",...f})=>{const w=Z.useMemo(()=>({chart:{type:"bar",height:n,toolbar:{show:d,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0}}},colors:c,plotOptions:{bar:{horizontal:s,borderRadius:4,columnWidth:"55%"}},xaxis:{categories:r,labels:{style:{colors:"#6B7280"}}},yaxis:{labels:{style:{colors:"#6B7280"}}},legend:{show:u,position:"top",horizontalAlign:"center"},grid:{borderColor:"#E5E7EB",strokeDashArray:4},tooltip:{theme:"light"},dataLabels:{enabled:!1}}),[r,c,n,u,d,s]);return l.jsxs("div",{className:i,children:[t&&l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:t}),l.jsx(Q0,{options:w,series:a,type:"bar",height:n,...f})]})},cP=({series:a=[],categories:r=[],title:t="",height:n=350,colors:c=["#3B82F6","#10B981","#F59E0B","#EF4444","#8B5CF6"],showLegend:u=!0,showToolbar:d=!0,className:s="",...i})=>{const f=Z.useMemo(()=>({chart:{type:"area",height:n,toolbar:{show:d,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0}}},colors:c,stroke:{curve:"smooth",width:2},fill:{type:"gradient",gradient:{shadeIntensity:1,opacityFrom:.7,opacityTo:.3,stops:[0,90,100]}},xaxis:{categories:r,labels:{style:{colors:"#6B7280"}}},yaxis:{labels:{style:{colors:"#6B7280"}}},legend:{show:u,position:"top",horizontalAlign:"center"},grid:{borderColor:"#E5E7EB",strokeDashArray:4},tooltip:{theme:"light"},dataLabels:{enabled:!1}}),[r,c,n,u,d]);return l.jsxs("div",{className:s,children:[t&&l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:t}),l.jsx(Q0,{options:f,series:a,type:"area",height:n,...i})]})},iP=({series:a=[],labels:r=[],title:t="",height:n=350,colors:c=["#3B82F6","#10B981","#F59E0B","#EF4444","#8B5CF6","#EC4899","#06B6D4"],showLegend:u=!0,className:d="",...s})=>{const i=Z.useMemo(()=>({chart:{type:"pie",height:n,toolbar:{show:!1}},colors:c,labels:r,legend:{show:u,position:"bottom"},dataLabels:{enabled:!0,formatter:f=>`${f.toFixed(1)}%`},tooltip:{theme:"light",y:{formatter:f=>`${f}`}},plotOptions:{pie:{donut:{size:"0%"}}}}),[r,c,n,u]);return l.jsxs("div",{className:d,children:[t&&l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:t}),l.jsx(Q0,{options:i,series:a,type:"pie",height:n,...s})]})},dP=({series:a=[],labels:r=[],title:t="",height:n=350,colors:c=["#3B82F6","#10B981","#F59E0B","#EF4444","#8B5CF6","#EC4899","#06B6D4"],showLegend:u=!0,donutSize:d="70%",className:s="",...i})=>{const f=Z.useMemo(()=>({chart:{type:"donut",height:n,toolbar:{show:!1}},colors:c,labels:r,legend:{show:u,position:"bottom"},dataLabels:{enabled:!0,formatter:w=>`${w.toFixed(1)}%`},tooltip:{theme:"light",y:{formatter:w=>`${w}`}},plotOptions:{pie:{donut:{size:d,labels:{show:!0,name:{show:!0},value:{show:!0,formatter:w=>`${w}`},total:{show:!0,label:"Total",formatter:()=>a.reduce((g,p)=>g+p,0).toString()}}}}}}),[r,c,n,u,d,a]);return l.jsxs("div",{className:s,children:[t&&l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:t}),l.jsx(Q0,{options:f,series:a,type:"donut",height:n,...i})]})},sP=({series:a=[],categories:r=[],title:t="",height:n=350,colors:c=["#3B82F6","#10B981","#F59E0B","#EF4444","#8B5CF6"],showLegend:u=!0,showToolbar:d=!0,className:s="",...i})=>{const f=Z.useMemo(()=>({chart:{type:"column",height:n,toolbar:{show:d,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0}}},colors:c,plotOptions:{bar:{horizontal:!1,borderRadius:4,columnWidth:"55%",dataLabels:{position:"top"}}},xaxis:{categories:r,labels:{style:{colors:"#6B7280"}}},yaxis:{labels:{style:{colors:"#6B7280"}}},legend:{show:u,position:"top",horizontalAlign:"center"},grid:{borderColor:"#E5E7EB",strokeDashArray:4},tooltip:{theme:"light"},dataLabels:{enabled:!1}}),[r,c,n,u,d]);return l.jsxs("div",{className:s,children:[t&&l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:t}),l.jsx(Q0,{options:f,series:a,type:"bar",height:n,...i})]})},uP=({icon:a="DocumentIcon",title:r="No hay datos",description:t="No se encontraron elementos para mostrar.",actionLabel:n,onAction:c,className:u="",...d})=>l.jsxs("div",{className:`flex flex-col items-center justify-center py-12 px-4 ${u}`,...d,children:[l.jsx("div",{className:"mb-4",children:l.jsx(b,{name:a,className:"h-16 w-16 text-gray-400"})}),l.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-2",children:r}),l.jsx("p",{className:"text-sm text-gray-500 text-center max-w-sm mb-4",children:t}),n&&c&&l.jsx(s0,{variant:"primary",onClick:c,children:n})]}),fP=({title:a,value:r,change:t,changeType:n="neutral",icon:c,iconColor:u="blue",className:d="",...s})=>{const i={blue:"bg-blue-100 text-blue-600",green:"bg-green-100 text-green-600",yellow:"bg-yellow-100 text-yellow-600",red:"bg-red-100 text-red-600",purple:"bg-purple-100 text-purple-600"},f={positive:"text-green-600",negative:"text-red-600",neutral:"text-gray-600"};return l.jsx("div",{className:`bg-white rounded-lg shadow-md p-6 ${d}`,...s,children:l.jsxs("div",{className:"flex items-center justify-between",children:[l.jsxs("div",{className:"flex-1",children:[l.jsx(x,{variant:"body2",className:"text-gray-600 mb-1",children:a}),l.jsx(x,{variant:"h3",className:"text-gray-900 mb-2",children:r}),t&&l.jsx("div",{className:`flex items-center text-sm ${f[n]}`,children:l.jsx("span",{children:t})})]}),c&&l.jsx("div",{className:`p-3 rounded-lg ${i[u]}`,children:l.jsx(b,{name:c,className:"h-6 w-6"})})]})})},wP=({items:a=[],className:r="",...t})=>a.length===0?null:l.jsx("div",{className:r,...t,children:l.jsx("ol",{className:"relative border-l border-gray-200",children:a.map((n,c)=>{const u=c===a.length-1;return l.jsxs("li",{className:`mb-10 ml-6 ${u?"mb-0":""}`,children:[l.jsx("div",{className:"absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white"}),l.jsx("time",{className:"mb-1 text-sm font-normal leading-none text-gray-400",children:n.date}),l.jsx("h3",{className:"text-lg font-semibold text-gray-900",children:n.title}),n.description&&l.jsx("p",{className:"mb-4 text-base font-normal text-gray-500",children:n.description}),n.icon&&l.jsx("div",{className:"absolute -left-8 top-0",children:l.jsx(b,{name:n.icon,className:"h-6 w-6 text-gray-400"})})]},c)})})}),hP=({items:a=[],variant:r="default",className:t="",...n})=>{if(a.length===0)return null;const c={default:"divide-y divide-gray-200",none:""};return l.jsx("ul",{className:`${c[r]} ${t}`,...n,children:a.map((u,d)=>l.jsx("li",{className:"py-3",children:typeof u=="string"?l.jsx("span",{className:"text-gray-900",children:u}):u},d))})},mP=({tags:a=[],onRemove:r,variant:t="default",className:n="",...c})=>a.length===0?null:l.jsx("div",{className:`flex flex-wrap gap-2 ${n}`,...c,children:a.map((u,d)=>{const s=typeof u=="string"?u:u.label,i=typeof u=="string"?t:u.variant||t;return l.jsxs(Fe,{variant:i,children:[s,r&&l.jsx("button",{onClick:()=>r(d),className:"ml-2 hover:text-gray-800",children:"×"})]},d)})}),Re=({label:a,placeholder:r,value:t,onChange:n,error:c,required:u=!1,disabled:d=!1,variant:s,className:i="",inputClassName:f="",labelClassName:w="",labelStyle:g,...p})=>{const[h,C]=Z.useState(!1),y=s==="hexa-login",R=`
     ${y?"w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm text-gray-900":"w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"}
     ${y?"":c?"border-red-500":"border-gray-300"}
     ${f}

package/dist/anima-ds.esm.js

@@ -36481,13 +36481,14 @@ const Be = zD, b = ({
 }) => /* @__PURE__ */ l.jsxs(
   "div",
   {
-    className: `bg-white ${a}`,
+    className: `bg-white w-full ${a}`,
     style: {
-      width: "379.5px",
-      height: "476px",
+      minHeight: "476px",
       borderRadius: "14px",
       border: "1px solid #C4C4C4",
-      opacity: 1
+      opacity: 1,
+      display: "flex",
+      flexDirection: "column"
     },
     ...r,
     children: [
@@ -36509,13 +36510,12 @@ const Be = zD, b = ({
           "div",
           {
             style: {
-              width: "379.5px",
-              height: "60px",
               paddingTop: "24px",
               paddingRight: "24px",
               paddingBottom: "6px",
               paddingLeft: "24px",
-              opacity: 1
+              opacity: 1,
+              flexShrink: 0
             },
             children: /* @__PURE__ */ l.jsx(
               "div",
@@ -36589,13 +36589,14 @@ const Be = zD, b = ({
 }) => /* @__PURE__ */ l.jsxs(
   "div",
   {
-    className: `bg-white ${r}`,
+    className: `bg-white w-full ${r}`,
     style: {
-      width: "379.5px",
-      height: "476px",
+      minHeight: "476px",
       borderRadius: "14px",
       border: "1px solid #C4C4C4",
-      opacity: 1
+      opacity: 1,
+      display: "flex",
+      flexDirection: "column"
     },
     ...t,
     children: [
@@ -36603,21 +36604,20 @@ const Be = zD, b = ({
         "div",
         {
           style: {
-            width: "379.5px",
-            height: "60px",
             paddingTop: "24px",
             paddingRight: "24px",
             paddingBottom: "6px",
             paddingLeft: "24px",
-            opacity: 1
+            opacity: 1,
+            flexShrink: 0
           },
           className: "flex items-start justify-between",
           children: /* @__PURE__ */ l.jsx(
             "div",
             {
               style: {
-                width: "331.5px",
-                height: "30px",
+                flex: 1,
+                minWidth: 0,
                 opacity: 1
               },
               children: /* @__PURE__ */ l.jsx(
@@ -36635,20 +36635,23 @@ const Be = zD, b = ({
       /* @__PURE__ */ l.jsxs(
         "div",
         {
-          className: "flex flex-col items-center justify-center",
+          className: "flex flex-col items-center justify-center flex-1",
           style: {
             paddingTop: "80px",
             paddingBottom: "24px",
+            paddingLeft: "24px",
+            paddingRight: "24px",
             display: "flex",
-            justifyContent: "flex-start"
+            justifyContent: "flex-start",
+            minHeight: 0
           },
           children: [
             /* @__PURE__ */ l.jsx(
               "div",
               {
-                className: "mb-4 flex items-center justify-center",
+                className: "mb-4 flex items-center justify-center flex-shrink-0",
                 style: {
-                  width: "63.99068069458008px",
+                  width: "64px",
                   height: "64px",
                   borderRadius: "12px",
                   paddingTop: "8px",
@@ -36711,13 +36714,14 @@ const Be = zD, b = ({
 }) => /* @__PURE__ */ l.jsxs(
   "div",
   {
-    className: `bg-white ${t}`,
+    className: `bg-white w-full ${t}`,
     style: {
-      width: "379.5px",
-      height: "476px",
+      minHeight: "476px",
       borderRadius: "14px",
       border: "1px solid #C4C4C4",
-      opacity: 1
+      opacity: 1,
+      display: "flex",
+      flexDirection: "column"
     },
     ...n,
     children: [
@@ -36725,21 +36729,20 @@ const Be = zD, b = ({
         "div",
         {
           style: {
-            width: "379.5px",
-            height: "60px",
             paddingTop: "24px",
             paddingRight: "24px",
             paddingBottom: "6px",
             paddingLeft: "24px",
-            opacity: 1
+            opacity: 1,
+            flexShrink: 0
           },
           className: "flex items-start justify-between",
           children: /* @__PURE__ */ l.jsx(
             "div",
             {
               style: {
-                width: "331.5px",
-                height: "30px",
+                flex: 1,
+                minWidth: 0,
                 opacity: 1
               },
               children: /* @__PURE__ */ l.jsx(
@@ -36757,18 +36760,21 @@ const Be = zD, b = ({
       /* @__PURE__ */ l.jsxs(
         "div",
         {
-          className: "flex flex-col items-center justify-center",
+          className: "flex flex-col items-center justify-center flex-1",
           style: {
             paddingTop: "80px",
             paddingBottom: "24px",
+            paddingLeft: "24px",
+            paddingRight: "24px",
             display: "flex",
-            justifyContent: "flex-start"
+            justifyContent: "flex-start",
+            minHeight: 0
           },
           children: [
             /* @__PURE__ */ l.jsx(
               "div",
               {
-                className: "mb-4 flex items-center justify-center border-2 rounded-full",
+                className: "mb-4 flex items-center justify-center border-2 rounded-full flex-shrink-0",
                 style: {
                   borderColor: "#374151",
                   width: "48px",
@@ -36790,8 +36796,8 @@ const Be = zD, b = ({
               "div",
               {
                 style: {
-                  width: "331.5px",
-                  height: "48px",
+                  width: "100%",
+                  maxWidth: "331.5px",
                   opacity: 1,
                   display: "flex",
                   alignItems: "center",
@@ -36822,8 +36828,9 @@ const Be = zD, b = ({
               {
                 className: "border flex items-center justify-center",
                 style: {
-                  width: "331.5px",
-                  height: "128px",
+                  width: "100%",
+                  maxWidth: "331.5px",
+                  minHeight: "128px",
                   borderRadius: "10px",
                   borderWidth: "1px",
                   borderColor: "#EF4444",
@@ -36838,8 +36845,7 @@ const Be = zD, b = ({
                   "div",
                   {
                     style: {
-                      width: "298px",
-                      height: "96px",
+                      width: "100%",
                       opacity: 1
                     },
                     children: /* @__PURE__ */ l.jsx(
@@ -36869,13 +36875,14 @@ const Be = zD, b = ({
 }) => /* @__PURE__ */ l.jsxs(
   "div",
   {
-    className: `bg-white ${t}`,
+    className: `bg-white w-full ${t}`,
     style: {
-      width: "379.5px",
-      height: "476px",
+      minHeight: "476px",
       borderRadius: "14px",
       border: "1px solid #C4C4C4",
-      opacity: 1
+      opacity: 1,
+      display: "flex",
+      flexDirection: "column"
     },
     ...n,
     children: [
@@ -36883,21 +36890,20 @@ const Be = zD, b = ({
         "div",
         {
           style: {
-            width: "379.5px",
-            height: "60px",
             paddingTop: "24px",
             paddingRight: "24px",
             paddingBottom: "6px",
             paddingLeft: "24px",
-            opacity: 1
+            opacity: 1,
+            flexShrink: 0
           },
           className: "flex items-start justify-between",
           children: /* @__PURE__ */ l.jsx(
             "div",
             {
               style: {
-                width: "331.5px",
-                height: "30px",
+                flex: 1,
+                minWidth: 0,
                 opacity: 1
               },
               children: /* @__PURE__ */ l.jsx(
@@ -36926,14 +36932,16 @@ const Be = zD, b = ({
         "div",
         {
           style: {
-            width: "379.5px",
-            height: "416px",
+            flex: 1,
             paddingRight: "24px",
             paddingLeft: "24px",
+            paddingBottom: "24px",
             gap: "16px",
             opacity: 1,
             display: "flex",
-            flexDirection: "column"
+            flexDirection: "column",
+            minHeight: 0,
+            overflow: "auto"
           },
           children: r
         }
@@ -36948,13 +36956,14 @@ const Be = zD, b = ({
 }) => /* @__PURE__ */ l.jsxs(
   "div",
   {
-    className: `bg-white ${t}`,
+    className: `bg-white w-full ${t}`,
     style: {
-      width: "379.5px",
-      height: "476px",
+      minHeight: "476px",
       borderRadius: "14px",
       border: "1px solid #C4C4C4",
-      opacity: 1
+      opacity: 1,
+      display: "flex",
+      flexDirection: "column"
     },
     ...n,
     children: [
@@ -36962,21 +36971,20 @@ const Be = zD, b = ({
         "div",
         {
           style: {
-            width: "379.5px",
-            height: "60px",
             paddingTop: "24px",
             paddingRight: "24px",
             paddingBottom: "6px",
             paddingLeft: "24px",
-            opacity: 1
+            opacity: 1,
+            flexShrink: 0
           },
           className: "flex items-start justify-between",
           children: /* @__PURE__ */ l.jsx(
             "div",
             {
               style: {
-                width: "331.5px",
-                height: "30px",
+                flex: 1,
+                minWidth: 0,
                 opacity: 1
               },
               children: /* @__PURE__ */ l.jsx(
@@ -37005,14 +37013,16 @@ const Be = zD, b = ({
         "div",
         {
           style: {
-            width: "379.5px",
-            height: "416px",
+            flex: 1,
             paddingRight: "24px",
             paddingLeft: "24px",
+            paddingBottom: "24px",
             gap: "16px",
             opacity: 1,
             display: "flex",
-            flexDirection: "column"
+            flexDirection: "column",
+            minHeight: 0,
+            overflow: "auto"
           },
           children: r
         }
@@ -37028,13 +37038,14 @@ const Be = zD, b = ({
 }) => /* @__PURE__ */ l.jsxs(
   "div",
   {
-    className: `bg-white ${n}`,
+    className: `bg-white w-full ${n}`,
     style: {
-      width: "379.5px",
-      height: "476px",
+      minHeight: "476px",
       borderRadius: "14px",
       border: "1px solid #C4C4C4",
-      opacity: 1
+      opacity: 1,
+      display: "flex",
+      flexDirection: "column"
     },
     ...c,
     children: [
@@ -37042,13 +37053,12 @@ const Be = zD, b = ({
         "div",
         {
           style: {
-            width: "379.5px",
-            height: "60px",
             paddingTop: "24px",
             paddingRight: "24px",
             paddingBottom: "6px",
             paddingLeft: "24px",
-            opacity: 1
+            opacity: 1,
+            flexShrink: 0
           },
           className: "flex items-start justify-between",
           children: [
@@ -37056,8 +37066,8 @@ const Be = zD, b = ({
               "div",
               {
                 style: {
-                  width: "331.5px",
-                  height: "30px",
+                  flex: 1,
+                  minWidth: 0,
                   opacity: 1
                 },
                 children: /* @__PURE__ */ l.jsx(
@@ -37085,7 +37095,7 @@ const Be = zD, b = ({
               {
                 className: "text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center",
                 style: {
-                  width: "90px",
+                  minWidth: "90px",
                   height: "24px",
                   borderRadius: "12px",
                   paddingTop: "2px",
@@ -37106,14 +37116,16 @@ const Be = zD, b = ({
         "div",
         {
           style: {
-            width: "379.5px",
-            height: "416px",
+            flex: 1,
             paddingRight: "24px",
             paddingLeft: "24px",
+            paddingBottom: "24px",
             gap: "16px",
             opacity: 1,
             display: "flex",
-            flexDirection: "column"
+            flexDirection: "column",
+            minHeight: 0,
+            overflow: "auto"
           },
           children: t
         }
@@ -37129,13 +37141,14 @@ const Be = zD, b = ({
 }) => /* @__PURE__ */ l.jsxs(
   "div",
   {
-    className: `bg-white ${n}`,
+    className: `bg-white w-full ${n}`,
     style: {
-      width: "379.5px",
-      height: "476px",
+      minHeight: "476px",
       borderRadius: "14px",
       border: "1px solid #C4C4C4",
-      opacity: 1
+      opacity: 1,
+      display: "flex",
+      flexDirection: "column"
     },
     ...c,
     children: [
@@ -37143,13 +37156,12 @@ const Be = zD, b = ({
         "div",
         {
           style: {
-            width: "379.5px",
-            height: "90px",
             paddingTop: "24px",
             paddingRight: "24px",
             paddingBottom: "6px",
             paddingLeft: "24px",
-            opacity: 1
+            opacity: 1,
+            flexShrink: 0
           },
           className: "flex items-start justify-between",
           children: [
@@ -37157,8 +37169,8 @@ const Be = zD, b = ({
               "div",
               {
                 style: {
-                  width: "241.5px",
-                  height: "60px",
+                  flex: 1,
+                  minWidth: 0,
                   opacity: 1
                 },
                 children: /* @__PURE__ */ l.jsx(
@@ -37186,7 +37198,7 @@ const Be = zD, b = ({
               {
                 className: "text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center",
                 style: {
-                  width: "90px",
+                  minWidth: "90px",
                   height: "24px",
                   borderRadius: "12px",
                   paddingTop: "2px",
@@ -37207,14 +37219,16 @@ const Be = zD, b = ({
         "div",
         {
           style: {
-            width: "379.5px",
-            height: "416px",
+            flex: 1,
             paddingRight: "24px",
             paddingLeft: "24px",
+            paddingBottom: "24px",
             gap: "16px",
             opacity: 1,
             display: "flex",
-            flexDirection: "column"
+            flexDirection: "column",
+            minHeight: 0,
+            overflow: "auto"
           },
           children: t
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anima-ds-nucleus",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "Anima Design System - A comprehensive React component library",
   "author": "Nucleus Labs <ipvasallo@nucleus.com.ar>",
   "license": "UNLICENSED",

package/src/components/DataDisplay/Card/CardError.jsx

@@ -9,32 +9,32 @@ export const CardError = ({
 }) => {
   return (
     <div 
-      className={`bg-white ${className}`} 
+      className={`bg-white w-full ${className}`} 
       style={{ 
-        width: '379.5px',
-        height: '476px',
+        minHeight: '476px',
         borderRadius: '14px',
         border: '1px solid #C4C4C4',
-        opacity: 1
+        opacity: 1,
+        display: 'flex',
+        flexDirection: 'column'
       }}
       {...props}
     >
       <div 
         style={{
-          width: '379.5px',
-          height: '60px',
           paddingTop: '24px',
           paddingRight: '24px',
           paddingBottom: '6px',
           paddingLeft: '24px',
-          opacity: 1
+          opacity: 1,
+          flexShrink: 0
         }}
         className="flex items-start justify-between"
       >
         <div
           style={{
-            width: '331.5px',
-            height: '30px',
+            flex: 1,
+            minWidth: 0,
             opacity: 1
           }}
         >
@@ -47,16 +47,19 @@ export const CardError = ({
         </div>
       </div>
       <div 
-        className="flex flex-col items-center justify-center"
+        className="flex flex-col items-center justify-center flex-1"
         style={{
           paddingTop: '80px',
           paddingBottom: '24px',
+          paddingLeft: '24px',
+          paddingRight: '24px',
           display: 'flex',
-          justifyContent: 'flex-start'
+          justifyContent: 'flex-start',
+          minHeight: 0
         }}
       >
         <div 
-          className="mb-4 flex items-center justify-center border-2 rounded-full"
+          className="mb-4 flex items-center justify-center border-2 rounded-full flex-shrink-0"
           style={{ 
             borderColor: '#374151',
             width: '48px',
@@ -73,8 +76,8 @@ export const CardError = ({
         </div>
         <div
           style={{
-            width: '331.5px',
-            height: '48px',
+            width: '100%',
+            maxWidth: '331.5px',
             opacity: 1,
             display: 'flex',
             alignItems: 'center',
@@ -101,8 +104,9 @@ export const CardError = ({
         <div 
           className="border flex items-center justify-center"
           style={{
-            width: '331.5px',
-            height: '128px',
+            width: '100%',
+            maxWidth: '331.5px',
+            minHeight: '128px',
             borderRadius: '10px',
             borderWidth: '1px',
             borderColor: '#EF4444',
@@ -116,8 +120,7 @@ export const CardError = ({
         >
           <div
             style={{
-              width: '298px',
-              height: '96px',
+              width: '100%',
               opacity: 1
             }}
           >

package/src/components/DataDisplay/Card/CardSkeleton.jsx

@@ -4,13 +4,14 @@ export const CardSkeleton = ({
 }) => {
   return (
     <div 
-      className={`bg-white ${className}`} 
+      className={`bg-white w-full ${className}`} 
       style={{ 
-        width: '379.5px',
-        height: '476px',
+        minHeight: '476px',
         borderRadius: '14px',
         border: '1px solid #C4C4C4',
-        opacity: 1
+        opacity: 1,
+        display: 'flex',
+        flexDirection: 'column'
       }}
       {...props}
     >
@@ -31,13 +32,12 @@ export const CardSkeleton = ({
         {/* Header skeleton - placeholder para el título */}
         <div 
           style={{
-            width: '379.5px',
-            height: '60px',
             paddingTop: '24px',
             paddingRight: '24px',
             paddingBottom: '6px',
             paddingLeft: '24px',
-            opacity: 1
+            opacity: 1,
+            flexShrink: 0
           }}
         >
           <div 

package/src/components/DataDisplay/Card/CardTituloCorto.jsx

@@ -8,32 +8,32 @@ export const CardTituloCorto = ({
 }) => {
   return (
     <div 
-      className={`bg-white ${className}`} 
+      className={`bg-white w-full ${className}`} 
       style={{ 
-        width: '379.5px',
-        height: '476px',
+        minHeight: '476px',
         borderRadius: '14px',
         border: '1px solid #C4C4C4',
-        opacity: 1
+        opacity: 1,
+        display: 'flex',
+        flexDirection: 'column'
       }}
       {...props}
     >
       <div 
         style={{
-          width: '379.5px',
-          height: '60px',
           paddingTop: '24px',
           paddingRight: '24px',
           paddingBottom: '6px',
           paddingLeft: '24px',
-          opacity: 1
+          opacity: 1,
+          flexShrink: 0
         }}
         className="flex items-start justify-between"
       >
         <div
           style={{
-            width: '331.5px',
-            height: '30px',
+            flex: 1,
+            minWidth: 0,
             opacity: 1
           }}
         >
@@ -58,14 +58,16 @@ export const CardTituloCorto = ({
       {children && (
         <div
           style={{
-            width: '379.5px',
-            height: '416px',
+            flex: 1,
             paddingRight: '24px',
             paddingLeft: '24px',
+            paddingBottom: '24px',
             gap: '16px',
             opacity: 1,
             display: 'flex',
-            flexDirection: 'column'
+            flexDirection: 'column',
+            minHeight: 0,
+            overflow: 'auto'
           }}
         >
           {children}

package/src/components/DataDisplay/Card/CardTituloCortoMasEstado.jsx

@@ -9,32 +9,32 @@ export const CardTituloCortoMasEstado = ({
 }) => {
   return (
     <div 
-      className={`bg-white ${className}`} 
+      className={`bg-white w-full ${className}`} 
       style={{ 
-        width: '379.5px',
-        height: '476px',
+        minHeight: '476px',
         borderRadius: '14px',
         border: '1px solid #C4C4C4',
-        opacity: 1
+        opacity: 1,
+        display: 'flex',
+        flexDirection: 'column'
       }}
       {...props}
     >
       <div 
         style={{
-          width: '379.5px',
-          height: '60px',
           paddingTop: '24px',
           paddingRight: '24px',
           paddingBottom: '6px',
           paddingLeft: '24px',
-          opacity: 1
+          opacity: 1,
+          flexShrink: 0
         }}
         className="flex items-start justify-between"
       >
         <div
           style={{
-            width: '331.5px',
-            height: '30px',
+            flex: 1,
+            minWidth: 0,
             opacity: 1
           }}
         >
@@ -58,7 +58,7 @@ export const CardTituloCortoMasEstado = ({
         <span
           className="text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center"
           style={{
-            width: '90px',
+            minWidth: '90px',
             height: '24px',
             borderRadius: '12px',
             paddingTop: '2px',
@@ -76,14 +76,16 @@ export const CardTituloCortoMasEstado = ({
       {children && (
         <div
           style={{
-            width: '379.5px',
-            height: '416px',
+            flex: 1,
             paddingRight: '24px',
             paddingLeft: '24px',
+            paddingBottom: '24px',
             gap: '16px',
             opacity: 1,
             display: 'flex',
-            flexDirection: 'column'
+            flexDirection: 'column',
+            minHeight: 0,
+            overflow: 'auto'
           }}
         >
           {children}

package/src/components/DataDisplay/Card/CardTituloLargo.jsx

@@ -8,32 +8,32 @@ export const CardTituloLargo = ({
 }) => {
   return (
     <div 
-      className={`bg-white ${className}`} 
+      className={`bg-white w-full ${className}`} 
       style={{ 
-        width: '379.5px',
-        height: '476px',
+        minHeight: '476px',
         borderRadius: '14px',
         border: '1px solid #C4C4C4',
-        opacity: 1
+        opacity: 1,
+        display: 'flex',
+        flexDirection: 'column'
       }}
       {...props}
     >
       <div 
         style={{
-          width: '379.5px',
-          height: '60px',
           paddingTop: '24px',
           paddingRight: '24px',
           paddingBottom: '6px',
           paddingLeft: '24px',
-          opacity: 1
+          opacity: 1,
+          flexShrink: 0
         }}
         className="flex items-start justify-between"
       >
         <div
           style={{
-            width: '331.5px',
-            height: '30px',
+            flex: 1,
+            minWidth: 0,
             opacity: 1
           }}
         >
@@ -58,14 +58,16 @@ export const CardTituloLargo = ({
       {children && (
         <div
           style={{
-            width: '379.5px',
-            height: '416px',
+            flex: 1,
             paddingRight: '24px',
             paddingLeft: '24px',
+            paddingBottom: '24px',
             gap: '16px',
             opacity: 1,
             display: 'flex',
-            flexDirection: 'column'
+            flexDirection: 'column',
+            minHeight: 0,
+            overflow: 'auto'
           }}
         >
           {children}

package/src/components/DataDisplay/Card/CardTituloLargoMasEstado.jsx

@@ -9,32 +9,32 @@ export const CardTituloLargoMasEstado = ({
 }) => {
   return (
     <div 
-      className={`bg-white ${className}`} 
+      className={`bg-white w-full ${className}`} 
       style={{ 
-        width: '379.5px',
-        height: '476px',
+        minHeight: '476px',
         borderRadius: '14px',
         border: '1px solid #C4C4C4',
-        opacity: 1
+        opacity: 1,
+        display: 'flex',
+        flexDirection: 'column'
       }}
       {...props}
     >
       <div 
         style={{
-          width: '379.5px',
-          height: '90px',
           paddingTop: '24px',
           paddingRight: '24px',
           paddingBottom: '6px',
           paddingLeft: '24px',
-          opacity: 1
+          opacity: 1,
+          flexShrink: 0
         }}
         className="flex items-start justify-between"
       >
         <div
           style={{
-            width: '241.5px',
-            height: '60px',
+            flex: 1,
+            minWidth: 0,
             opacity: 1
           }}
         >
@@ -58,7 +58,7 @@ export const CardTituloLargoMasEstado = ({
         <span
           className="text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center"
           style={{
-            width: '90px',
+            minWidth: '90px',
             height: '24px',
             borderRadius: '12px',
             paddingTop: '2px',
@@ -76,14 +76,16 @@ export const CardTituloLargoMasEstado = ({
       {children && (
         <div
           style={{
-            width: '379.5px',
-            height: '416px',
+            flex: 1,
             paddingRight: '24px',
             paddingLeft: '24px',
+            paddingBottom: '24px',
             gap: '16px',
             opacity: 1,
             display: 'flex',
-            flexDirection: 'column'
+            flexDirection: 'column',
+            minHeight: 0,
+            overflow: 'auto'
           }}
         >
           {children}

package/src/components/DataDisplay/Card/CardVacia.jsx

@@ -8,32 +8,32 @@ export const CardVacia = ({
 }) => {
   return (
     <div 
-      className={`bg-white ${className}`} 
+      className={`bg-white w-full ${className}`} 
       style={{ 
-        width: '379.5px',
-        height: '476px',
+        minHeight: '476px',
         borderRadius: '14px',
         border: '1px solid #C4C4C4',
-        opacity: 1
+        opacity: 1,
+        display: 'flex',
+        flexDirection: 'column'
       }}
       {...props}
     >
       <div 
         style={{
-          width: '379.5px',
-          height: '60px',
           paddingTop: '24px',
           paddingRight: '24px',
           paddingBottom: '6px',
           paddingLeft: '24px',
-          opacity: 1
+          opacity: 1,
+          flexShrink: 0
         }}
         className="flex items-start justify-between"
       >
         <div
           style={{
-            width: '331.5px',
-            height: '30px',
+            flex: 1,
+            minWidth: 0,
             opacity: 1
           }}
         >
@@ -46,18 +46,21 @@ export const CardVacia = ({
         </div>
       </div>
       <div 
-        className="flex flex-col items-center justify-center"
+        className="flex flex-col items-center justify-center flex-1"
         style={{
           paddingTop: '80px',
           paddingBottom: '24px',
+          paddingLeft: '24px',
+          paddingRight: '24px',
           display: 'flex',
-          justifyContent: 'flex-start'
+          justifyContent: 'flex-start',
+          minHeight: 0
         }}
       >
         <div 
-          className="mb-4 flex items-center justify-center"
+          className="mb-4 flex items-center justify-center flex-shrink-0"
           style={{ 
-            width: '63.99068069458008px',
+            width: '64px',
             height: '64px',
             borderRadius: '12px',
             paddingTop: '8px',